tailwind 的 @apply 和 @screen 无法在 sass 中使用，因二者是 postcss 插件指令，sass 编译器早于 postcss 运行，会报错或静默丢弃；唯一可行路径是弃用 sass，改用纯 css + postcss 生态，配合 @tailwindcss/nesting 等插件。
Tailwind 的 @apply 和 @screen 根本不进 Sass 编译流程
Sass 编译器看到 @apply 或 @screen 会直接报错（如 Unknown rule @apply）或静默跳过整条规则，因为它们是 Tailwind 的 PostCSS 插件指令，不是 Sass 语法。Sass 在构建链中早于 PostCSS 运行，根本不会把这类指令传下去。
常见错误写法：
-
.btn { @apply px-4 py-2; }→ Sass 编译失败 -
@screen sm { .hidden-sm { display: none; } }→ Sass 不认识@screen - 试图在 Sass 里调用
theme('colors.primary')→ 报Undefined function theme()
真正能走通的路径只有一条：把样式逻辑交给 PostCSS 处理，Sass 仅作变量辅助。比如用 @tailwindcss/nesting 插件启用原生 CSS 嵌套，它兼容 @apply 和 @screen，且无需 Sass 参与解析。
Sass 嵌套生成的选择器权重失控，反而压不住 Tailwind 工具类
Tailwind 的工具类（如 tw-p-4）是单类选择器，特异性为 10；而 Sass 深层嵌套（如 .card .header .title）编译后特异性达 30，表面看“赢了”，但实际导致两个问题：
- 覆盖不了带
!important的第三方样式（如.el-button.is-disabled） - 浏览器渲染性能下降，尤其在低配设备上反复匹配高权重选择器
更关键的是：你写的 .card { .title { color: red; } } 编译后是 .card .title，完全依赖 DOM 结构层级——一旦 .title 被临时挪到卡片外，样式立刻失效；而 Tailwind 类（如 tw-text-red-500）是原子化的，不依赖结构。
Sass 变量无法穿透到 Tailwind 的 theme() 函数里
theme() 是 Tailwind 在 PostCSS 构建时解析的函数，Sass 编译器既看不到 tailwind.config.js 里的 theme 配置，也无法执行 JS 函数。你在 Sass 文件里写 color: theme('colors.primary')，Dart Sass 根本不知道 theme 是什么。
可行解只有双向同步设计令牌：
- 把颜色、间距等值抽成
_variables.scss，Sass 直接用$primary-color；Tailwind 配置里用require('./_variables.scss').primaryColor（需确保导出正确） - 或统一用 JSON 存储设计系统，双方分别读取（更稳定，无构建耦合）
- 别试图在 Sass 里模拟
theme('spacing.2')—— 手动维护$theme-spacingmap 容易脱节，且不支持点号路径
混用 @import 和 @use 会让变量和 mixin 彻底乱套
旧项目如果还用 @import 引入 Sass 文件，所有变量、mixin 全局污染；而 @use 默认隔离，必须加命名空间访问（如 colors.$primary）。两者混用，Sass 会直接报错，连编译都过不去。
容易被忽略的细节：
-
@use必须出现在文件最顶部，不能放在嵌套块里 - 第三方库（如 Bootstrap）若未发布 module 版本，仍得用
@import，但要单独隔离，避免污染主样式流 - 想让变量“穿过”嵌套生效？别依赖缩进继承 —— Sass 不支持动态作用域，必须显式传参给
@mixin或用命名空间访问
真正落地时，最常卡住的地方不是语法不会写，而是没意识到：Sass 和 Tailwind 属于两条独立构建流水线，强行嵌套只会让双方都丢掉自己的优势。该用 Tailwind 的地方就用原子类，该用 Sass 的地方就用变量和 mixin，中间靠文件级约定（比如共享 JSON）桥接，而不是指望一个指令打通全场。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
