Silence Tailwind JIT Debug Output

I’ve been suffering from excessive output from the Tailwind JIT / PostCSS plugin in Vite projects for the longest time. My Vite HMR logs used to look something like this in most projects:

VITE v4.3.9  ready in 852 ms

  ➜  Local:   http://localhost:3000/
  ➜  Network: http://172.19.0.4:3000/
  ➜  Network: http://172.18.0.4:3000/
  ➜  press h to show help


Source path: /code/front/src/assets/spa.postcss
Setting up new context...
Finding changed files: 43.014ms
Reading changed files: 158.599ms
Sorting candidates: 10.828ms
Generate rules: 177.281ms
Build stylesheet: 4.749ms
Potential classes:  11788
Active contexts:  1
JIT TOTAL: 829.947ms




Source path: /code/front/src/pages/Homepage.vue?vue&type=style&index=0&lang.css
JIT TOTAL: 0.844ms

[.. repeat x times for all source files]

..and each HMR reload triggers a ton of Tailwind cruft in the console which makes reading the more important information pretty hard.

Turns out, this was an undocumented “feature” and kind of a configuration issue. After spending once again more time on this to find a fix, I found the code that actually outputs the JIT data. This data only gets printed If the DEBUG environment variable is truthy. It happens that often my Python projects set this variable and it leaks to the front as well. Duh!

Universal fix is easy: set the DEBUG explicitly with the dev command in package.json;

{
  "scripts": {
    "dev": "DEBUG=0 vite"
  }
}