[Vite plugin] Livereload with Tailwind is not working #7853
Comments
|
I tried it inside a Github Codespace and it works. Is there any error being logged on the browser console or on your terminal? |
|
This seems like a hydration error. When I run the repro repo while having Chrome extensions enabled, I get hydration errors on page load and HMR does not work for Tailwind. Additionally, if I change the text of an element in the index route (and not a className), the generated CSS is removed (even when unchanged) but the actual text still updates. If I try all this without any extensions loaded/in an incognito window, it works perfectly. |
|
@drobson03, you are correct! I think it's more related to hydration, and running it in incognito does workaround the error. |
|
I also couldn't reproduce locally. Are either of you able to narrow down which extension causes the issue? I have react dev tools, so it's not that. |
|
For me, it seems to be Dark Reader. The hydration mismatch is happening in |
|
For me, it was Apollo Client Devtools |
|
React hydration issues will be fixed in v18.3. If you update to the canary version (stable enough for Next.js), then it will resolve the hydration error. |
|
Had the same issue. It was the Argent X extension. |
|
Additional information, even after having removed the "Apollo Client Devtool" extension, I am still seeing the error, but now it occurs on 70% of the pages, while the rest works normally. |
|
Confirm that disable extensions temporarily resolve this issue! |
|
I do observe the same issue, even after upgrading to |
|
I'd recommend double checking the console for markup errors. Some Radix UI example markup had a Fixing that solved the HMR issue entirely 🤷♂️ |
At least on my use case i did not use Radix at all and still observed this, just plain tailwind examples |
|
I'm on 2.5.1 and it's still not working. I'm using SPA mode. But that also seems related to #8466. |
|
We've added a section to Future > Vite > Troubleshooting for missing styles due to hydration errors, extensions, etc. tl;dr: it should be fixed in React canary and not something Remix can do anything about. @JoepKockelkorn if your issue seems the same as #8466 happy to continue discussion there. If not, feel free to open up a separate issue for SPA mode-specific features. |
What version of Remix are you using?
2.2.0
Are all your remix dependencies & dev-dependencies using the same version?
Steps to Reproduce
Just spin up the Vite example and install Tailwind.
Here's a public repo with the error:
https://github.com/rodolphoasb/vite-remix-tailwind
Here's a video of the error:
https://www.loom.com/share/281c402c46ce42af84f279a4750f8496?sid=e08a36f6-5d9d-4a61-a97a-a05a44f30d18
Expected Behavior
The live reload should work, updating the new tailwind style.
Actual Behavior
I need to reload the page to see the new style applied to the project.
The text was updated successfully, but these errors were encountered: