升级TailwindCSS V1到V3后CSS嵌套配置错误排查

你的问题核心是插件配置位置错误，正确的配置逻辑是把嵌套相关插件放在postcss.config.js中，而非tailwind.config.js的插件数组里，具体修正步骤如下：

1. 修正postcss.config.js #

将@tailwindcss/nesting和autoprefixer添加到PostCSS插件列表，注意顺序：@tailwindcss/nesting必须放在tailwindcss之前，确保嵌套语法先被解析再传给Tailwind处理。

module.exports = {
  plugins: {
    '@tailwindcss/nesting': 'postcss-nesting',
    tailwindcss: {
      config: './tailwind.config.js'
    },
    autoprefixer: {}
  }
};

2. 清理tailwind.config.js #

移除其中不属于Tailwind专属插件的内容，只保留Tailwind相关插件：

module.exports = {
  // 保留你的content、theme等其他配置项
  plugins: [
    require('tailwindcss-rtl')
    // 移除autoprefixer和@tailwindcss/nesting
  ]
};

额外检查项 #

• 确保已安装所有必要依赖，未安装的话执行：

  npm install @tailwindcss/nesting postcss-nesting autoprefixer --save-dev
  

• 若Vue项目未自动识别PostCSS配置，可在vue.config.js中手动指定路径：

  module.exports = {
    css: {
      loaderOptions: {
        postcss: {
          config: {
            path: './postcss.config.js'
          }
        }
      }
    }
  };
  

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