@apply在独立CSS文件中不生效，因其依赖Tailwind构建流程，仅在主入口CSS（如src/index.css）中、配合@layer components/uitilities且置于@tailwind指令后才有效。
为什么@apply在独立 CSS 文件里不生效
因为@apply不是原生 CSS 语法，而是 Tailwind 的 PostCSS 插件在构建时处理的指令，它只在被 Tailwind 构建流程接管的主 CSS 入口文件中起作用。比如你把@apply写进src/components/Button.css或Button.module.css，PostCSS 根本不会运行 Tailwind 插件，这条规则会被忽略或报错。
常见错误现象：.btn { @apply px-4 py-2; }写在非入口文件里，开发时看着有样式，打包后按钮完全没 padding——PurgeCSS 扫不到，JIT 编译器也压根没处理它。
- 必须放在项目主 CSS 入口（通常是
src/index.css或src/styles.css） - 该文件顶部必须有且仅有三行：
@tailwind base;、@tailwind components;、@tailwind utilities;，顺序不能错，前面不能有空行或注释 - 所有含
@apply的规则，都得包在@layer components { }或@layer utilities { }里，不能裸写
@apply必须配合@layer components使用
直接写.btn { @apply px-4 py-2; }会失败，除非它被明确归入某个层。Tailwind 要求自定义类必须声明归属，否则 JIT 编译器无法判断优先级，生产构建时可能被 PurgeCSS 清掉。
正确写法是：
立即学习“前端免费学习笔记（深入）”；
@layer components {
.btn {
@apply inline-flex items-center justify-center px-4 py-2 font-medium rounded-lg;
}
.btn-primary {
@apply btn bg-blue-600 text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
}
}
-
@layer components确保这些类注入到 components 层，优先级高于 utilities，避免被后续工具类意外覆盖 - 每个
@apply只能引用 Tailwind 原生工具类（如px-4、hover:bg-blue-700），不能引用其他自定义类（@apply btn-primary会报错） - 不要在
@layer components里混用!important，层机制已保障顺序，加了反而破坏可维护性
哪些情况不能用@apply
@apply对响应式、伪类、变体的支持是“字面量展开”，不是智能解析。一旦类名带前缀或修饰符，就容易失效或报错。
-
@apply md:px-6 hover:bg-gray-100 dark:bg-gray-800：这些前缀不会自动包裹进媒体查询或:hover块，编译后只是普通声明，断点和暗色模式都无效 -
@apply group-hover:scale-105：会静默忽略，因为group-hover:不是 JIT 预生成的工具类变体 - 跨行写
@apply p-4\nrounded-lg：PostCSS 只读第一行，第二行被丢弃，无报错但样式缺失 - 把
@apply塞进 Vue 的<style scoped>或 React 的 CSS Module：构建流程不兼容，直接当无效 CSS 处理
@apply的安全使用边界
它不是“让 class 看起来短一点”的快捷键，而是为高频、稳定、静态的视觉原子层服务的。越出这个范围，调试成本就指数上升。
- ✅ 安全：同一组工具类已在至少 3 个地方硬编码出现，且内容完全一致（比如
flex items-center gap-2） - ✅ 安全：不包含任何前缀（
md:）、状态（hover:、focus:）、主题（dark:）或动态值（bg-[#xxx]） - ✅ 安全：这个组合代表一个无歧义 UI 单元（如
form-label），且短期内不会重构 - ❌ 危险：抽的是临时拼凑的类（
mt-6 pl-4 flex-wrap），或想靠它解决多状态逻辑（按钮禁用+加载+成功态）
真正难的不是写@apply，是判断“这里该不该抽”。多数时候，保留工具类组合 + 用clsx或组件 props 控制 class 列表，比强行封装更可控。
