Define your own design tokens with @theme, animate with transitions and keyframes, and extract repeated utility groups into reusable classes.
Why: the @theme directive defines design tokens as CSS variables and automatically generates matching utilities — define --color-brand once and use bg-brand, text-brand, border-brand everywhere.
<!DOCTYPE html>
<html>
<head>
<style type="text/tailwindcss">
@theme {
--color-brand: oklch(0.6 0.2 290);
--font-display: "Georgia", serif;
}
</style>
</head>
<body class="p-6">
<div class="rounded-lg bg-brand p-6 text-white">
<h2 class="font-display text-2xl">Custom theme tokens</h2>
<p class="mt-2 text-sm">bg-brand and font-display come from @theme</p>
</div>
</body>
</html>Why: transition (plus duration-* and ease-*) animates property changes smoothly. scale-*, rotate-*, translate-*, and skew-* move or resize elements — combine them with hover: for interactive effects you can try below.
<div class="flex flex-wrap gap-8 p-8">
<button class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white transition duration-300 ease-in-out hover:scale-110">
hover:scale-110
</button>
<button class="rounded-lg bg-emerald-600 px-4 py-2 text-sm font-semibold text-white transition duration-300 hover:-translate-y-1 hover:shadow-lg">
hover:-translate-y-1
</button>
<button class="rounded-lg bg-pink-600 px-4 py-2 text-sm font-semibold text-white transition duration-500 hover:rotate-6">
hover:rotate-6
</button>
</div>Why: Tailwind ships ready-made animations — animate-spin, animate-pulse, animate-bounce. For your own, define @keyframes and register a --animate-* token in @theme, then use it like any other utility.
<!DOCTYPE html>
<html>
<head>
<style type="text/tailwindcss">
@theme {
--animate-wiggle: wiggle 1s ease-in-out infinite;
}
@keyframes wiggle {
0%, 100% { transform: rotate(-3deg); }
50% { transform: rotate(3deg); }
}
</style>
</head>
<body class="flex flex-wrap items-center gap-8 p-8">
<div class="h-10 w-10 animate-spin rounded-full border-4 border-indigo-500 border-t-transparent"></div>
<div class="h-10 w-10 animate-pulse rounded-full bg-indigo-500"></div>
<div class="h-10 w-10 animate-bounce rounded-full bg-indigo-500"></div>
<div class="animate-wiggle rounded-md bg-amber-400 px-4 py-2 text-sm font-semibold">animate-wiggle</div>
</body>
</html>Why: when the same group of utilities repeats everywhere (e.g. every button), extract it with @apply inside @layer components. In React or Angular, prefer extracting a <Button> component and merging extra classes with clsx / tailwind-merge — @apply is best for plain HTML or one-off design systems.
<!DOCTYPE html>
<html>
<head>
<style type="text/tailwindcss">
@layer components {
.btn {
@apply rounded-md bg-indigo-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-indigo-700;
}
.btn-outline {
@apply rounded-md border border-indigo-600 px-4 py-2 text-sm font-semibold text-indigo-600 transition hover:bg-indigo-50;
}
}
</style>
</head>
<body class="flex gap-4 p-6">
<button class="btn">Primary</button>
<button class="btn-outline">Secondary</button>
</body>
</html>