Nuxt应用集成Tailwind使用BEM嵌套类时出现声明错误如何解决？

问题根因 #

• 配置重复启用了tailwindcss/nesting和postcss-nested两个嵌套处理插件，二者功能重叠冲突，导致嵌套选择器解析异常，Tailwind处理@apply规则时无法找到嵌套类的父级选择器，触发报错。
• postcss插件执行顺序不符合要求，嵌套处理插件需要放在TailwindCSS插件之前执行，才能保证嵌套选择器先被展开，再交给Tailwind处理@apply规则。
• 额外安装了未使用的postcss-nesting依赖，存在版本兼容风险。

修复步骤 #

步骤1：修正nuxt.config.js配置 #

调整postcss插件配置，删除重复的嵌套插件，调整执行顺序：

// nuxt.config.js 中build字段修改为以下内容
build: {
  postcss: {
    preset: {
      stage: 1
    },
    plugins: {
      'postcss-import': {},
      // 保留postcss-nested即可，删除tailwindcss/nesting配置
      'postcss-nested': {},
      tailwindcss: path.resolve(__dirname, './tailwind.config.js'),
      autoprefixer: {}
    }
  }
}

步骤2：清理冗余依赖 #

卸载不需要的postcss-nesting依赖：

npm uninstall postcss-nesting
# 用yarn的话执行 yarn remove postcss-nesting

步骤3：调整样式文件结构（可选，推荐） #

为了避免自定义样式和Tailwind内置层级冲突，建议将自定义BEM样式单独抽离，放在Tailwind的components层和utilities层之间加载：

1. 在assets/css/目录下新建custom-components.scss，把你写的.class1到.class4的所有样式代码移入该文件
2. 修改tailwind.scss内容为：

@import "tailwindcss/base";
@import "tailwindcss/components";
// 引入自定义BEM组件样式
@import "./custom-components.scss";
@import "tailwindcss/utilities";

步骤4：重启服务 #

修改完成后重启Nuxt开发服务，报错即可解决，嵌套的BEM类可以正常编译生效。

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