如何构建集成postcss-nested的自定义TailwindCSS独立可执行文件？

核心问题排查 #

嵌套CSS插件不生效，大概率是插件执行顺序错误或者依赖未被正确打包进二进制导致的，结合你的场景，按以下步骤排查修复：

1. 修正PostCSS插件执行顺序 #

PostCSS插件按数组顺序依次执行，必须保证嵌套插件在Tailwind之前运行，这样Tailwind才能正确解析处理后的嵌套规则。修改你fork的Tailwind项目中的默认postcss.config.js stub，调整顺序：

// 正确的插件顺序：先处理导入，再处理嵌套，最后执行Tailwind
module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss/nesting'), // 或替换为 require('postcss-nested')
    require('tailwindcss'),
    // 若需自动添加前缀，将autoprefixer放在最后
    require('autoprefixer'),
  ],
}

注意：使用tailwindcss/nesting时，需确保其版本与Tailwind主版本兼容，它是PostCSS Nesting的官方封装。

2. 确保依赖被纳入打包流程 #

Tailwind单文件二进制通过pkg工具打包，需确认嵌套插件被正确包含：

• 检查项目根目录package.json，确保tailwindcss/nesting（无需额外安装，属于Tailwind子包）或postcss-nested已在dependencies中（pkg会忽略devDependencies，若用postcss-nested需执行npm install postcss-nested --save）。

3. 重新生成二进制文件 #

修改配置和依赖后，重新触发Github「Prepare release」工作流：

• 确认工作流执行无报错，重点检查依赖安装、打包阶段
• 下载新二进制后测试效果：输入嵌套CSS规则，验证输出是否已转换为原生选择器，比如：
  输入：

  .card {
    padding: 1rem;
    .title {
      font-size: 1.5rem;
      font-weight: bold;
    }
  }
  

  预期输出：

  .card {
    padding: 1rem;
  }
  .card .title {
    font-size: 1.5rem;
    font-weight: bold;
  }
  

4. 备选方案：硬编码插件到CLI逻辑 #

若上述步骤无效，可直接修改Tailwind CLI的PostCSS处理代码，强制注入插件：
找到packages/tailwindcss/src/cli/build.js（或对应PostCSS处理文件），在创建PostCSS实例时手动添加插件：

const postcssImport = require('postcss-import');
const postcssNested = require('postcss-nested');

// 创建PostCSS处理器时指定插件顺序
const processor = postcss([
  postcssImport(),
  postcssNested(),
  tailwindcss(config),
  autoprefixer(),
]);

这种方式绕开stub配置，直接确保嵌套插件优先执行。

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