What is `@apply` in Tailwind CSS and when to use it

• What is the @apply directive?
• When to use @apply
• When not to use @apply
• Code Examples
  • Example 1: Creating a reusable button style
  • Example 2: Extending a Tailwind utility class with custom styles
  • Example 3: Creating a custom card component
• Summary

Tailwind CSS is a popular utility-first CSS framework that provides a wide range of CSS classes to create modern, responsive, and customizable designs. One of the powerful features of Tailwind CSS is the @apply directive, which allows you to compose and reuse utility classes in your custom CSS. In this article, we'll discuss the @apply directive, when to use it, when not to use it, and provide plenty of code examples.

¶What is the @apply directive?

The @apply directive in Tailwind CSS enables you to apply a set of utility classes to a custom CSS class. It can be helpful when you have repetitive sets of utility classes or want to create a custom design system based on Tailwind CSS.

For example, suppose you have a button that uses multiple utility classes:

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Click me
</button>

Using the @apply directive, you can create a custom CSS class that combines these utility classes:

.btn-blue {
  @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
}

Now you can use the .btn-blue class in your HTML:

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

¶When to use @apply

The @apply directive is most beneficial when:

1. You have repetitive sets of utility classes. If you find yourself using the same combination of utility classes across multiple elements, using @apply can help keep your HTML clean and maintainable.
2. You want to create a custom design system based on Tailwind CSS. @apply allows you to build a consistent design system with custom components that leverage Tailwind's utility classes.
3. You need to override or extend existing Tailwind utility classes. You can use @apply to create custom classes that include Tailwind utilities and any additional custom styles.
4. You have markup you have no control over. Sometimes CMS and WYSIWYG editors output HTML that you have no control over. To handle this you can create classes using @apply that get applied to your content.

All of these use-cases should be approached with caution. Due to the nature of utility-first CSS frameworks like Tailwind it is highly encouraged to implement them using a component system, which should vastly limit the need to use @apply.

¶When not to use @apply

Avoid using the @apply directive when:

1. The utility classes are not repetitive. If you only use a set of utility classes once or twice, it's better to keep them in the HTML to preserve the utility-first nature of Tailwind CSS.
2. It doesn't provide any benefit to your development process. If using @apply makes your code less readable or maintainable, stick with inline utility classes.
3. Your custom CSS class only applies one or two utility classes. Creating a custom CSS class with just a few utility classes may not provide much value and can reduce the readability of your HTML.

The key thing to remember with @apply is that it is taking you away from the utility-first approach of Tailwind and back to the more traditional CSS approach. Sometimes you have no choice but to do this, but approach with caution.

¶Code Examples

Here are some code examples demonstrating the effective use of the @apply directive:

¶Example 1: Creating a reusable button style

/* Custom CSS class for buttons */
.btn {
  @apply inline-block bg-gray-200 text-gray-700 font-semibold py-2 px-4 rounded;
}

/* Custom CSS class for primary buttons */
.btn-primary {
  @apply bg-blue-500 text-white hover:bg-blue-700;
}

<button class="btn btn-primary">
  Primary Button
</button>

<button class="btn">
  Secondary Button
</button>

¶Example 2: Extending a Tailwind utility class with custom styles

/* Custom CSS class for error messages */
.error-text {
  @apply text-red-600 font-semibold;
  text-decoration: underline;
  text-transform: uppercase;
}

<p class="error-text">
  This is an error message.
</p>

¶Example 3: Creating a custom card component

/* Custom CSS class for card component */
.card {
  @apply bg-white shadow-md rounded-lg overflow-hidden;
}

.card-header {
  @apply bg-gray-100 px-6 py-4;
}

.card-body {
  @apply px-6 py-4;
}

.card-footer {
  @apply bg-gray-100 px-6 py-4;
}

<div class="card">
  <div class="card-header">
    Card Header
  </div>
  <div class="card-body">
    Card Content
  </div>
  <div class="card-footer">
    Card Footer
  </div>
</div>

¶Summary

The @apply directive in Tailwind CSS is a powerful tool for composing and reusing utility classes in custom CSS. It helps to keep your HTML clean, maintainable, and consistent, especially when creating a custom design system based on Tailwind CSS. However, it's essential to use @apply wisely, as excessive use can reduce the readability and maintainability of your code and goes against the utility-first nature of Tailwind. By understanding when to use it and when not to, you can make the most of this powerful feature.