Why is tailwindcss --watch so slow?

[bogdan]

I am trying to guess what makes tailwind watch so slow.
My build normally takes >=500ms to update after re-saving a file without changes.
Here is how it normally looks like:

Rebuilding...

Done in 1742ms.

Rebuilding...

Done in 943ms.

Rebuilding...

Done in 740ms.
:
Rebuilding...

Done in 517ms.

I have 117 files matching the config:

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  content: [
    './config/initializers/simple_form.rb',
    './app/assets/stylesheets/choices.css',
    './public/*.html',
    './app/grids/**/*.rb',
    './app/helpers/**/*.rb',
    './app/javascript/**/*.js',
    './app/views/**/*.{erb,haml,html,slim}'
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/container-queries'),
  ]
}

My expectation was that a tiny change (which most changes are) should compile fast due to in-memory cache of unchanged files content.

Am I wrong about it? Should I expect a linear grow of watch performance with the number of files in the project?

[muratgoktas]

Hi,
Add mode:"jit" to module.export file in tailwind.config.js and try again.

[bogdan]

No effect, I am on tailwind v3. I believe it is only for v2, right?

[jaykilleen]

I don't know if this is the solution, but I am going through the v3 to v4 upgrade and I am thinking that './public/*.html', could be the problem. I am using importmaps and all my external javascript libraries are being pinned to public/assets which, if tailwindcss is then watching, it could be adding to the rebuidling time???

I am up to 20+ seconds a rebuild every time a change is made which is killing my dev experience.

I am hoping this problem goes away when I upgrade to v4 and burn my tailwind.config.js file.