In development, changes to Tailwind config file don't work if using Tailwind 3 in Storybook 10 / Vite 7

[MichaelAllenWarner]

I haven't seen anyone else mention this, so I just wanted to drop this here, in case someone else is encountering the same problem and wondering if they're alone.

When I use Tailwind 3 in Storybook 10 / Vite 7, changes to the Tailwind config file are never incorporated into the updated CSS while the dev-server is running. I have to restart the entire Storybook process for tailwind.config.js changes to take effect. (I'm even using a little watch-script that does this automatically now. Slow, but better than having to do it manually!) This wasn't a problem for me in Storybook 9 / Vite 6.

[manimovassagh]

This is likely caused by how Vite 7 handles dependency optimization and the Tailwind 3 JIT compiler.

Tailwind 3 uses PostCSS with its own file watcher to detect config changes, but Vite 7 changed how it handles CSS processing and HMR. The tailwind.config.js file isn't part of the Vite module graph in the same way that your source files are, so Vite's HMR doesn't pick up changes to it and doesn't trigger a CSS rebuild.

A few things to try:

1. Add the tailwind config to Vite's server watch list:

In your .storybook/main.ts via viteFinal:

async viteFinal(config) {
  return {
    ...config,
    plugins: [
      ...(config.plugins || []),
      {
        name: 'restart-on-tailwind-config',
        configureServer(server) {
          server.watcher.add('./tailwind.config.js');
          server.watcher.on('change', (path) => {
            if (path.includes('tailwind.config')) {
              server.restart();
            }
          });
        },
      },
    ],
  };
}

2. Consider migrating to Tailwind v4 which uses a Vite plugin (@tailwindcss/vite) instead of PostCSS, and integrates properly with Vite's module graph and HMR. This would solve the problem entirely.

3. As a pragmatic workaround, your watch-script approach is honestly fine — Tailwind config changes are infrequent enough that a full restart is acceptable.

This wasn't a problem in Storybook 9 / Vite 6 because Vite 6 had different CSS pipeline behavior that happened to trigger PostCSS re-runs on config file changes.