Tailwind @apply

Tailwind is a popular CSS framework that allows developers to easily create styles for their websites or applications. One of its powerful features is the ability to use the @apply directive to create reusable CSS classes.

What is @apply?

The @apply directive in Tailwind allows you to apply a set of styles defined in a CSS class to another class. This means that you can create a base set of styles, and then reuse those styles in other classes without repeating code.

Here is an example of how @apply works:

.btn {
  @apply font-bold py-2 px-4 rounded;
}

.btn-primary {
  @apply bg-blue-500 text-white;
}

In the above code, we have defined a base button class called .btn, which includes some common button styles such as font weight, padding, and border radius. We then use the @apply directive to apply these styles to the .btn-primary class, which adds a blue background color and white text.

Why use @apply?

Using @apply can help reduce the amount of duplicated code in your CSS files. It enables you to create a set of base styles that can be easily reused across your project. This approach can help improve the maintainability of your CSS, as it is easier to make global changes to your styles when you have a consistent set of base styles that are reused throughout your project.

Example usage

Here is an example of how you might use @apply in a real-world project:

/* Base button styles */
.btn {
  @apply font-bold py-2 px-4 rounded;
}

/* Primary button styles */
.btn-primary {
  @apply bg-blue-500 text-white;
}

/* Secondary button styles */
.btn-secondary {
  @apply bg-gray-500 text-white;
}

/* Danger button styles */
.btn-danger {
  @apply bg-red-500 text-white;
}

In the above code, we define a set of base button styles in the .btn class. We then use the @apply directive to add specific styles for primary, secondary, and danger buttons.

Conclusion

Using the @apply directive in Tailwind CSS can help you write cleaner and more maintainable CSS styles for your projects. It enables you to create a set of base styles that can be easily reused, reducing the amount of duplicated code in your CSS files. If you haven't tried using @apply yet, give it a try!