What @apply Does and When to Use It
Understand how @apply inlines utility classes into a CSS rule and identify the situations where extracting a class makes sense.
The Problem @apply Solves
Tailwind's utility-first approach places all styles directly on HTML elements. For simple pages, this is fine. But when the same combination of 15 utility classes appears on 50 button elements, updating a single design detail requires changing 50 places. The @apply directive solves this by letting you extract frequently repeated utility combinations into a single custom CSS class — without giving up Tailwind's utility system.
How @apply Works
@apply is a PostCSS directive that Tailwind processes during compilation. When Tailwind encounters @apply bg-blue-600 text-white font-semibold inside a CSS rule, it inlines the CSS declarations that those utilities would generate. The resulting CSS rule contains the actual property values, not Tailwind class names. The final browser output has no knowledge of Tailwind or @apply.
/* Your CSS with @apply */
@layer components {
.btn {
@apply px-4 py-2 rounded-lg font-semibold text-sm;
}
.btn-primary {
@apply btn bg-blue-600 text-white hover:bg-blue-700;
}
}
/* Compiled output (what the browser sees) */
.btn {
padding: 0.5rem 1rem;
border-radius: 0.5rem;
font-weight: 600;
font-size: 0.875rem;
}
.btn-primary {
/* btn styles + primary colors */
}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