Tailwind CSS @apply Directive

Basic @apply Syntax

@layer components {
    .btn-primary {
        @apply px-4 py-2 bg-blue-500 text-white rounded-lg font-medium;
        @apply hover:bg-blue-600 transition-colors;
    }
}

Then in HTML:

<button class="btn-primary">Click me</button>

Instead of repeating 6+ utility classes on every button, you write them once.

Always Use @layer components

Wrapping @apply in @layer components matters for two reasons:

• It places your class in Tailwind's component layer — lower priority than utilities.
• Inline utility classes can still override it: <button class="btn-primary bg-red-500"> works.

Without @layer, your class will fight with Tailwind utilities and cause specificity bugs.

The Button Pattern

The classic use case — buttons with variants:

@layer components {
    .btn {
        @apply inline-flex items-center justify-center gap-2;
        @apply px-4 py-2 rounded-lg font-medium;
        @apply transition-colors duration-200;
        @apply focus:outline-none focus:ring-2 focus:ring-offset-2;
    }
    .btn-primary {
        @apply btn bg-blue-500 text-white;
        @apply hover:bg-blue-600 focus:ring-blue-500;
    }
    .btn-secondary {
        @apply btn bg-slate-700 text-white;
        @apply hover:bg-slate-600 focus:ring-slate-500;
    }
    .btn-danger {
        @apply btn bg-red-500 text-white;
        @apply hover:bg-red-600 focus:ring-red-500;
    }
}

Now you can use:

<button class="btn-primary">Save</button>
<button class="btn-secondary">Cancel</button>
<button class="btn-danger">Delete</button>

When @apply Is NOT the Answer

Here's the honest truth: many developers overuse @apply and recreate the problems Tailwind was designed to solve.

When to Use @utility Instead

If you want a class that behaves like a real Tailwind utility (with variants like hover: and md:), use @utility:

@utility content-auto {
    content-visibility: auto;
}

@utility text-shadow-sm {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

Now you can use variants:

<div class="content-auto">...</div>
<h1 class="text-shadow-sm md:text-shadow-lg">Heading</h1>

Rule of thumb: Use @apply for components. Use @utility for new utilities.

The Modern Alternative: Component Extraction

In frameworks like React, Vue, or Svelte, a better pattern is to extract a component:

// Button.jsx (React)
export function Button({ variant = 'primary', children, ...props }) {
    const styles = {
        primary: 'bg-blue-500 hover:bg-blue-600 text-white',
        secondary: 'bg-slate-700 hover:bg-slate-600 text-white',
        danger: 'bg-red-500 hover:bg-red-600 text-white',
    };

    return (
        <button
            className={`px-4 py-2 rounded-lg font-medium transition ${styles[variant]}`}
            {...props}
        >
            {children}
        </button>
    );
}

This gives you type-safe props, autocomplete, and reusability without polluting your CSS. In modern frontend work, this is usually better than @apply.