Usage of Tailwind 4 @apply directive in NextJS React .module.css

Question

Sorry for this lame question - I am quite new in tailwind and the utilities around it. What I want to achieve is to write some local styles for my components using tailwind and @apply. I use the latest nextJS with latest tailwindcss (v4) how can I use the @apply directive in my local MyComponent.module.css file?

I mean I have a MyComponent.tsx like this:

import styles from "./MyComponent.module.css";
export default function MyComponent() {
   return <div className={styles.green}>Green Text Here</div>
}

And in ./MyComponent.module.css I would write something like this:

.green {
  @apply text-green-500
}

What package I need, and what setup to achieve this?

Note: in my layout.tsx I include tailwindcss as usual:

import "@/styles/globals.scss";

where globals.scss looks as:

@import "tailwindcss";

Unfortunately - I got compiler error during npm run build, saying

| Error: Cannot apply unknown utility class: text-green-500

however this classname works directly in components.

rozsazoltan · Accepted Answer · 2025-04-19 16:34:27Z

1

Deprecated preprocessors support

Please note that as of v4, TailwindCSS officially does not support SCSS. Therefore, any issues arising from SCSS usage can typically be resolved simply by avoiding SCSS altogether.

Deprecated: Sass, Less and Stylus preprocessors support - StackOverflow

CSS Modules Compatibility

As of TailwindCSS v4, the official recommendation is to avoid using @apply in connection with external modules. This can lead to excessive duplication and a larger compiled CSS output. See posts from one of the TailwindCSS creators for more details:

css(unknownAtRules): Unknown at rule @apply - StackOverflow

Tailwind is compatible with CSS modules and can co-exist with them if you are introducing Tailwind into a project that already uses them, but we don't recommend using CSS modules and Tailwind together if you can avoid it.

CSS modules - TailwindCSS v4 Docs

Instead, use references to the appropriate variables:

.green {
  color: var(--color-green-500);
}

answered Apr 19 at 16:34

rozsazoltan

18.2k7 gold badges49 silver badges143 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Zoltan Hernyak Apr 19 at 16:37

Thanks! Unfortunately it was just an example. I could reference the color directly, but wanted to merge some tailwind classes into one so @apply what I want to use. But - thanks! :)

rozsazoltan Apr 19 at 16:38

You can do this in your global.css file by creating a new class that you can later use in your component. Unfortunately, in this case, the class will not be scoped to the specific module; it will be globally available.

Zoltan Hernyak Apr 19 at 16:39

Sure, I was able to use it in the global.css, but wanted to combine the power of @apply and local modules :(

Collectives™ on Stack Overflow

Usage of Tailwind 4 @apply directive in NextJS React .module.css

1 Answer 1

Deprecated preprocessors support

CSS Modules Compatibility

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Deprecated preprocessors support

CSS Modules Compatibility

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related