不能在 Sass 或 Less 文件中直接使用 @apply 或 @screen，因为它们是 Tailwind 的 PostCSS 层指令，Sass/Less 编译器无法识别，会在早期构建阶段报错或丢弃，导致指令失效。
不能在 Sass 或 Less 文件中直接嵌套 @apply 或 @screen 指令，因为它们不是 Sass/Less 的语法，而是 Tailwind 的 PostCSS 层指令 —— 编译器会在 PostCSS 阶段处理它们，而 Sass/Less 编译器根本无法识别，更不会传递给后续流程。
为什么 @apply 在 Sass/Less 里会报错或静默失效
Sass 和 Less 是独立于 PostCSS 的预处理器，它们在构建链中通常早于 PostCSS 运行。当你写：
.btn {
@apply px-4 py-2 bg-blue-600 hover:bg-blue-700;
}
—— Sass 编译器看到 @apply 会直接报错（如 Unknown rule @apply），或跳过整条声明（取决于配置），根本不会把这段代码留给 Tailwind 处理。
-
@apply必须出现在标准 CSS 文件（如tailwind.css）或被 PostCSS 直接处理的文件中 - Sass/Less 输出的是纯 CSS 字符串，不保留
@apply等非标准规则，Tailwind 无从扫描 - 即使强行用
// sass:ignore注释绕过报错，生成的 CSS 里也只剩空规则或注释，@apply彻底丢失
@screen 不能和 Sass @media 混用
Tailwind 的 @screen 是 PostCSS 插件提供的语法糖，用于映射 theme.screens 中定义的断点，例如：
立即学习“前端免费学习笔记（深入）”；
@screen sm {
.hidden-sm { display: none; }
}
它等价于 @media (min-width: 640px)，但仅在 PostCSS 环境下有效。Sass 的 @media 是运行时解析的嵌套指令，两者互不兼容：
- 在 Sass 文件里写
@screen sm→ Sass 报错：Undefined mixin or directive "@screen" - 在 Sass 里用
@media screen(sm)（试图调用函数）→ Sass 不认识screen()，且 Tailwind 的theme()函数只在 PostCSS 的@layer或@apply中可用 - 若先用 Sass 生成媒体查询，再让 Tailwind 扫描 —— Tailwind 不会识别 Sass 输出的类名，
sm:hidden这类工具类也不会被提取
真正可行的混合方案：PostCSS 优先，Sass/Less 仅作辅助
如果你确实需要嵌套逻辑 + Tailwind 工具类，正确路径是放弃 Sass/Less 主导样式，改用 PostCSS 生态协同：
- 用
@tailwindcss/nesting（官方插件）启用原生 CSS 嵌套，它兼容@apply和@screen，例如：
@layer components {
.card {
@apply p-6 bg-white rounded-xl;
&:hover {
@apply shadow-lg;
}
@screen md {
@apply p-8;
}
}
}
- 把所有含
@apply/@screen的逻辑写在.css文件中，由 PostCSS 统一处理 - Sass/Less 只用于纯变量、函数、mixin 封装（如颜色计算、响应式单位转换），输出结果再被 CSS 文件引用，例如：
@import 'variables';在tailwind.css顶部（需确保 PostCSS 配置支持@import） - 避免在 Sass 中
@import含@apply的文件 —— PostCSS 不会重入处理已编译的 Sass 输出
容易被忽略的关键点
很多人卡在「以为只要文件后缀是 .scss 就能混用」，其实构建链顺序才是关键。Tailwind 要求所有 @apply 类名必须在源码中静态可分析，而 Sass 编译后破坏了这种静态性。哪怕你用 sass --load-path 引入 Tailwind 配置，也无法让 @apply 在 Sass 层生效 —— 它压根不是 Sass 的能力范围。真正要嵌套，就老实用 @tailwindcss/nesting + .css 文件，别硬塞进 Sass。
