DevTools very slow when importing @tailwindcss/ui

Describe the bug

Tailwind UI is a CSS framework which during dev phase bundles a LOT of CSS to the webpage, around 4 MB. It seems that this, combined with how Vite inserts its CSS (using a script tag for HMR purposes) makes it very slow to parse by the browser, to the point of being almost unusable. Here’s a video of how Chrome on a recent Macbook Pro handles a simple Vite + Tailwind starter project: https://drive.google.com/file/d/1rTiJ13VHgtvF4QtxS-Os9bbduyggsaQE/view?usp=sharing

Reproduction

Here’s a sample project that can be used to reproduce the issue, note that you also have to add @tailwindcss/ui as described in the readme (the issue shows itself without it, but it’s even more pronounced with it): https://github.com/posva/vite-tailwind-starter

System Info

• vite version: 1.0.0-rc.4
• vue version: 3.0.0-0
• Operating System: macOS 10.15.4 Catalina
• Node version: v12.16.3

Possible solution

Maybe it would be better if Vite supported adding certain CSS files that are not meant to be changed statically, using <link> tags instead?

Edit: Just checked and indeed, when the whole 4.6 MB CSS file generated by Tailwind gets imported in index.html using plain <link> tag from the public/ directory the problem disappears, plus the site loads faster (previously it hangs for a few seconds on first load, as can be seen on the video above). However it’s impractical to do this by hand because on every tailwindcss update one would need to manually regenerate the CSS file and replace it in the public directory, hence the need for Vite to handle that automatically if possible.

[underfin]

This is already fixed. You can use Canary for now and wait chrome next release published.

[maciej-trebacz]

These are always mac problems. There is nothing wrong with vite nor tailwind. Update catalina and node to latest lts. Try with incognito and or disabling unused extensions. Try Firefox, vivaldi etc and see if the problem persists.

This is not a Mac problem. I’ve tried different things, I’m on latest versions of software, I’ve also tried Firefox devtools and the problem exists there as well (although it’s not as bad as on Chrome). Finally I’ve checked Chrome on Windows and the issue is also present there.

My theory is that browsers don’t optimize for constructed CSS very well and until they do it would be nice to have some kind of fallback, otherwise Vite and Tailwind (or any other more sophisticated CSS framework) are now pretty much unusable together 😦.