search

withastro / astro

The web framework for content-driven websites. ā­ļø Star to support our work!
https://astro.build
Other
45.91k stars 2.42k forks source link

šŸ› BUG: HMR doesn't work automatically with Tailwind CSS, WindiCSS, UnoCSS #1028

Closed RafidMuhymin closed 2 years ago

RafidMuhymin commented 3 years ago

What package manager are you using?

yarn

What operating system are you using?

Windows

Describe the Bug

If you are using TailwindCSS, HMR doesn't work automatically in the dev environment when you add classes. You'll have to go to the stylesheet where you have included the @tailwind directives and resave that.

Steps to Reproduce

  1. npm init astro -- --template with-tailwindcss
  2. Error! Describe what went wrong (and what was expected instead)... HMR should be triggered just after adding a class or classes without any workaround.

Link to Minimal Reproducible Example (Optional)

https://github.com/snowpackjs/astro/tree/main/examples/with-tailwindcss

aFuzzyBear commented 3 years ago

My resolve to this issue was to restart the VSCode editor once you have tailwinds setup, that way it picks up the file and it should šŸ¤ž work,

RafidMuhymin commented 3 years ago

My resolve to this issue was to restart the VSCode editor once you have tailwinds setup, that way it picks up the file and it should šŸ¤ž work,

Well, I have reloaded and loaded vscode multiple times since I have set up tailwind. But that didn't solve the problem. And how can reloading vscode solve the problem?! Something in snowpack or Astro is maybe misconfigured. How can vscode have a relation to this?

matthewp commented 3 years ago

This will need to be tackled in the new compiler infrastructure since its snowpack related.

RafidMuhymin commented 3 years ago

This bug has been fixed!

brycewray commented 2 years ago

This bug has been fixed!

Apparently unfixed in 0.21 beta released today. (?)

RafidMuhymin commented 2 years ago

This bug has been fixed!

Apparently unfixed in 0.21 beta released today. (?)

How are you importing TailwindCSS? There are still some issues with Cache Invalidation

brycewray commented 2 years ago

This bug has been fixed!

Apparently unfixed in 0.21 beta released today. (?)

How are you importing TailwindCSS? There are still some issues with Cache Invalidation

I know the team is still working on the docs for the beta, but I did it according to the latest example repos, particularly the one that's specifically about using TWCSS, as well as a brief discussion I had in the Astro Discord after the beta was released.

drwpow commented 2 years ago

Yes this is a known bug in 0.21 that we decided to not block the beta release on. Iā€™m working on this now! Along with Windi and UnoCSS and other related libraries.

FredKSchott commented 2 years ago

Thanks for the report! We believe that this has been fixed in astro v0.21, going out today. Let us know if you can still reproduce the issue after updating to v0.21 and we'll be happy to take a look.

Given that this issue touches a lot of different libraries, if you run into an problem on v0.21 please file a new issue with a single reproduction that we can help debug on!

electroheadfx commented 2 years ago

Any news about the HRM update ? I have the same issue with Unocss, the style is updated only on a server restart.

my setup is: "astro": "^0.22.20", "unocss": "^0.24.3"

RafidMuhymin commented 2 years ago

@electroheadfx Check #2410