React+Storybook项目如何将Tailwind CSS平滑升级至v3版本

你之前装的@tailwindcss/postcss7-compat是v2时代适配旧构建链的兼容包，升级v3按下面步骤走就行，不会影响现有功能：

• 卸载旧依赖
  先把旧的兼容包删掉，避免版本冲突：
  npm uninstall @tailwindcss/postcss7-compat tailwindcss
• 安装新版依赖
  Tailwind v3要求PostCSS 8+环境，6.3及以上版本的Storybook已经原生支持PostCSS 8，直接装最新版的三个核心包就行：
  npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
  要是你当前用的Storybook版本低于6.3，先把Storybook升到6.3以上再继续，不然会报PostCSS版本不兼容的错。
• 校验PostCSS配置
  你现在写的postcss.config.js配置在v3下完全能用，不用改，保持下面的结构就可以：

  module.exports = {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  };
  

• 更新Tailwind配置
  打开根目录的tailwind.config.js，改两个地方：
  1. 把原来的purge字段换成content，把所有需要扫描Tailwind类名的路径都列全，必须覆盖你的TSX组件、.storybook目录下的配置文件、所有stories文件，参考配置：

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    content: [
      "./src/**/*.{js,jsx,ts,tsx}",
      "./.storybook/**/*.{js,jsx,ts,tsx}",
      "./stories/**/*.{js,jsx,ts,tsx}"
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  }
  

  2. 删掉配置里的mode: 'jit'，v3默认就是JIT模式，不用手动开；整个variants配置块也可以删掉，v3默认全量开启所有变体（hover、focus、响应式断点、暗色模式等），不需要挨个声明。
• 检查全局样式入口
  找到你项目里引入Tailwind的全局CSS文件，确保三个核心指令存在：

  @tailwind base;
  @tailwind components;
  @tailwind utilities;
  

  要是之前加过@tailwind screens;直接删掉，这个指令在v3里已经废弃了。
• 适配少量破坏性变更
  90%以上的现有代码不用改，只需要注意两个高频变动：
  • v2里的lightBlue色板在v3里改名叫sky，用到的话批量替换下类名就行
  • v3微调了默认的边框、表单元素、行高重置规则，如果发现局部样式有偏移，针对性补类名调整即可
• 验证功能
  先跑npm run storybook起本地服务，挨个检查组件的静态样式、hover/focus这类交互、响应式断点是否正常；再跑npm run build-storybook验证生产构建，确认没有样式丢失、构建无报错就算升级完成。

踩坑提示：如果升级后启动报PostCSS相关错误，直接删掉node_modules和对应的依赖锁文件（package-lock.json/yarn.lock/pnpm-lock.yaml），重新装一遍依赖就好，不用改Storybook的webpack配置，新版Storybook会自动识别根目录的PostCSS配置。

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