Why @apply for extracting patterns in Tailwind? - Purpose & Use Cases

The Big Idea

What if you could change dozens of button styles by editing just one line of code?

The Scenario

Imagine you are styling many buttons on your website. You write the same group of Tailwind classes over and over, like bg-blue-500 text-white px-4 py-2 rounded for each button.

The Problem

Typing the same classes repeatedly is tiring and easy to mess up. If you want to change the style later, you must update every button manually, which takes a lot of time and can cause mistakes.

The Solution

The @apply directive lets you group common Tailwind classes into one custom class. Then you use that class everywhere, so changing styles means editing just one place.

Before vs After

✗ Before

<button class="bg-blue-500 text-white px-4 py-2 rounded">Click me</button>
<button class="bg-blue-500 text-white px-4 py-2 rounded">Submit</button>

✓ After

.btn-primary {
  @apply bg-blue-500 text-white px-4 py-2 rounded;
}

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

What It Enables

You can create reusable style patterns that keep your code clean and make design updates fast and error-free.

Real Life Example

When building a website with many buttons, cards, or alerts sharing the same style, @apply helps you keep your CSS organized and consistent.

Key Takeaways

Writing repeated Tailwind classes is slow and error-prone.

@apply groups common classes into one reusable style.

Updating styles becomes easy and consistent across your site.