@apply 和 @screen 不能在 Sass 文件中直接使用，因其由 Tailwind 的 PostCSS 插件解析，而 Sass 编译器不识别；需改用 postcss-scss 解析器并确保文件后缀为 .scss。
不能在 Sass 文件里直接写 @apply 或 @screen，也不能用 theme() 函数取 Tailwind 配置值——这不是配置没对，是底层机制根本不通。
为什么 @apply 在 .scss 里会报错
Sass 编译器压根不认识 @apply，它不是 CSS 标准语法，而是 Tailwind 的 PostCSS 插件在解析阶段才处理的指令。Sass 把它当未知规则直接丢弃或报 Unknown rule @apply。
- 即使你加了
// sass:ignore注释绕过报错，生成的 CSS 里也只剩空块，@apply彻底消失 -
@apply必须出现在被 PostCSS 直接处理的文件中（如.css或启用postcss-scss解析器后的.scss） - Webpack/Vite 构建链中，Sass 处理早于 PostCSS，指令根本传不到 Tailwind 那一层
如何让 .scss 文件被 Tailwind 正确扫描
关键不是“加插件”，而是换 PostCSS 的解析器——把默认的 CSS 解析器换成支持 SCSS 语法的 postcss-scss。
- 安装：运行
npm install --save-dev postcss-scss@4.0.9（注意版本，PostCSS 8.x 只认这个） - 配置
postcss.config.js，必须写parser: 'postcss-scss'，不是放进plugins里 - 确保所有含 Tailwind 指令的文件后缀是
.scss，.css文件仍走原生解析，混用会出错 - Vite 用户注意：
vite.config.ts中若定义了css.postcss，它会覆盖postcss.config.js，得同步改那里
Sass 和 Tailwind 共享颜色/间距等变量的实操方式
Tailwind 的 theme() 在 Sass 里永远调不了，硬写只会报 Undefined function theme()。唯一靠谱的是把设计令牌抽成独立源，双方分别读取。
立即学习“前端免费学习笔记（深入）”；
- 推荐做法：建一个
src/styles/tokens.json，存{"colors": {"primary": "#3b82f6"}, "spacing": {"2": "0.5rem"}} - Tailwind 配置里用
require('./tokens.json').colors加载；Sass 里用@use 'sass:meta'; @use 'sass:list';+ 自己写 JSON 解析逻辑（不推荐），或更简单——用@import导入一份_tokens.scss，里面只定义变量 - 别用
require('./_tokens.scss')去读 Sass 变量，Node 环境不支持@use语法，会报错 - 深色模式相关值（如
dark:xxx）需手动在两套系统里同步，Tailwind 不会自动映射 Sass 的lighten()结果
真正需要嵌套 + 工具类时，该用什么替代方案
如果业务里真有大量组件级嵌套逻辑又想复用 Tailwind 类名，放弃 Sass 主导，改用 PostCSS 生态更稳。
- 装
@tailwindcss/nesting，它让标准 CSS 支持嵌套语法，且与@apply、@screen完全兼容 - 示例：
.card { @apply p-6 bg-white; &:hover { @apply shadow-lg; } }，这段必须写在.css文件里 - 配合
postcss-import拆分文件，但注意@import必须放在文件顶部，否则被忽略 - 别试图在 Sass 里模拟
theme('spacing.2')——自己维护$theme-spacingmap，每次 Tailwind 升级都得手动对齐，漏一条就样式错位
最常被忽略的点：Tailwind 的 @layer 规则和 Sass 的 @use 虽然能共存，但变量绝不互通。你在 _base.scss 里定义的 $font-size-sm，Tailwind 的 fontSize 配置里看不到它，反之亦然。
