[bug] TW4 breaks module.css files

[TyIsI]

What version of Tailwind CSS are you using?

v4.0.8

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

PackageManager: [email protected]

Dependencies:

• @tailwindcss/vite: 4.0.8
• @tanstack/react-router: ^1.106.0
• just-install: ^2.0.2
• react: 19.0.0
• react-dom: 19.0.0
• react-hook-form: ^7.54.2
• swr: ^2.3.2
• tailwindcss: 4.0.8
• wireit: ^0.14.11
• zod: ^3.24.2

Dev dependencies:

• @eslint/js: ^9.19.0
• @tanstack/eslint-plugin-router: ^1.105.0
• @tanstack/router-devtools: ^1.106.0
• @tanstack/router-plugin: ^1.106.0
• @tyisi/config-eslint: ^4.0.0
• @tyisi/config-prettier: ^1.0.1
• @types/react: ^19.0.8
• @types/react-dom: ^19.0.3
• @vitejs/plugin-react-swc: 3.8.0
• eslint: ^9.20.1
• eslint-plugin-react-hooks: ^5.0.0
• eslint-plugin-react-refresh: ^0.4.18
• eslint-plugin-unused-imports: ^4.1.4
• generate-react-cli: ^8.4.9
• globals: ^15.14.0
• prettier: ^3.5.1
• typescript: ~5.7.2
• typescript-eslint: ^8.22.0
• vite: 6.1.1
• vite-tsconfig-paths: 5.1.4

What version of Node.js are you using?

v22.13.1

What browser are you using?

n/a

What operating system are you using?

Linux

Reproduction URL

This is a completely fresh project.

I can add a repro url later, there is literally no code of concern at the moment.

Describe your issue

Importing a module.css file does not work without importing the main.css file.

Setup:

• Clean Vite repository with minimal modules installed.
• tsconfig is setup to map @/ paths to the src directory. (But not relevant.)
• tailwind has been set up per instructions for ViteJS and main.css file has been included in the index.html file.
• I modified the theme with custom background images.
• Started a layout component for the tanstack root.
• Started a menu component the default layout component with a module.css file.
• I throw @apply gap-2 p-2 from the default template into the primary class in the PrimaryMenu.module.css file and it errors.

Debugging steps:

• Verified that main.css file is included in the index.html file.
• Tried excluding .git from my .gitignore file as recommend in @source doesn't work if dist/ is in the gitignore. #16669. This did not solve the issue.
• Tried hoisting node_modules and direct @source directives in the main.css file according to @source directive not working with pnpm #16038.
• Tried @import 'tailwindcss'; in the module.css file. While this did load the general tailwind css set, it did not load a custom theme override.
• Tried @import 'tailwindcss' source('<path to src directory>'); in the module.css file. This did not work with the custom theme override.
• Finally, @import '../../../main.css'; solved the issue.

I figured I'd make a separate issue because there didn't seem to be overlap.

[adamwathan]

Hey! I think this is expected behavior unless I'm overlooking some detail:

https://tailwindcss.com/docs/compatibility#explicit-context-sharing

[TyIsI]

Shoot! You're right!

Thank you for pointing that out!