@apply 是 tailwind 的 postcss 插件功能，非原生 css 语法，需在启用 tailwind 的 postcss 流程的文件（如 src/index.css）中配合 @layer 使用，且仅支持已注册的原子类，不支持响应式前缀、复合伪类、动态值等。
为什么 @apply 在普通 CSS 文件里不生效
因为 @apply 是 Tailwind 的 PostCSS 插件功能，不是原生 CSS 标准语法。直接写在 .css 文件里，浏览器会忽略它，构建工具（如 Vite、Webpack）也不会处理——除非你显式启用了 Tailwind 的 PostCSS 插件，并且该 CSS 文件被 PostCSS 流程接管。
常见错误现象：@apply text-blue-500 font-bold; 写进 style.css 后完全没效果，控制台无报错，样式也不出现。
- 只有被 PostCSS 处理的文件才支持
@apply，通常是.css或.postcss，但需确认构建配置是否将它纳入 pipeline - Vite 默认对
src/style.css运行 PostCSS，但如果你用的是public/下的 CSS，就不会走这一步 - Next.js 的
app/目录下，全局 CSS 必须放在app/globals.css才会被识别为 Tailwind 入口
怎么在 CSS 中安全复用原子类：用 @layer + @apply
正确做法是把自定义样式写在 Tailwind 配置指定的入口 CSS 文件中（如 src/index.css），并包裹在 @layer 块里，确保它们参与 Tailwind 的类生成流程。
使用场景：想封装一个带阴影、圆角、悬停变色的按钮样式，在多个地方复用，又不想在 HTML 里重复写一长串类名。
立即学习“前端免费学习笔记（深入）”；
/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
<p>@layer components {
.btn-primary {
@apply py-2 px-4 rounded-lg bg-blue-600 text-white font-medium hover:bg-blue-700 transition-colors;
}
}-
@layer components告诉 Tailwind：这些规则属于组件层，会和@apply解析后的实用类一起排序、去重 - 不要在
@layer base或@layer utilities里滥用@apply，容易触发循环或覆盖预期行为 - 如果用了
@apply引用尚未生成的自定义类（比如你自己定义的.sr-only），会静默失败
@apply 不支持的语法：哪些不能写
@apply 只能展开 Tailwind 已注册的原子类，不支持任意 CSS 声明、函数调用或媒体查询嵌套。
常见错误现象：写 @apply flex justify-between max-md:hidden; 看似合理，但 max-md:hidden 是响应式变体，@apply 无法解析这种带前缀的复合形式。
- 不支持响应式前缀：
@apply md:text-lg❌，只能写@apply text-lg，然后在外层加@screen md { ... } - 不支持状态伪类组合：
@apply hover:active:bg-red-500❌，最多到单层，如hover:bg-red-500 - 不支持自定义值：
@apply w-[200px]❌，这类 JIT 动态类不会被@apply识别，必须用内联或 JS 控制 - 不支持 CSS 变量计算：
@apply bg-[var(--primary)]❌，@apply不解析方括号内的表达式
替代方案：什么时候该放弃 @apply 改用其他方式
当逻辑开始变复杂、需要条件、变量或运行时控制时，@apply 就不再是最佳选择——它本质是编译期样式拼接，不是运行时抽象。
性能与可维护性影响：过度嵌套 @apply 会让调试困难，DevTools 显示的是展开后的类名，而不是你写的语义名；而且每个 @apply 都会增加构建时的解析开销。
- 需要动态主题切换？用 CSS 自定义属性 +
class切换，别试图@apply出主题类 - 要根据 props 改样式？React/Vue 中直接用
className拼接，比维护一堆@layer更直观 - 团队多人协作且样式逻辑多？考虑用
clsx或twMerge处理条件类，比深陷@apply嵌套更可持续
最常被忽略的一点：很多人以为 @apply 能“减少重复”，但 Tailwind 的设计哲学本就是鼓励在 HTML 中直写原子类。真正该封装的，是那些高频、稳定、跨组件的视觉模式——而不是为了少敲几个字，把所有按钮都塞进 .btn-primary 里，最后发现某个页面需要微调 padding，却得去改全局 CSS。
