Tailwind PostCSS嵌套无法编译SCSS嵌套代码问题求助

问题背景 #

使用SCSS编写样式时，Tailwind编译后保留了嵌套结构，未按预期展开为扁平CSS选择器。

相关配置与代码 #

构建命令

"build:css": "tailwindcss -i ./app/assets/stylesheets/application.scss -o ./app/assets/builds/application.css"

application.scss 内容

@import 'application_dock/colors.scss';
@import 'application_dock/pages/spots.scss';

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

body {
  font-family: 'Noto Sans';
  background-color: var(--bg-color);
}

spots.scss 内容

.spots {
  .spot {
    color: blue;

    .spot-content {
      @apply h-32;
    }
  }
}

postcss.config.js 配置

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

编译结果对比 #

• 实际输出：保留嵌套结构

.spots {
  .spot {
    color: blue;
    .spot-content{
      height: 8rem;
    }
  }
}

• 预期输出：展开为扁平选择器

.spots .spot {
  color: blue;
}
.spots .spot .spot-content {
  height: 8rem;
}

解决方案 #

问题核心是未引入SCSS预处理器处理原生嵌套语法，tailwindcss/nesting仅支持Tailwind特定场景的嵌套，无法解析纯SCSS嵌套。以下两种方案可解决：

方案1：使用sass预处理后再交给Tailwind #

1. 安装依赖：

npm install sass --save-dev

2. 修改构建命令，先通过sass编译SCSS为普通CSS，再用Tailwind处理：

"build:css": "sass ./app/assets/stylesheets/application.scss ./app/assets/stylesheets/application.tmp.css && tailwindcss -i ./app/assets/stylesheets/application.tmp.css -o ./app/assets/builds/application.css && rm ./app/assets/stylesheets/application.tmp.css"

方案2：改用postcss-sass插件（推荐） #

1. 安装依赖：

npm install postcss-sass --save-dev

2. 更新postcss.config.js，让postcss先处理SCSS嵌套：

module.exports = {
  plugins: {
    'postcss-import': {},
    'postcss-sass': {}, // 优先编译SCSS原生嵌套
    'tailwindcss/nesting': {}, // 处理Tailwind嵌套语法
    tailwindcss: {},
    autoprefixer: {}
  },
}

执行构建命令后，SCSS嵌套会被正确展开为预期的扁平CSS结构。

关键说明 #

tailwindcss/nesting仅负责解析Tailwind生态内的嵌套规则（如@layer中的嵌套），不能替代SCSS预处理器处理原生SCSS语法。必须引入SCSS编译工具，才能将嵌套选择器展开为标准CSS格式。

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