What is the purpose of @apply Directive in Tailwind CSS ?
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.
Contact Us