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

In this article, we’ll explore how to use Tailwind’s @apply directive in CSS Modules in Next.js. Tailwind is a popular utility-first CSS framework that simplifies the process of creating responsive web designs. It provides a set of pre-defined CSS classes that can be used to style HTML elements. However, there may be times when you need to apply multiple classes to an element to achieve the desired style. This can result in a lot of code duplication and make the code hard to maintain. Tailwind’s @apply directive can be used to address this issue.

Next.js is a popular React-based framework for building server-side rendered and statically generated web applications. Next.js also provides built-in support for CSS Modules, which is a popular approach to writing modular CSS.

Create a 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

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.

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.

CSS

/*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;
}

In the index.js component import the CSS module and apply the class as follows:

Javascript

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:

CSS

/* 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;
}

In the index.js component import Button.module.css using the alerts object and apply the class as follows.  You can apply the success and danger classes to the div element using the className prop.

Javascript

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.