@apply报错主因是PostCSS未处理文件、类名未被content扫描注册或作用域隔离阻断访问；需检查文件路径与后缀、content配置覆盖范围、scoped下是否声明@reference及是否混用Sass指令。
@apply 报错，基本不是你写错了语法，而是它压根没被 Tailwind 的 PostCSS 插件处理——要么文件没进编译流程，要么类名没被扫描到，要么作用域把它隔离死了。
PostCSS 根本没跑这个文件
你在 public/style.css 或 src/assets/button.scss 里写了 @apply，但构建工具直接跳过了它。Vite 默认只对 src/ 下的 .css 文件启用 PostCSS；public/ 路径绕过所有构建流程，.scss 文件则可能被 Sass 编译器提前吃掉，@apply 还没见着 Tailwind 就没了。
- Vite 项目：确保文件在
src/下、后缀是.css（不是.scss或.postcss），且没被css.exclude配置排除 - 用了
css.preprocessor: 'scss'？那就必须配好链式处理：Sass 编译 → PostCSS → Tailwind，否则@apply会被 Sass 直接报错或静默丢弃 - Next.js 的
app/目录下，全局 CSS 必须叫app/globals.css，否则@tailwind指令不触发，整个流水线就断了
报 Cannot apply unknown utility class
PostCSS 跑了，Tailwind 插件也加载了，但它不认识你写的 bg-red-900 或 hover:disabled:bg-gray-200。这不是拼写问题（虽然拼错也会这样），而是类名根本没注册进 JIT 引擎。
-
tailwind.config.cjs的content字段没覆盖当前文件路径，比如你在src/pages/Home.vue里用类，但content只写了./src/**/*.{js,ts}，漏了vue后缀 - Tailwind v3.3+ 默认不扫描
.vue或.svelte，得显式加上：./src/**/*.{html,js,ts,jsx,tsx,vue,svelte} - 用了未启用的变体，比如
disabled:默认关闭，得在配置里加plugins: [require('@tailwindcss/forms')]或手动开启variants - 类名本身拼错：例如
text-gray-80（少了个0）或bg-blue500（缺横线）
@apply 在 <style scoped> 或 CSS Modules 里失效
Vue/Svelte 的 scoped 或 .module.css 会给选择器加哈希属性（如 [data-v-abc123]），而 @apply 展开后生成的是全局规则，两者完全不匹配。更麻烦的是，很多构建工具默认不给 scoped 块走 PostCSS 流程。
立即学习“前端免费学习笔记（深入）”；
- Tailwind v3.3+ 必须在
<style>块第一行写@reference "tailwindcss";，否则插件不把全局工具类注入当前作用域 - 别在
<style lang="scss">里混用@use和@apply：@use是 Sass 模块机制，会提前截断 Tailwind 的类名注入时机 - Vite 项目要关掉编辑器的 CSS 校验：
"css.validate": false（写进 VS Code 的settings.json），否则编辑器警告会干扰判断——它报的错和构建无关 - 真要复用样式，优先用
@layer components封装成类名，而不是硬塞@apply到隔离作用域里
为什么 @apply 不能用在 Sass 文件里
因为 Dart Sass 编译器根本不认识 @apply 或 @screen。它不是配置问题，是编译链路物理隔离：@apply 是 Tailwind 的 PostCSS 插件才识别的指令，而 Sass 在 PostCSS 之前就运行完了。
-
@apply必须出现在纯.css文件中，且该文件必须由 PostCSS 处理 - 不要试图在
.scss里@import "tailwind.css"——Sass 会把它当普通 CSS 导入，此时@apply还没被展开，浏览器直接忽略整条规则 -
theme()函数也不能在 Sass 中调用，它是 Tailwind 的 JS 运行时函数，和 Sass 静态编译环境不兼容
最常被忽略的一点：@apply 不支持响应式前缀（如 md:px-6）和伪类变体（如 hover:bg-blue-700），这些必须留在 HTML 的 class 属性里。它只展开已注册的原子类，不是万能语法糖。
