bold cosmos
I'm trying to add tailwind to an existing vite project. The css I'm importing in main.ts is built and served on the initial page load, but when I save a file that tailwind.config is configured to trigger on I don't get a new css file via HMR (HMR is working fine for js)
Any tips on how to debug this? (I'm new to vite)
I got tailwind HMR working on a clean vite project. I've spent a lot of time making sure that the configuration is the same in both projects, but I can't get it working.
bold cosmos
Hmm, HMR is working when i save the css file directly. So it seems like tailwind is not triggered when I save files that tailwind is configured to listen to
bold cosmos
As far as I understand vite runs tailwind via postcss, but is postcss run in watch mode?
bold cosmos
When I run postcss manually in watch mode it is generating correct css when I save the file:
postcss src/style.css -o foo.css --watch
But vite does not trigger when saving the same file
bold cosmos
For now I'm just starting the tailwind watcher manually:
concurrently "vite" "tailwindcss --watch -i src/app.css -o src/app.gen.css"
And import "./app.gen.css" in main.ts
It's not an ideal setup but this works and updates the css when I change my source files
wary oriole
Which guide did you use?
bold cosmos
This one: https://tailwindcss.com/docs/guides/vite
and then I looked at this (I'm using elm in my project):
https://github.com/erkal/elm-vite-tailwind-setup
wary oriole
OK, you're saving elm files and Tailwind is not regenerating with hmr?
wary oriole
Recheck Tailwind config to adding elm files to content array.
bold cosmos
It works when running tailwindcss --watch/postcss --watch, so the config should be fine