在 Tailwind CSS v3 中，直接在全局 CSS 文件中使用 @apply（如 .hamburger-line { @apply ... }）不会生效，必须将其包裹在 @layer components（或 @layer utilities/@layer base）指令内，否则这些类将被 PurgeCSS 移除且无法解析。
在 tailwind css v3 中，直接在全局 css 文件中使用 `@apply`（如 `.hamburger-line { @apply ... }`）不会生效，必须将其包裹在 `@layer components`（或 `@layer utilities`/`@layer base`）指令内，否则这些类将被 purgecss 移除且无法解析。
Tailwind CSS v3 引入了更严格的层（layer）机制，以明确区分基础样式、组件样式和工具类样式，并确保 @apply 定义的类能被正确识别、保留并参与 JIT 编译。若将 @apply 规则写在 @layer 外部（例如直接跟在 @tailwind utilities; 后），Tailwind 会忽略它们——既不生成对应 CSS，也不会在开发时报错，导致样式“静默失效”。
✅ 正确做法：将所有含 @apply 的自定义类声明归入 @layer components（推荐用于可复用 UI 片段，如汉堡菜单线、卡片容器等）：
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.hamburger-line {
@apply w-[30px] h-[2px] my-2 block bg-black;
}
.hamburger-active > span:nth-child(1) {
@apply origin-top-left rotate-45;
}
.hamburger-active > span:nth-child(3) {
@apply origin-bottom-left -rotate-45;
}
}
⚠️ 注意事项：
-
@layer components必须出现在@tailwind components;之后（顺序不可颠倒），否则构建会失败； - 若需在响应式或状态变体中使用（如
hover:、group-hover:），确保目标元素已启用对应变体（检查tailwind.config.js中的variants或plugins配置；v3 默认启用大部分常用变体）； - 自定义类名（如
.hamburger-line）不会自动进入 PurgeCSS 白名单，但因它被@layer显式声明且含@apply，JIT 引擎会主动解析其依赖的工具类（如w-[30px],rotate-45），因此无需额外配置safelist； - 避免在
@layer base中滥用@apply（仅限重置/默认样式），也不建议在@layer utilities中重复定义已有工具类。
? 小技巧：如需为多个相似组件统一管理，可将 @layer components 拆分到独立文件（如 src/css/components/hamburger.css），再通过 @import 引入主 CSS 文件，提升可维护性。
总结：@apply 不是“万能快捷键”，而是 Tailwind 层架构中的显式组件声明语法。遵循 @layer 约定，既是 v3 的强制要求，也是组织可扩展样式系统的最佳实践。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
