tailwind css 4 尚未发布，当前最新稳定版为 v3.4.10；@apply 在响应式/暗色模式下失效因 jit 引擎无法还原嵌套逻辑，且需位于配置入口路径并经 postcss 处理；@layer components 必须置于 @tailwind base 后、utilities 前，仅支持已注册原子类；动态场景推荐使用 tailwind-variants。
Tailwind CSS 4 尚未发布——目前最新稳定版仍是 v3.4.10（截至 2026 年 8 月），所谓 “v4” 是社区误传或 alpha 阶段的非公开分支。你实际在用的，大概率是 v3.4+，且已支持 :where()、@layer 和 JIT 模式下的完整变体链。复用样式这件事，不靠版本号，靠写法是否匹配引擎行为。
为什么 @apply 在响应式/暗色模式下突然失效
@apply 不是 CSS 原生语法，它依赖 Tailwind 的 PostCSS 插件做静态展开。v3.4 后 JIT 引擎虽更智能，但仍无法还原嵌套逻辑：
- 写
@apply md:p-6 lg:p-8→ 编译后只剩p-6 p-8，md:和lg:被丢弃 - 写
@apply hover:bg-blue-500 dark:hover:bg-blue-900→ 后半段常被忽略，或生成无效规则 - 放在 Vue 的
<style scoped></style>里 → JIT 扫描不到，对应原子类根本不会生成
真正生效的前提：该 CSS 文件必须被 PostCSS + Tailwind 插件处理，且位于配置指定的入口路径（如 src/main.css），不能是随意新建的 .css 文件。
@layer components 必须这样写才起作用
这是官方推荐、工程验证过的唯一轻量级复用路径。但顺序和位置错一点，整个块就失效：
- 必须出现在
@tailwind base之后、@tailwind utilities之前 - 只能用
@apply组合已注册的原子类（比如bg-blue-500），不能写自定义值如background-color: #3b82f6 - 伪类必须显式写出变体前缀：
hover:bg-blue-600，不能写&:hover { @apply bg-blue-600 } - 命名建议加前缀，比如
.form-input而非.input，避免与未来 HTML 原生属性或第三方库冲突
示例正确写法：
@layer components {
.btn-primary {
@apply px-4 py-2 bg-blue-600 text-white rounded font-medium
hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
}
}
动态场景别硬塞 @layer，改用 tailwind-variants
当组件需要根据 size="sm"、variant="outline"、disabled 等 prop 切换样式时，@layer + @apply 会迅速失控：
- 每个组合都要手动定义一个 class，
.btn-sm-outline、.btn-lg-primary-disabled…维护爆炸 - 响应式断点（
md:px-6）和暗色模式（dark:bg-gray-800）无法条件注入 - 类型系统无法推导，TS 类型丢失
直接上 tailwind-variants（v3.4 兼容，npm 安装即可）：
import { tv } from "tailwind-variants";
const button = tv({
base: "inline-flex items-center justify-center rounded font-medium transition-colors",
variants: {
variant: {
solid: "bg-blue-600 text-white hover:bg-blue-700",
outline: "border border-gray-300 text-gray-700 hover:bg-gray-50",
},
size: {
sm: "px-3 py-1 text-sm",
md: "px-4 py-2",
},
},
});
// 使用：button({ variant: "solid", size: "md" }) → 返回完整原子类字符串
最后提醒一句：所谓“复用”，不是把所有 class 合成一个名字塞进 HTML。Tailwind 的原子性价值恰恰在于可拆解——md:p-6 和 p-4 本就该独立存在。强行合并，反而锁死后续覆盖和调试能力。抽象层级要分清：静态结构走 @layer，动态逻辑交给 tv()，其余时候，直接写原子类最快。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
