Custom utility not updating using Next.js with CSS Modules

What version of Tailwind CSS are you using?

v2.2.7

What build tool (or framework if it abstracts the build tool) are you using?

next 11.0.1, react 17.0.2, tailwindcss 2.2.7, postcss 8.2.6, autoprefixer 10.2.4

What version of Node.js are you using?

v14.17.1

What browser are you using?

Chrome v92.0.4515.107

What operating system are you using?

macOS 11.5.1

Reproduction repository

https://github.com/FabienMotte/tailwind-nextjs-css-modules/

Describe your issue

Hi there! 👋

I’m having an issue using a Tailwind custom utility with CSS Modules in a Next.js app.

Steps to reproduce:

1. Clone the reproduction repo, npm i, start the Next.js server with npm run dev
2. Create a custom utility in layer utilities (https://github.com/FabienMotte/tailwind-nextjs-css-modules/blob/main/styles/index.css#L6)
3. Use that custom utility in a CSS Modules file (https://github.com/FabienMotte/tailwind-nextjs-css-modules/blob/main/components/Test.module.css#L2)
4. Make a change to the custom utility : text-green-500 -> text-red-500 (https://github.com/FabienMotte/tailwind-nextjs-css-modules/blob/main/styles/index.css#L7)
5. The change is not reflected on the test component using CSS Modules.
   If you then restart the Next.js server, the change will happen, but only once.

Thank you! 🙏

[adamwathan]

Hey folks! Unfortunately the real issue here is that CSS modules are processed in isolation, which means your build tool is running Tailwind separately for each module.

That means that anything defined in a global CSS file isn’t “visible” to your individual CSS module files, because they are all processed independently. Unfortunately nothing we can do about this on our end — I would personally recommend not using CSS modules with Tailwind at all because you are going to make your builds a lot slower. 100 CSS modules means running Tailwind 100 times for every build, and that’s not something we control, that’s just what your build runner is designed to do.

Here’s some relevant documentation with some suggested solutions (it’s about Svelte/Vue style blocks, but it’s the exact same problem with CSS modules):

https://tailwindcss.com/docs/functions-and-directives#using-apply-with-per-component-css

The recommended way to use Tailwind is with a single global stylesheet, where any separate CSS files you’ve created are all imported into that stylesheet. Then Tailwind will only run once, and that build will have the full context of anything you’ve defined in your CSS files and features like @apply will work properly across them.

[gynekolog]

I got the same issue that starts with the tailwindcss v3.0.10. Example: https://codesandbox.io/s/thirsty-dewdney-6ko7g?file=/src/pages/index.tsx

edit: @iancleary add './src/**/*.module.css' to the content array does make no change: https://codesandbox.io/s/determined-waterfall-js437?file=/tailwind.config.js