@apply 和 @screen 只能在 postcss 阶段被 tailwind 插件识别，sass/less 在 postcss 之前编译，因此写在 .scss/.less 中会报错或失效；必须改用纯 css + postcss 生态，配合 postcss-import 和 @tailwindcss/nesting 才能正确支持。
@apply 和 @screen 不能写在 Sass/Less 文件里，无论加不加注释、用不用 @forward 或 @use，都会报错或静默失效。 这不是配置问题，是构建链顺序决定的硬限制：Sass/Less 在 PostCSS 之前运行，而 @apply、@screen 只能在 PostCSS 阶段被 Tailwind 插件识别和处理。
为什么 postcss-import 不能“修复” Sass 中的 @apply
postcss-import 是一个 PostCSS 插件，只处理 @import 语句本身（把多个 CSS 文件拼成一个），它不改变语法解析阶段——也就是说，它根本不会碰 Sass 文件。如果你把 @apply 写在 .scss 里，Sass 编译器早就把它干掉了，postcss-import 根本见不到这行代码。
- Sass 文件必须先被
sass命令或 webpack 的sass-loader编译成纯 CSS，才会进入 PostCSS 流程 -
postcss-import只在 PostCSS 阶段工作，对.scss文件完全无感 - 试图在 Sass 里
@import "tailwind.css"并在里面放@apply？不行——Sass 不认识@apply，会直接报Unknown rule @apply
真正能共存的路径：全 PostCSS + postcss-import
放弃 Sass/Less 主导样式逻辑，改用 PostCSS 生态承接所有功能。这样 @apply、@screen、嵌套、变量都能原生支持，且构建更快。
- 安装
postcss-import：npm install -D postcss-import - 在
postcss.config.js中把它放在第一位：require('postcss-import')必须在tailwindcss之前 - 所有样式文件用
.css后缀，例如base.css、components/button.css - 在主文件中导入：
@import "components/button.css";（注意：必须在文件顶部，且只能是纯 CSS 文件） - 需要嵌套？加
@tailwindcss/nesting插件，它兼容@apply和@screen，写法和 Sass 类似但不依赖 Sass 编译器
@screen 与 Sass @media 混用一定会失败
Tailwind 的 @screen 不是函数也不是 mixin，它是 PostCSS 插件注册的自定义规则，只在 PostCSS 解析时生效。Sass 的 @media 是预处理器级指令，两者生命周期完全隔离。
- 在
.scss里写@screen sm { ... }→ Sass 报错：Undefined directive "@screen" - 写
@media screen(sm) { ... }→ Sass 尝试调用不存在的screen()函数，Tailwind 的theme()也进不了 Sass 环境 - 想让 Sass 输出
@media (min-width: 640px)，再让 Tailwind 提取sm:hidden类？不行——Tailwind 只扫描源码中的工具类，不分析最终生成的媒体查询内容
最常被忽略的一点：你写的每一个 @apply 都依赖 PostCSS 的 AST 解析能力，而 Sass 输出的是字符串，不是 AST。一旦离开 PostCSS 上下文，@apply 就只是个无效关键字——不是配置没开，是它根本没机会被看见。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
