如何在 Tailwind CSS 3 中正确使用 @apply 指令-html教程-PHP中文网

如何在 Tailwind CSS 3 中正确使用 @apply 指令

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 动态添加到父元素上（例如点击时切换），才能触发旋转动画效果：

CSS
CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载
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 同样支持，但须确保对应断点已启用。