tailwindcss
tailwindcss copied to clipboard
[v4] Tailwind CSS classes not updating in output when adding previously unused classes - requires server restart
What version of Tailwind CSS are you using?
"@tailwindcss/vite": "^4.0.0-alpha.30",
"tailwindcss": "^4.0.0-alpha.30"
What build tool (or framework if it abstracts the build tool) are you using?
"@solidjs/start": "^1.0.9",
"vinxi": "^0.4.3"
What version of Node.js are you using?
"node": ">=18"
What browser are you using?
Firefox
What operating system are you using?
macOS
Reproduction URL
Since SolidStart isn't currently working on Stackblitz, please test locally:
- Clone the repository:
git clone https://github.com/binajmen/bun-solidstart-tw4 - Install dependencies and start the dev server:
bun install && bun dev - You should see a colored background on the index page
- Try changing the background color class in
app.tsx(e.g., to bg-blue-400) and save the file - The background will turn white instead of updating to the new color
- Only after manually restarting bun dev will the new background color appear
Describe your issue
When adding Tailwind classes that weren't previously used anywhere in the codebase, these new classes aren't being included in the generated CSS file. The changes only take effect after manually restarting the development server.
Same issue here on beta 1 using TanStack Start
Confirmed on beta 6 using the CLI directly. All of the following invocations fail to rewrite the existing file and remove unused classes from previous writes, whether it's a fresh run of the CLI or watch mode, and regardless of whether the optimize/minify flag is passed.
tailwindcss -i input.css -o output.css
tailwindcss -i input.css -o output.css --watch
tailwindcss -i input.css -o output.css --optimize
tailwindcss -i input.css -o output.css --minify
tailwindcss -i input.css -o output.css --optimize --watch
tailwindcss -i input.css -o output.css --minify --watch
The only way to get a fresh rewrite is to delete the file and re-run the CLI build.
EDIT: I think I misread the issue and I'm reporting something unrelated.
Same issu here using sveltekit@5
Same issue with [email protected], @tailwindcss/[email protected] and [email protected]
I also experienced this issue on Solid Start.
You don't need to restart the server actually, just re-saving the CSS file that has the tailwindcss import will cause it to pick up the changes.
I think tailwindcss plugin expects to run before other plugins and that's why it's breaking here. In their docs they show adding tailwindcss plugin before solid's plugin for example.
I think tailwindcss plugin expects to run before other plugins and that's why it's breaking here. In their docs they show adding tailwindcss plugin before solid's plugin for example.
I'm using Vike with Solid and daisyUI.
In the daisyUI doc, the @tailwindcss/vite plugin is the first plugin but I still have the same issue.
Same problem here, I'm using tailwindcss@^4.0.0, @tailwindcss/postcss@^4.0.0, and postcss@^8.5.1. For example, I can use text-red-500 and see updates, but when I try to use text-blue-500 (which is a class I haven't used before) then the text doesn't get the css style applied to it.
This was happening to me as well on SolidStart 1.0.11 until I added an @config directive to my CSS file with my tailwind.config.ts location as described here:
https://tailwindcss.com/docs/upgrade-guide#using-a-javascript-config-file
"@solidjs/start": "^1.0.11",
"@tailwindcss/vite": "^4.0.2",
"tailwindcss": "^4.0.2",
"vinxi": "^0.5.1",
"vite": "^5.4.10"
I am able to reproduce the issue by removing the @config directive or by commenting out my content: ['./src/**/*.{ts,tsx}'], section in tailwind.config.ts.
It sounds like this shouldn't be necessary in v4. Maybe a misconfiguration on my part, maybe an issue with Vite or the framework.
Can this issue be generated by multiple instances of tailwindcss dependency?
Related discussion: #16135
https://github.com/user-attachments/assets/e0b61faa-4423-4677-be43-222fa582df59
Hey! Sorry for the late reply but I've been playing with your repro and it seems like updating to 4.1.3 does fix this issue. Going to close this as resolved for now but if anyone is still seeing issues here, please create a new issue and attach a reproduction so we can fix this. Thanks!