Skip to content

HMR is really slow when there are a lot of Vue components with <style> #7480

@hivokas

Description

@hivokas

What version of Tailwind CSS are you using?

3.0.22

What build tool (or framework if it abstracts the build tool) are you using?

vite 2.8.2

What version of Node.js are you using?

16.13.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

With <style> tags (slow): https://github.com/hivokas/laravel-vue-vite-tailwind-slow/tree/with-style-tags
With <style> tags, without Tailwind (fast): https://github.com/hivokas/laravel-vue-vite-tailwind-slow/tree/without-tailwind
Without <style> tags, with Tailwind (fast): https://github.com/hivokas/laravel-vue-vite-tailwind-slow/tree/without-style-tags

How to run the reproduction:

  1. Clone the repo
  2. Run npm install
  3. Run composer install
  4. Open laravel-vue-vite-tailwind-slow.test if you're using Valet
  5. Run npm run dev to start the Vite dev server
  6. Switch between with-style-tags, without-tailwind and without-style-tags to see the difference

Describe your issue

HMR works really slow when there are a lot of Vue components with <style>.

Here is the detailed demo:

TailwindIssue.mp4

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions