sass 文件中写 @apply 必报错，因 dart sass 在 postcss 前运行，无法识别 tailwind 的 postcss 插件指令；@screen 同理不被 sass 支持；共存方案是改用 .css 后缀 + postcss-import + @tailwindcss/nesting。
为什么 Sass 文件里写 @apply 一定报错
Sass 编译器（Dart Sass）在 PostCSS 之前运行，而 @apply 是 Tailwind 的 PostCSS 插件才识别的指令。Sass 遇到它，既不会跳过也不会转发，而是直接报 Error: Unknown rule @apply 或静默丢弃整条声明。这不是配置没配好，是构建链路物理上不连通——.scss 文件根本进不到 Tailwind 插件的处理范围。
@screen 和 Sass 的 @media 根本不是一回事
@screen sm { } 是 Tailwind 注册的 PostCSS 自定义规则，只在 PostCSS 解析阶段生效；Sass 的 @media 是预处理器级语法，编译时就展开成静态媒体查询。两者生命周期完全隔离：
- 在
.scss里写@screen sm→ Sass 报Undefined directive "@screen" - 写
@media screen(sm)→ Sass 尝试调用不存在的screen()函数，报Undefined function screen() - 想让 Sass 输出
@media (min-width: 640px)再交给 Tailwind 提取sm？做不到——Tailwind 的@screen不解析已生成的 CSS，只处理源码中的原始指令
真正能共存的路径只有纯 CSS + PostCSS
放弃让 Sass 主导样式逻辑，改用 .css 后缀文件 + postcss-import + @tailwindcss/nesting：
- 所有样式文件用
.css后缀，例如components/button.css -
postcss.config.js中插件顺序必须是：postcss-import→@tailwindcss/nesting→tailwindcss - 嵌套写法照常可用：
.btn { @apply py-2 px-4; &:hover { @apply bg-blue-600; } } -
@import "tailwind.css"必须写在纯 CSS 文件顶部，且该文件必须由 PostCSS 处理
想复用 Sass 变量？别指望 theme()，得自己同步
theme('colors.primary') 是 Tailwind 的 JS 运行时函数，Sass 编译器连函数签名都没有。常见错误是：
- 直接写
color: theme('colors.primary')→ 报Undefined function theme() - 以为
require('./tailwind.config.js')能把 JS 对象喂给 Sass → 不行，Sass 不执行 JS
可行做法：抽一个 _tokens.scss 只放变量，再在 tailwind.config.js 中手动读取（注意导出方式），或更稳妥地用 tokens.json 双边读取。
@tailwindcss/nesting 就能让 Sass 认识 @apply，其实只要文件后缀是 .scss，Sass 编译器就已经把它干掉了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
