@apply 是 Tailwind 的 PostCSS 编译特性，非标准 CSS 语法，需经 PostCSS 处理才能生效；未走编译流程、路径未被 content 扫描、作用域隔离未声明 @reference、@layer 使用不当等均会导致报错或失效。
为什么 @apply 在普通 CSS 文件里直接写就报错
因为 @apply 不是标准 CSS 语法，浏览器和原生构建流程根本不认识它。它只是 Tailwind 的 PostCSS 插件在编译阶段做的“文本替换”——把 @apply bg-blue-500 text-white; 展开成实际的声明块。所以：
- 如果文件没走 PostCSS 流程（比如你随便建了个
style.css直接@import进去），@apply就会被当成无效规则忽略，控制台不报错但样式不生效 - 如果构建工具（如 Vite）默认跳过了该文件（例如路径不在
src/下、后缀不是.css或.postcss），PostCSS 插件压根不会碰它 - Vite 3.0+ 默认对
.css启用 PostCSS，但如果你用了css.preprocessor（比如启用了scss），Vite 可能会绕过 Tailwind 插件，导致@apply失效
@apply 报 Cannot apply unknown utility class 怎么查
这个错误说明 PostCSS 虽然运行了，但 Tailwind 没能把类名解析出来。常见原因有：
-
tailwind.config.js里content字段没覆盖到当前文件路径，导致类名未被扫描注册（Tailwind v3.3+ 默认只扫描src/**/*.{html,js,ts,jsx,tsx}） - 你在 SCSS/Sass 文件里写了
@apply，但postcss.config.js没配好链式处理顺序（Sass 编译必须在 PostCSS 之前，否则@apply还没被处理就进 Sass 解析器了） - 用了 CSS Modules 或
<style scoped>，但没加@reference "tailwindcss";声明（v3.3+ 必须显式引入，否则作用域隔离会切断对全局工具类的访问） - 类名拼错或用了未启用的变体，比如
@apply hover:disabled:bg-gray-200;——disabled:默认不启用，需在配置中手动加入variants（v3）或plugins（v4）
Vue / Svelte 单文件组件里 @apply 静默失效的检查点
不是插件没装，而是上下文缺失。重点看三处：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 确保
<style>块顶部第一行写了@reference "tailwindcss";（v3.3+ 强制要求，尤其scoped下） - 确认
postcss.config.js中plugins数组包含require('tailwindcss')，且没被其他插件（如postcss-preset-env）提前终止流程 - Vite 项目要关掉默认的 CSS 验证：
"css.validate": false（写进 VSCodesettings.json），否则编辑器警告会干扰判断——它报的错和构建无关 - 别在
<style lang="scss">里混用@apply和@use，SCSS 的@use会破坏 Tailwind 的类名注入时机
生产环境样式“突然消失”，但开发时正常
这几乎一定是 @layer 使用不当。Tailwind 的构建器会对不同 @layer 的规则做提取和排序，而 @apply 只能在已注册的层里工作：
立即学习“前端免费学习笔记（深入）”；
- 没包裹在
@layer components { }里的@apply规则，在生产模式下可能被 PurgeCSS 误删（因为没被识别为“用到的类”） - 写了
@layer utilities { .my-btn { @apply ... } }是错的——utilities层只接受原子类定义，不能放@apply - 正确做法：自定义组件统一放进
@layer components，并确保该块出现在@tailwind components指令之后（顺序很重要） - 如果用了
dark:等变体，检查tailwind.config.js的darkMode是否设为'class'，且 HTML 根节点确实有class="dark"（否则dark:bg-类不会生成）
@layer 顺序这四层嵌套在一起，改一处可能牵出三处新问题。建议先确认 postcss.config.js 是否生效，再逐层检查上下文声明。 
