Open mogeko opened 3 weeks ago
@mogeko This doesn't work because you're not referencing any @tailwind
APIs in the CSS module file. For the tailwind compiler this means that there are no indications that you want tailwind to work in this file and we don't pull in any utilities or default themes.
The reason for this is that a project can have multiple entrypoint CSS files and by only looking at a single CSS file we would otherwise not be able to find the right config.
How does your main Tailwind entrypoint globals.css
file look like? What you can do is @import
the globals.css
from the CSS modules file if it is only extending the default Tailwind styles. e.g.:
/* src/globals.css */
@import "tailwindcss";
@theme {
/* your own theme overwrites */
}
/* src/prose.module.css */
@import './globals.css' theme(reference);
@import '@fontsource-variable/fira-code' layer(base);
@theme {
--font-family-mono: 'Fira Code Variable', ui-monospace, SFMono-Regular, Menlo,
Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}
.prose h1 {
@apply text-4xl font-[900] lg:text-5xl font-mono;
}
It can work by importing globals.css
in *.module.css
, but there are a lot of redundant duplicates in the compilation results (because globals.css
has been imported twice!).
import '../styles/globals.css';
import styles from '../styles/prose.module.css';
// ...
I'd like to explain why I import globals.css
here. My usage case is to import globals.css
into layout.tsx
, and then use prose.module.css
separately in the prose.tsx
component. So in any case, for each page, globals.css
will be imported once.
app
|- prose
| |- layout.tsx
| `- page.tsx <- import `prose.module.css` here
|- layout.tsx <- import `globals.css` here
`- page.tsx
@mogeko If your globals.css
contains more than just the Tailwind config, you could try creating a separate tailwind.css
that only has the config and the imports from tailwind
and than both globals.css
and prose.module.css
could both import tailwind.css
so the remaining rules in global.css
are not added to prose.module.css
.
This seems like a regression considering this was possible in v3 - also quite confusing for the average developer as referencing theme variables via var
works fine.
Perhaps we need some sort of intellisense warning on theme
and apply
calls (other than just complaining that the variable doesn't exist) informing the developer that they need to perform this import?
Or, even better, some kind of flag at the top of a CSS file that encourages the compiler to include it, rather than having to break up CSS imports even further?
Something like @tailwind theme;
maybe?
What version of Tailwind CSS are you using?
v4.0.0-alpha.19
What build tool (or framework if it abstracts the build tool) are you using?
vite:
v5.4.1
, @tailwindcss/vite:4.0.0-alpha.19
What version of Node.js are you using?
v22.6.0
What browser are you using?
Firefox
What operating system are you using?
macOS
Reproduction URL
https://stackblitz.com/edit/vitejs-vite-pzkrfk?file=src%2Fmain.ts
But it seems that the node version of stackblitz does not support TailwindCSS 4.0.
Describe your issue
I tried to use
prose.module.css
:But it looks like
@apply...
It has not been compiled.globals.css
is worked.