When `@apply` is justified (and when it's an anti-pattern)

Tailwind's @apply directive lets you bundle utility classes into CSS class names. Veteran Tailwind users will tell you to avoid it. Beginners reach for it instinctively. Here's when each side is right.

When @apply is fine

Cross-cutting concerns that span the entire app: focus rings, transitions used in 20+ components, button reset styles. Defining .btn-primary once beats repeating 8 utility classes in every JSX file.

.btn-primary {
  @apply px-4 py-2 bg-accent text-white rounded-lg
         hover:bg-accent/80 focus-visible:ring-2 focus-visible:ring-accent
         transition-colors;
}

When @apply is an anti-pattern

Component-specific styling. If a class name describes the markup ("hero-headline", "card-footer"), you've lost Tailwind's main benefit — locality. You now have to switch files to understand the styling.

The heuristic

Ask: "Will I use this exact combination in 5+ unrelated places?" If yes, @apply. If no, inline the utilities at the JSX site.

Most styling lives in JSX. @apply is for the few patterns that genuinely span the app.