How to use Tailwind @apply in CSS Modules in Next.js ?

In Next.js, you can enhance CSS Modules by integrating Tailwind’s @apply directive. This approach combines Tailwind’s utility classes with modular CSS, ensuring scoped styling and efficient management across your application.

We can integrate Tailwind’s @apply directive in CSS Modules of Next.js by importing Tailwind’s styles and applying utility classes as needed.

Approach

Here are the steps to use @apply in CSS modules in Next.js:

• Create a CSS module file in the styles directory of our Next.js project. We can name it anything we like, but it should have the .module.css extension.
• In the CSS module file, we can define our custom class using the @apply directive.
• In our component, we can import the CSS module file and apply the custom class to an HTML element.

Syntax: Define a custom class inside the CSS module and use the @apply directive to apply a set of pre-built Tailwind CSS classes to it like this:

.custom {
      @apply 
}

Then import this CSS module and apply the custom class to an HTML element using the className prop.

Set UP Next Application:

If you don’t have a Next.js app setup with Tailwind, check out how to Install & Setup Tailwind CSS with Next.js 

Example 1: Let’s say you want to create two different buttons. Create a new CSS module file named Button.module.css in the styles directory. Define your custom class using the @apply directive.

/* Button.module.css */

.primary {
    @apply bg-blue-700 text-white p-4 rounded-lg;
}

.error {
    @apply bg-red-800 text-white p-4 rounded-lg;
}

// index.js

import BtnStyles from "../styles/Button.module.css"

export default function Home() {
    return (
        <div className=
"min-h-screen flex flex-row justify-center items-center gap-4">
            <button className={BtnStyles.primary}>Primary</button>
            <button className={BtnStyles.error}>Error</button>
        </div>
    );
}

In the above code, we have imported the Button.module.css file using the BtnStyles object. We have then applied the primary and error classes to the button element using the className prop.

Run the Application:

npm run dev

Output:

Example 2: Similarly, if you wish to have an alert of different types of styles for different use cases. Create a new file named Alert.module.css in the styles directory. Define your custom class using the @apply directive as follows:

/* Alert.module.css */
.success {
    @apply bg-green-900 text-green-300 p-4 rounded-lg;
}

.danger {
    @apply bg-red-900 text-red-300 p-4 rounded-lg;
}

// index.js

import alerts from "../styles/Alert.module.css"

export default function Home() {
    return (
        <div className=
"min-h-screen flex flex-col justify-center items-center gap-4">
            <div className={alerts.success}>
                This is a success alert !
            </div>
            <div className={alerts.danger}>
                This is a danger alert !
            </div>
        </div>
    );
}

Output:

Hence, using @apply in CSS modules in Next.js allows us to create custom classes that can be composed of multiple pre-built Tailwind CSS classes. This helps us to write more modular and maintainable CSS code. 

Conclusion

Using Tailwind’s @apply in CSS Modules within Next.js enables seamless integration of Tailwind’s utility classes for consistent styling. This approach optimizes code organization, maintains scoped styling, and enhances frontend development efficiency in Next.js applications.