Flicker on updates with Vite

[santicros]

First, thanks a lot for the awesome tailwindcss-jit. It's so awesome to have this incredible speed :)

I've noticed that with Vite when making updates in any file that adds a class that is not cached, it will flicker first without the new class and then will update with the used class.
Is this beacuse Vite is too fast? :D
Could this be resolved with a Vite plugin that adds tailwindcss-jit as part of HMR, so it uses the watch process of Vite and doesn't do the update in two steps maybe?

Thanks!!

[adamwathan]

Can you provide a reproduction I can clone and test out?

[adamwathan]

Here's an example Vite app where I can't seem to reproduce the issue:

https://github.com/adamwathan/tailwind-jit-vite-example

[santicros]

Sure!! It happens quite a lot, with no specific setup, but I've done a new repo to test:

https://github.com/santicros/vite-tailwind-jit

Here's a video of how I'm seeing it:

Grabacion.de.pantalla.2021-03-17.a.las.20.54.48.mov

Thanaks a lot!

[santicros]

It also happens to me on Chrome and Safari, so nothing specific with Firefox!
And if it helps I'm on a MacBook Pro 13 2016, with macOS Catalina.

[santicros]

I'm having flickers with your repro too @adamwathan, not 100% of the time but on big projects can be more noticeable.

Grabacion.de.pantalla.2021-03-17.a.las.21.07.04.mov

[adamwathan]

Gotcha, honestly I have no idea what we could possibly change in Tailwind itself to impact this. Seems like something in Vite, maybe it doesn't batch refreshes or something? I suspect there's some debounce or something happening somewhere where it's trying to hot-refresh the actual template itself, and updating the CSS at the same time, and sometimes there's a race condition where the template is refreshed and rendered before the CSS is rebuilt and reinjected.

Think this is just going to have to be a "gotta live with it" problem on our end at least.

[santicros]

Thanks for your comment @adamwathan !! 👍

I was thinking using the Vite HMR maybe could help because, if you allow me to compare it, I just saw Antfu's repo of Windi compassion https://github.com/antfu/vite-windi-tailwind-jit-compare and with Windi CSS I don't see this problem. Maybe it's because it's doing it with a vite plugin and so could be done with tailwindcss/jit?

That was what made me think that maybe it could be improved on tailwind, which I would love! 💖

demo.mov

If tailwind/jit had an API or CLI I think it could be integrated easily as a Vite plugin.. and/or maybe it's another thing, not sure! :)

[adamwathan]

Yeah I agree it would be good to expose some stuff that could be hooked into from dedicated plugins. To start we are really focused on a universal solution that doesn't require a special adapter for every build tool but not opposed to more specialized stuff if it can really improve the experience.

[santicros]

Great!! Sure, it's been an awesome progress. Will wait for the next steps 👌