Part 54: The @apply Directive: Pros, Cons & When to Use It

The @apply directive allows you to inline Tailwind utility classes into custom CSS rules.

1. Syntax

.btn-primary {
  @apply px-4 py-2 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition;
}

2. The Danger of Overusing @apply

"If you use @apply for everything, you are just writing traditional CSS again with worse names." — Adam Wathan

Downsides:

1. Bundle Bloat: Generates redundant duplicate CSS rules.
2. Loss of Colocation: Forces you back into separate CSS files.
3. Breaks Component Abstraction: In React/Vue/Angular, extract reusable components (e.g. <Button />), not CSS classes.

Key Takeaways

• Prefer component abstractions (<Button />) over @apply.
• Reserve @apply for third-party widget overrides (like TinyMCE or calendar pickers).

In Part 55, we explore Creating Custom Plugins & Utilities!