@apply不能直接用在HTML中，因为它是Tailwind的PostCSS构建时语法糖，浏览器无法识别，仅在启用Tailwind的源CSS文件（如src/styles.css）中经PostCSS处理后才生效。
为什么 @apply 不能直接用在 HTML 中
@apply 是 Tailwind 的 CSS 预处理器指令，只在 @layer 或 @utilities 等 CSS 文件里生效，HTML 的 <style> 标签或内联 style 属性里写 @apply 完全无效——浏览器根本不认识它，也不会解析。
常见错误现象：
在 HTML 里写 <style> .btn { @apply bg-blue-500 text-white py-2 px-4 rounded; } </style>，结果样式不生效，控制台也无报错，只是默默忽略整条规则。
正确路径只有一条：必须把 @apply 放进你的 Tailwind 源 CSS 文件（比如 src/styles.css），然后通过构建流程（Vite、Webpack、Next.js 等）让 PostCSS 处理它。
如何在 src/styles.css 中安全定义自定义工具类
Tailwind 默认禁用 @apply 在 @layer base 和 @layer components 之外使用。直接写在顶层会报错 @apply is not allowed outside of @layer。
立即学习“前端免费学习笔记（深入）”；
实操建议：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 用
@layer utilities包裹自定义类，这是 Tailwind 推荐且兼容性最稳的位置 - 避免在
@apply中混用响应式前缀（如md:bg-blue-600），它不支持解析媒体查询逻辑；响应式应改用@screen或提取为独立响应式工具类 - 不要
@apply引用尚未生成的自定义类（比如循环依赖），PostCSS 不做依赖分析，会静默失败
示例（合法）：
@layer utilities {
.btn-primary {
@apply bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg transition-colors;
}
}
哪些原子类组合适合抽取，哪些应该避免
适合抽取的：高频复用、语义明确、跨组件一致的视觉模式。比如按钮、表单控件、卡片阴影等。
容易踩坑的：
- 含动态值的类，如
text-[#3b82f6]、max-w-[calc(100vw-2rem)]——@apply无法处理任意值，只接受已注册的原子类 - 过度定制的组合，如
@apply p-4 border border-gray-200 rounded-xl shadow-sm bg-gradient-to-r from-blue-50 to-indigo-50—— 这类更适合用@layer components+ 命名组件，而非工具类 - 与主题（dark mode）强耦合的类，如
dark:bg-gray-800——@apply不展开暗色变体，需显式写出dark:前缀或改用@layer utilities中的条件规则
构建后没生效？检查这三处硬性依赖
@apply 能否成功，不取决于你写了什么，而取决于 Tailwind 是否“见过”那些原子类。以下任一缺失都会导致编译失败或样式丢失：
- Tailwind 配置中未启用对应插件（如
forms插件未安装时，@apply form-input会报错） - 原子类未出现在
content扫描路径的模板文件中（即使你手动写了@apply，Tailwind 也会在 purge 阶段删掉未检测到的类） - CSS 文件未被主入口
@import或import，导致 PostCSS 根本没处理它（常见于 Vite 中漏掉import './styles.css'）
最隐蔽的问题是第三点：很多人把 @layer utilities 写在单独 CSS 文件里，却忘了在 JS 入口主动引入——构建器不会自动发现并处理孤立的 CSS 文件。
