Customization

Apply and Directives

Directives are special at-rules Tailwind understands in your CSS. The most useful are @tailwind (inject styles), @layer (organise custom CSS) and @apply (reuse utilities).

The three @tailwind directives

Your main CSS file injects Tailwind’s base reset, component classes and utilities.

input.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Reusing utilities with @apply

When the same long class list repeats, @apply lets you bundle utilities into a single custom class inside a @layer.

Extract a .btn class

@layer components {
  .btn {
    @apply bg-sky-600 text-white font-semibold px-5 py-2.5 rounded-lg hover:bg-sky-700 transition;
  }
}

Then just use .btn

Example

<button class="btn">Reusable button</button>

💡

Prefer components (a Button in React/Vue) over @apply when you can — but @apply is great for a handful of shared, framework-agnostic classes.

Apply and Directives

The three @tailwind directives

Reusing utilities with @apply

Related Tailwind Topics