Saving a CSS file while running npm run watch triggers multiple “Processing tailwind.css” runs and slows down workflow

[SamuelAshbrook]

I’ve noticed that when running npm run watch, saving any CSS file triggers Tailwind to process tailwind.css multiple times in a row.

Each save results in several repeated terminal messages like:

Waiting for file changes...
Processing tailwind.css...
Processing tailwind.css...
Processing tailwind.css...
Finished tailwind.css in 5.3 s
Waiting for file changes...
Finished tailwind.css in 1.3 s
Waiting for file changes...
Finished tailwind.css in 3.38 s

This makes the watch process noticeably slower after each save.

Is this expected behaviour with the watch process?

[SamuelAshbrook]

I can use npm run watch:tailwind:frontend to process tailwind.css once.

[gregsullivan]

Hi Samuel—Thanks for posting this!

There are multiple output files for _tw, so it's processing the same input file multiple times to create each output file. Your approach will generally work during development, though if you need, e.g., the editor's CSS file rebuilt, it won't have your latest changes.

What version of Tailwind are you using in your theme? Those processing times are pretty long. This is what I see on my side for a typical client theme:

Waiting for file changes...
Processing tailwind.css...
Finished tailwind.css in 53 ms

(The latest version of _tw runs all but one in quiet mode to avoid spamming the terminal.)

Is it possible you're including very large numbers of classes in your CSS files, resulting in longer build times? That could do it as well.