How to use Tailwind v4 with Next CSS modules

[tylerclark]

I was trying to do a few things:

1. Use Tailwind v4
2. Create a React component (SampleComponent.tsx) in Next with a module stylesheet to scope the CSS (SampleComponent.module.css)
3. Inside of SampleComponent.tsx, I want to give unique class names and then reference those class names in the stylesheet. Not using Tailwind classes in the component but rather in the stylesheet. For example <div className="container">
4. In the SampleComponent.module.css I would have the class .container { @apply rounded-full w-14 h-14 flex items-center justify-center bg-white hover:bg-gray-100 }

I was doing this and not using inline TW class names because I am embedding this component in other websites so being able to have an external stylesheet was important. Anyway! When I have the file called SampleComponent.module.css it wouldn't load the Next website. If I renamed it to SampleComponent.css it was able to load.

This is fine I guess but I really want to understand what is happening that causes this issue. Is this Webpack and Tailwind JIT compiler having issues? Is there a special config that I need to have on my side? I just want to be a better advanced Tailwind user as this seems pretty basic.

Thanks in advance!

[dicash]

We do

// page.tsx
import styles from './style.module.css';
...
<div id="home" style={styles.home} ...

/* style.module.css */
@reference 'tailwindcss';

@theme {
  --color-white: white;
  --color-black: #010102;
  ...
}

@layer base {
  #home {
    @apply text-slate-600;
  }
  h1,
    .text-h1 {
      @apply text-mobile-h1 sm:text-desktop-h1;
  ...
}

And it doesn't work either.

Please help. That guide is needed.

There's no clear understanding how to "unload" included css or isolate it in nextjs with tailwind v4 in it.

[ArthurDetomi]

This post was very helpfull for me, thank you

[Addono]

Got it to work following: https://tailwindcss.com/docs/compatibility#explicit-context-sharing

You need to @reference wherever your theme config is specified:

@reference "../app.css";

button {
  @apply bg-blue-500;
}

[Vijaykumarparelli]

can we use absolute path instead of relative path?

[deusielbrizante]

Hello! If you'll excuse me, I was doing some tests and, fortunately, I discovered that @reference can receive 'tailwindcss' and work normally.

If you want to test this instead of passing the path to the globals.css file

@reference "tailwindcss";

If it works, you won't need to keep passing the path throughout the file

[BestStepInUa]

Yes, its work! Thanks :)