How to use @Apply from tailwind in plain CSS?

Using Tailwind CSS's @apply directive in pure CSS files is a powerful feature that allows you to reuse Tailwind's utility classes within custom CSS classes. This significantly improves the cleanliness and maintainability of your CSS code. Below, I will explain in detail how to use the @apply directive and provide a concrete example.

Steps to Use the @apply Directive

1. Install and Configure Tailwind CSS: First, ensure Tailwind CSS is correctly installed and configured in your project. This typically involves installing the Tailwind CSS npm package, creating a configuration file, and including Tailwind CSS in your build process.

2. Create a CSS File: Create a CSS file in your project, such as styles.css, where you will implement the @apply directive.

3. Import Tailwind Directives: At the top of your CSS file, include Tailwind's utility classes using the @tailwind utilities; directive.

4. Use the @apply Directive: Within your CSS, select a selector and use the @apply directive to import necessary Tailwind classes. This allows you to apply Tailwind's utility classes to any custom CSS class.

Concrete Example

Suppose you want to design a button with a blue background, white text, and padding. In Tailwind, you can use @apply as follows:

css
@tailwind base;
@tailwind components;
@tailwind utilities;

.btn {
    @apply bg-blue-500 text-white p-4 rounded-lg;
}

In this example, the .btn class uses @apply to apply the following Tailwind classes:

• bg-blue-500: Sets the background color to blue.
• text-white: Sets the text color to white.
• p-4: Sets all padding to 1rem (based on default configuration).
• rounded-lg: Sets the corners to rounded.

Conclusion

Using the @apply directive enables you to easily reuse Tailwind's utility classes in CSS, maintaining consistent styling while keeping your CSS cleaner and more maintainable. This approach is particularly suitable for customizing component styles while preserving the flexibility and efficiency of Tailwind's utility classes.