TailwindCSS嵌套未覆盖媒体查询、伪类等规则的问题求助

你遇到的问题是因为Tailwind生成的媒体查询、伪类规则默认是顶级声明，tailwindcss/nesting无法将这些规则正确嵌套到.webapp选择器内部。可以通过postcss-wrap插件解决，它能把所有CSS规则（包括媒体查询内的）统一包裹到指定选择器下，无需修改HTML类名。

步骤1：安装postcss-wrap #

执行命令安装插件：

npm install postcss-wrap --save-dev

步骤2：修改PostCSS配置 #

更新postcss.config.js，添加postcss-wrap插件并配置目标选择器：

module.exports = {
  plugins: {
    'postcss-import': {},
    tailwindcss: {},
    autoprefixer: {},
    'postcss-wrap': {
      selector: '.webapp'
    }
  }
}

注意：移除tailwindcss/nesting插件，因为我们不再依赖它做嵌套处理。

步骤3：调整main.css内容 #

把原来嵌套在.webapp里的Tailwind指令移出来，直接写在根级别：

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

步骤4：重新编译 #

保持原来的编译命令不变：

tailwindcss --postcss -i ./main.scss -o ./output.css --watch

生成的output.css里，所有规则（包括响应式媒体查询、hover/focus伪类）都会被正确嵌套在.webapp选择器下，示例效果：

.webapp .text-center { text-align: center; }
@media (min-width: 640px) {
  .webapp .sm:text-left { text-align: left; }
}
.webapp .hover\:bg-blue-500:hover { background-color: #3b82f6; }

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