Tailwind CSS v3 要求自定义类中使用 @apply 时必须包裹在 @layer components（或 utilities/base）中，否则样式不会被编译生效。本文详解配置要点、正确写法及常见避坑指南。
tailwind css v3 要求自定义类中使用 `@apply` 时必须包裹在 `@layer components`（或 `utilities`/`base`）中，否则样式不会被编译生效。本文详解配置要点、正确写法及常见避坑指南。
在 Tailwind CSS v3 中，@apply 指令不再允许直接在全局 CSS 文件中无上下文地使用——这是与 v2 的关键差异。若你像下面这样直接书写：
.hamburger-line {
@apply w-[30px] h-[2px] my-2 block bg-black;
}即使 Tailwind 已正确安装并配置，该样式也不会被识别和生成，浏览器中完全失效。根本原因在于：Tailwind v3 默认仅对 @layer 声明的区块（如 components、utilities、base）内的 @apply 进行解析和提取；未声明 @layer 的顶层规则会被忽略。
✅ 正确做法是将所有含 @apply 的自定义类显式归入 @layer components（推荐用于组件级样式）或 @layer utilities（适用于可复用工具类）：
@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;
}
}? 提示：
.hamburger-active类需通过 JavaScript 动态添加到父<button></button>元素上（例如点击时切换），才能触发旋转动画效果：立即学习“前端免费学习笔记（深入）”；
document.getElementById('hamburger').addEventListener('click', () => { document.querySelector('.hamburger-line').closest('button').classList.toggle('hamburger-active'); });
⚠️ 注意事项：
- 不要遗漏
@layer components外层包裹，仅靠@tailwind components导入指令不足以启用自定义@apply； -
@apply中使用的工具类（如rotate-45、origin-top-left）必须已在tailwind.config.js的safelist或实际 HTML 中被检测到，否则可能被 PurgeCSS 移除（开发环境建议先关闭purge或启用content扫描）； - 避免在
@layer base中滥用@apply——它专为重置/默认样式设计，不推荐用于组件逻辑； - 若需响应式支持（如
md:rotate-45），@apply同样支持，但须确保对应断点已启用。
总结：Tailwind v3 的 @layer 是 @apply 的“安全区”。养成习惯——凡使用 @apply，必先 @layer components { ... }。这不仅解决功能问题，更符合官方推荐的模块化组织规范，便于团队协作与长期维护。
