如何配置Tailwind 3+PostCSS+Storybook实现开发模式快速刷新？

问题根因 #

原生postcss-cli的--watch模式默认只会监听你传入的CSS入口文件、以及CSS里显式引入的依赖，根本不会主动识别Tailwind的配置文件，也不会监听Tailwind content字段匹配的业务组件文件。所以改tailwind.config.js、或者改组件里的Tailwind类名时，不会触发CSS重编译，Storybook拿不到最新样式，自然不会自动刷新。

最优解决方案（零额外维护成本） #

直接把CSS构建命令换成Tailwind自带的CLI即可，它天生适配Tailwind的监听逻辑，默认就会监听tailwind.config.js、以及配置中content字段匹配的所有组件文件，只要这些文件有改动立刻触发重编译，完全匹配预期效果。
操作步骤：

• 直接修改package.json里的generate-css脚本，不用再调用postcss-cli，脚本配置参考如下：

{
  "scripts": {
    "dev": "run-p bundle generate-css storybook",
    "bundle": "tsup src/index.ts --format esm,cjs --dts --external react --watch",
    "generate-css": "tailwindcss -i src/styles/tailwind.css -o public/main.css --watch",
    "storybook": "start-storybook -p 6006"
  }
}

• 你原来写的postcss.config.js不用做任何改动，Tailwind CLI会自动读取PostCSS配置，最终构建出来的CSS产物和之前用postcss-cli跑出来的完全一致，不会有样式差异。
• 改完重新执行npm run dev就生效：不管是改React组件里的Tailwind类名，还是改tailwind.config.js里的主题、自定义插件、content匹配规则，都会自动触发CSS重编译，Storybook检测到CSS文件变动就会自动热更新，不用手动刷新页面。

备选方案（保留postcss-cli的写法） #

如果你不想替换CLI，也可以给postcss-cli的--watch参数显式指定要额外监听的文件路径，让它把配置文件和组件文件也纳入监听范围：
把generate-css脚本改成如下写法即可：

"generate-css": "postcss src/styles/tailwind.css -o public/main.css --watch=tailwind.config.js,./src/**/*.{js,jsx,ts,tsx}"

这个写法的效果和方案1一致，缺点是后续如果你改了tailwind.config.js里的content路径，还要同步修改这里脚本里的监听规则，容易漏配，维护成本比方案1高。

兜底兼容配置 #

如果做完上面的调整，偶尔还是出现CSS更新了但Storybook页面没自动刷新的情况，可以在Storybook的preview配置里加上静态资源监听规则，强制它监听public目录下的CSS文件变动：

// .storybook/preview.js
export const parameters = {
  // 保留你原有的其他配置项
  staticDirs: ['../public'],
  watchOptions: {
    ignored: /node_modules/,
  }
}

内容的提问来源于stack exchange，提问作者Naresh