@apply Pitfalls and Alternatives
Recognize common @apply misuses, understand the specificity implications, and evaluate component-extraction alternatives like JSX components.
When @apply Causes Problems
While @apply seems like a convenient way to organize styles, overusing it creates a set of well-documented problems. These include difficulty in understanding which utilities are active, loss of single-source-of-truth for component styles, and specificity surprises. Understanding these pitfalls helps you decide when @apply is genuinely the right tool versus when a better alternative exists.
Pitfall 1: Recreating Traditional CSS
The most common misuse of @apply is using it to recreate conventional CSS classes — making every element have a single semantic class like .header-title and then filling it with utilities. This is exactly the pattern Tailwind was designed to move away from. You end up with the downsides of both approaches: verbose CSS files AND HTML that requires knowing which CSS classes exist. The result is harder to maintain than either approach alone.
/* ANTI-PATTERN: Recreating traditional CSS with @apply */
.page-header { @apply bg-white border-b px-6 py-4; }
.page-title { @apply text-2xl font-bold text-gray-900; }
.page-meta { @apply text-sm text-gray-500 mt-1; }
.page-action { @apply ml-auto; }
/* BETTER: Just write the utilities directly in HTML -->
<header class="bg-white border-b px-6 py-4">
<h1 class="text-2xl font-bold text-gray-900">Title</h1>
<p class="text-sm text-gray-500 mt-1">Meta</p>
</header>All lessons in this course
- What @apply Does and When to Use It
- Creating Reusable Component Classes
- Organizing Custom CSS With Layers
- @apply Pitfalls and Alternatives