Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Live reload doesn't work with Tailwind #7870

Closed
7 tasks done
ngustavo opened this issue Apr 22, 2022 · 12 comments · Fixed by #7895
Closed
7 tasks done

Live reload doesn't work with Tailwind #7870

ngustavo opened this issue Apr 22, 2022 · 12 comments · Fixed by #7895
Labels
feat: hmr p3-minor-bug An edge case that only affects very specific usage (priority) regression The issue only appears after a new release

Comments

@ngustavo
Copy link

Describe the bug

After installing Tailwind, it stopped live reloading for changes on index.html.
It's weird because it logs this counter below and it does reload for main.js.

[vite]  (x2)

I'm assuming it's still detecting changes but they are not being sent to the client.

Thanks.

Reproduction

https://stackblitz.com/edit/vitejs-vite-bbqmud?file=index.html&terminal=dev

System Info

System:
  OS: Linux 5.10 Ubuntu 20.04.4 LTS (Focal Fossa)
  CPU: (12) x64 AMD Ryzen 5 1600 Six-Core Processor
  Memory: 11.39 GB / 12.44 GB
  Container: Yes
  Shell: 5.0.17 - /bin/bash
Binaries:
  Node: 17.6.0 - ~/.asdf/installs/nodejs/17.6.0/bin/node
  npm: 8.5.1 - ~/.asdf/plugins/nodejs/shims/npm
npmPackages:
  vite: ^2.9.2 => 2.9.5

Used Package Manager

npm

Logs

No response

Validations

@sapphi-red sapphi-red added feat: hmr p3-minor-bug An edge case that only affects very specific usage (priority) and removed pending triage labels Apr 23, 2022
@poyoho
Copy link
Member

poyoho commented Apr 23, 2022

I try to test this in my PR. It can run by expected. Would you had a time to test it again?

@sapphi-red sapphi-red added the regression The issue only appears after a new release label Apr 23, 2022
@sapphi-red
Copy link
Member

It works with 2.9.1 and not with 2.9.2.

@poyoho I tested your PR but it is not working. I changed <h1 class="font-bold text-blue-400">Tailwind!!</h1> to <h1 class="font-bold text-blue-400">Tailwind!!a</h1>. There was no behavior change.

@poyoho
Copy link
Member

poyoho commented Apr 24, 2022

you should add below code in css file instead of html. because css in html don't support need compile css syntax.

@tailwind base;
@tailwind components;
@tailwind utilities;

@sapphi-red
Copy link
Member

sapphi-red commented Apr 24, 2022

I digged down a bit and found #7561 is affecting this.
When I reverted #7561 on the current main branch, it is working well.

@poyoho
Copy link
Member

poyoho commented Apr 25, 2022

I'll remove the fix mark first, then I'll test it, and then provide a test environment in playground. I still think #7869· can fix it 🙈

@sapphi-red
Copy link
Member

The root cause was that index.html has isSelfAccept=undefined now instead of false.
This is beacause index.html never goes through importAnalysis.

@patak-dev
Copy link
Member

Let's check if there is a fix we could apply, if not we should revert #7561 and add it back with more extensive testing in Vite 3. Ping @brillout

@brillout
Copy link
Contributor

Note that reverting #7561 will break vite-plugin-ssr.

I'm having a look at how to solve this.

@brillout
Copy link
Contributor

AFAICT the solution here is to set isSelfAccept=false for index.html since it doesn't go through importAnalysis. But let me double check.

@brillout
Copy link
Contributor

Yep, that fixes it. Let me PR.

@brillout
Copy link
Contributor

Done #7895.

@k1sul1
Copy link

k1sul1 commented May 1, 2022

I was very close to submitting another issue related to #6695, begging for the option to allow disabling forced reloads without disabling HMR altogether, since the Tailwind config was causing those in my "legacy PHP application". The workaround in that thread doesn't work anymore, and the thread where discussion was supposed to continue is dead.

Luckily for me, It doesn't do that anymore after updating to 2.9.6! Was running 2.9.0 previously.

Posting this comment in case anyone else is having the same issue and thinks they need the option, that you maintainers been opposed about adding since it would have a chance of being a footgun. That thread comes up on Google while troubleshooting, so I think it's beneficial that it contains a link to this thread. After all, finding this issue made me realise updating might fix my issue. I probably wouldn't have updated Vite otherwise, due to the traumas Webpack upgrades gave me.

Thanks for the great work!

@github-actions github-actions bot locked and limited conversation to collaborators May 16, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
feat: hmr p3-minor-bug An edge case that only affects very specific usage (priority) regression The issue only appears after a new release
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants