该用@apply时是提取固定utility组合（如btn-primary），不该用时是含hover:/md:/伪元素等变体场景；必须置于@layer中且确保class被content扫描。
什么时候该用 @apply，什么时候不该用
@apply 的核心作用是把一堆 utility class 提取成一个可复用的 class 名，但它不是“写 CSS 的替代方案”。如果你需要 hover、focus、响应式嵌套或伪元素，@apply 会失效或行为异常——它只支持单层、静态的 utility 组合。
常见误用场景：在 @layer components 里对 hover:underline 直接 @apply hover:underline，结果编译后 hover 状态不生效。这是因为 @apply 不解析变体前缀，它只是字符串拼接。
- ✅ 适合：提取固定组合，如
btn-primary=bg-blue-600 text-white font-medium py-2 px-4 rounded - ❌ 不适合：含
hover:、md:、disabled:等变体的规则，或需要&::before这类选择器扩展 - ⚠️ 注意：
@apply不能跨@layer引用未定义的 utility（比如自定义 color 没在theme.extend.colors声明，就无法@apply bg-my-red）
@apply 必须放在 @layer 中才安全
Tailwind 要求所有通过 @apply 定义的 class 必须显式归属到 @layer components 或 @layer utilities，否则可能被 PurgeCSS 误删，或加载顺序错乱导致样式不生效。
错误写法：/* 直接写在 css 文件顶层 */ .card { @apply p-4 bg-white rounded-lg; } —— 极易被剔除或覆盖。
正确结构：
@layer components {
.btn-lg {
@apply py-3 px-6 bg-indigo-600 text-white font-semibold rounded-lg;
}
}
-
@layer components：用于组件级 class（按钮、卡片等），默认优先级低于base但高于utilities -
@layer utilities：用于增强 utility（如.sr-only-focusable），需手动确保不与内置 utility 冲突 - 所有
@layer块必须出现在@tailwind指令之后，且不能嵌套
为什么 @apply 有时不生效？检查这三点
最常卡住的地方不是语法，而是环境配置和上下文限制。
- PostCSS 插件未启用：确认
postcss.config.js包含tailwindcss和autoprefixer，且顺序正确；@apply由tailwindcss插件处理，缺失即报Unknown at rule @apply - CSS 文件没被 Tailwind 扫描：确保该文件路径在
tailwind.config.js的content数组中（例如"./src/**/*.css"），否则@layer块不会参与构建 - 用了不支持的值：如
@apply bg-gradient-to-r from-blue-500 to-purple-600 shadow-lg是 OK 的，但@apply transform rotate-12会失败——因为transform是@layer base中的重置规则，@apply默认不访问它（需手动加@layer base并声明）
替代 @apply 的更可靠方式
当逻辑变复杂、要响应状态或复用度极高时，@apply 就成了技术债源头。直接回到 utility class 组合 + 组件封装，反而更稳。
比如 React 中：
function Button({ variant = "primary", size = "md", children }) {
const base = "font-medium rounded transition-colors";
const variants = {
primary: "bg-blue-600 text-white hover:bg-blue-700",
secondary: "bg-gray-200 text-gray-800 hover:bg-gray-300",
};
const sizes = {
md: "py-2 px-4",
lg: "py-3 px-6",
};
return <button classname="{`${base}">{children}</button>;
}
这种写法规避了 @apply 对变体的支持缺陷，也更容易做主题切换和测试。Tailwind 官方文档其实也倾向“utility-first，仅在真正重复 3 次以上时才抽 @layer”。
真正容易被忽略的是：PurgeCSS 会删除所有未在 content 中显式出现的 class 字符串——所以哪怕你 @apply 写得再完美，如果对应 class 名没在 JSX/HTML 中作为字符串出现过，它照样消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
