Vue3项目中Tailwind CSS嵌套样式不生效及PostCSS配置疑问

一、嵌套样式不生效的修复方案 #

1. 修正CSS语法错误 #

你的CSS代码里!important的写法完全错误，正确格式是!important（感叹号在前），不是important!或important：

原错误代码：

.welcome {
  .leon {
    color: blue important!;
  }
  em {
    color: red important;
  }
}

修正后：

.welcome {
  .leon {
    color: blue !important;
  }
  em {
    color: red !important;
  }
}

2. 让Tailwind CLI加载PostCSS配置 #

你当前使用的tailwindcss CLI命令默认不会自动读取postcss.config.js，导致postcss-nesting插件没有被执行，嵌套语法无法被编译。解决方法有两种：

方法1：使用Tailwind CLI的--postcss参数（推荐，Tailwind v3.2+支持）

修改package.json中的脚本：

"tailwind": "npx tailwindcss -i ./src/assets/input.css -o ./public/moonstyles.css --watch --postcss",

添加--postcss后，Tailwind CLI会自动读取项目根目录的PostCSS配置文件，执行其中的插件逻辑。

方法2：改用PostCSS CLI运行

1. 安装postcss-cli（如果未安装）：

npm install postcss-cli --save-dev

2. 修改脚本为：

"tailwind": "postcss ./src/assets/input.css -o ./public/moonstyles.css --watch",

PostCSS CLI会自动读取postcss.config.js，并按配置顺序执行所有插件，包括Tailwind和嵌套插件。

3. 优化PostCSS配置（可选） #

tailwindcss/nesting不需要手动指定依赖插件，它会自动调用已安装的postcss-nesting，可以简化配置：

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

二、Tailwind CLI如何识别PostCSS配置？ #

• 默认情况下，tailwindcss CLI仅处理自身的核心语法（如@tailwind、@apply等），不会加载任何PostCSS配置文件。
• 当添加--postcss参数时，Tailwind CLI会按照PostCSS的默认规则查找配置文件（优先postcss.config.js，其次是postcss.config.mjs/.cjs等），读取并执行其中的插件列表。
• 如果你使用PostCSS CLI代替Tailwind CLI运行，PostCSS会自动加载配置文件，Tailwind作为PostCSS插件被调用，自然会遵循PostCSS的配置逻辑。

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