@apply and Extracting Reusable Components

When to Extract Styles

The @apply directive lets you compose utility classes inside a CSS rule. This is useful when a repeating pattern appears across many files and you want a single source of truth without creating a component.

@import "tailwindcss";

.btn-primary {
  @apply rounded-lg bg-sky-600 px-5 py-2.5 text-sm font-semibold text-white
         hover:bg-sky-700 focus:ring-2 focus:ring-sky-500 focus:ring-offset-2
         transition-all duration-150;
}

.input-base {
  @apply w-full rounded-md border border-slate-300 px-3 py-2 text-sm
         focus:border-sky-500 focus:outline-none focus:ring-1 focus:ring-sky-500;
}

In component frameworks (React, Vue, Svelte), prefer creating a component over using @apply. Components allow you to encapsulate logic and markup alongside styles, which is more composable and testable.