Tailwind 项目不推荐直接用 Sass/Less/Stylus，因其非标准语法（如@apply、@tailwind）会被预处理器报错或忽略，且@import位置冲突、变量/嵌套等功能可用PostCSS插件替代。

为什么 Tailwind 项目里不推荐直接用 Sass/Less/Stylus

Tailwind 本身是 PostCSS 插件，@tailwind、@apply、theme() 这些语法不是标准 CSS，Sass 等预处理器在解析时会报错或跳过——比如 @apply flex px-2 在 Sass 中会被当作无效指令忽略，最终生成空规则。更常见的是 @import 位置冲突：postcss-import 要求所有 @import 必须在文件最顶部，而 Sass 允许嵌套 @import，混用极易导致组件样式丢失。

用 postcss-import 替代预处理器的 import 功能

如果你只是想拆分 CSS 文件、组织成 base.css、components/card.css 这类结构，postcss-import 就够了，它比 Sass 的 @import 更轻、更快，且和 Tailwind 天然兼容。

• 安装：npm install postcss-import
• 在 postcss.config.js 中把它放在第一个插件位置：

  module.exports = {
    plugins: [
      require('postcss-import'),
      require('tailwindcss'),
      require('autoprefixer')
    ]
  }

• 入口 CSS（如 src/assets/tailwind.css）必须只写 @import，不能混写普通样式：
  ✅ 正确：

  @import "./base.css";<br>@import "./components/button.css";

  
  ❌ 错误：

  .btn { @apply px-3 py-1; }<br>@import "./components/button.css";

需要变量/嵌套/函数？优先选 PostCSS 插件而非预处理器

像颜色变量、响应式嵌套、数学计算这些需求，PostCSS 生态已有成熟替代方案，避免引入额外编译层：

Miller CSV TSV JSON 数据处理器

Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。

下载

• 变量管理 → postcss-simple-vars 或直接用 theme() 函数（支持嵌套引用，如 theme('colors.primary.500')）
• 嵌套写法 → postcss-nested，语法和 Sass 几乎一致：

  .card {<br>  @apply p-4 rounded-lg;<br>  &__header { @apply font-bold text-lg; }<br>}

• 条件逻辑/循环 → 尽量避免；Tailwind 的设计哲学是“模板中写死类名”，动态类（如 class="text-${size}"）需靠 content 配置显式声明或 safelist 保活

真要集成 Sass，必须绕过它的解析阶段

极少数场景（如遗留 Sass 代码库迁移），只能让 Sass 编译输出纯 CSS，再把结果喂给 PostCSS 流程——这意味着你无法在 Sass 文件里写 @tailwind 或 @apply，它们必须留在 PostCSS 阶段处理。

立即学习“前端免费学习笔记（深入）”；

• 构建链路变成：Sass → .css → postcss-loader → tailwindcss + autoprefixer
• postcss.config.js 里不能再用 postcss-import，否则和 Sass 的 @import 冲突
• 所有 Tailwind 特性（JIT、content 扫描、darkMode: 'class'）仍只作用于最终合并后的 CSS 字符串，无法感知原始 Sass 结构

真正难处理的不是“怎么配”，而是“哪些能力会失效”：一旦引入 Sass，@apply 就不能跨文件复用、theme() 在 Sass 层不可用、content 扫描无法穿透 Sass 变量拼接的类名——这些限制往往在上线前才暴露。