What is the purpose of @apply Directive in Tailwind CSS ?

The @apply directive in Tailwind CSS allows you to create and apply custom utility classes by defining styles in your own CSS or Sass files. This is useful when you want to reuse a set of Tailwind utility classes.

Syntax

Create a custom class in your CSS or Sass file

.custom-button {
  @apply bg-blue-500 text-white p-2 rounded-md;
}

Use the custom class in your HTML

<button class="custom-button">Click me</button>

Here, the @apply Directive can be used to apply a set of Tailwind utility classes to a custom class.

Key Features

• Modular Styling: Encapsulate styles and create reusable components by defining custom classes with @apply.
• Tailwind Compatibility: The @apply directive seamlessly integrates with Tailwind CSS, allowing for the combination of utility classes.
• Responsive Styles: Combine @apply with responsive variants (sm:, md:, lg:, xl:) for adaptability.

Conclusion

By using the @apply directive, Tailwind CSS users can maintain the benefits of utility-first styling while achieving modularity and code reusability in a more structured and efficient manner.