Remix + Tailwind on hmr update and reload the CSS breaks

[Danones]

Describe the bug

When adding/editing a css property with tailwind classes,
OR
When adding, removing or chaning a JSX element,

Vite HMR detects the change , and the page becomes stripped of css. So we basically loose all our styles.

I was having this issue in my companies project, but I could easily reproduce it in a new project.

Reproduction

https://github.com/Danones/remix-vite-tailwind-repro

Steps to reproduce

Open the reproduction project.

Get the project running by using the following command npm run dev;
Get Tailwind running in watch mode: npx tailwindcss -i ./styles.css -o ./src/output.css --watch

Open the Browser on http://localhost:5173/ and make sure all styles are ok.

Check the content of the _index.tsx file. You will notice that there is some JSX commented out in line 41

{/* <p className="text-5xl bg-red-200 font-bold ">Test</p> */}

Uncomment , and save.

If you check the UI, should be now stripped from CSS.

Momentarily I was able to get it working when I initially created the project, but when I restarted the server I could never get it working anymore.

System Info

System:
    OS: macOS 14.1.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 94.33 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
    Yarn: 1.22.21 - /opt/homebrew/bin/yarn
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
  Browsers:
    Chrome: 120.0.6099.199
    Safari: 17.1
  npmPackages:
    vite: ^5.0.0 => 5.0.11

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[KermanX]

I found that when I manually edit the output.css, the page still loses all its styles. So it seems that TailwindCSS is not the one causing the bug.

Something interesting: I run the dev command with DEBUG="vite:hmr" and noticed that when Tailwind compiler changes output.css, Vite doesn't output [file change] src/output.css, but when manually modified output.css, Vite does.

I personally think it is not a Vite bug, because in other projects Vite is OK to update CSS files that are changed. I think it is a Remix plugin bug.

[hi-ogawa]

Your issue could be due to the unintended usage of tailwind on (Remix) Vite.

For some time (since non Vite version), Remix supports tailwind/postcss out-of-the-box, so I don't think you need dedicated taiwlindcss --watch step anymore. Instead of that, you can directly import raw tailwind css file.

I updated your repro to illustrate this. Would this work for you?

https://stackblitz.com/edit/github-4n9xrs?file=app%2Froutes%2F_index.tsx

//// in app/routes/_index.ts
// import "../../src/output.css";
import '../../styles.css';

Here are few references from their documentation:

• https://remix.run/docs/en/main/styling/tailwind#tailwind
• https://remix.run/docs/en/main/future/vite#enable-tailwind-via-postcss

(Btw, Remix Vite is still labelled as "unstable", so it might be better to report the issue there first for visibility of Remix's maintainer. I think it's more likely for people there to help the issue than people here)

[bluwy]

I couldn't reproduce the issue with the repro given. It seems to always update fine for me. If you could slim down the issue to a plain Vite project, we could probably look deeper if it's a Vite issue. Otherwise it might be a Remix issue.

[Danones]

Your issue could be due to the unintended usage of tailwind on (Remix) Vite.

For some time (since non Vite version), Remix supports tailwind/postcss out-of-the-box, so I don't think you need dedicated taiwlindcss --watch step anymore. Instead of that, you can directly import raw tailwind css file.

I updated your repro to illustrate this. Would this work for you?

https://stackblitz.com/edit/github-4n9xrs?file=app%2Froutes%2F_index.tsx

//// in app/routes/_index.ts
// import "../../src/output.css";
import '../../styles.css';

Here are few references from their documentation:

• https://remix.run/docs/en/main/styling/tailwind#tailwind
• https://remix.run/docs/en/main/future/vite#enable-tailwind-via-postcss

(Btw, Remix Vite is still labelled as "unstable", so it might be better to report the issue there first for visibility of Remix's maintainer. I think it's more likely for people there to help the issue than people here)

Your suggestion doesn't work. Please try it locally and you will see what I mean;

Also I was able to find the issue. I have noticed that I get hydration issues both in Firefox and Chrome browsers. And in this two browsers, the issue with the HMR and styles remain.
However , after trying with Safari, everything was fine. ( you can do the test yourself)

I decided to update react and react-dom to "^18.3.0-next-fccf3a9fb-20230213" and this has solved my issue.

However this isn't ideal since I am working on a larger scale project. So it seems like this isn't ready yet.

Also, your reproduction fork isn't something that produces trusty results because the serving and rendering is being done by stackblitz.

[hi-ogawa]

I have noticed that I get hydration issues

Regarding hydration error, there are a few known issues tracked on Remix. Though you might have already discovered about React 18.3, I'll reference this issue and comment by Remix team remix-run/remix#4822 (comment) so that Vite team can also know potentially relevant context.

[Danones]

Yes I am well aware of that by now. I have spent the last couple of hours reading all the issues both in React and Remix communities.

Like I said, the canary version seems to work fine by me.
I am just wondering if the guys at Remix can do something about it 🤔

[hi-ogawa]

I think this is a React / Remix issue (which has been reproduced pre-Vite era of Remix), so let me close this.
I hope Remix can adopt stable React 18.3 soon.