shadcn/ui 将 Tailwind 类名直接嵌入组件逻辑，使样式决策权移至 JSX 层，无隐藏样式层；cva 提供可读变体映射，支持类型提示与零残留维护；放弃全局重置与 BEM，依赖 CSS 变量实现主题切换，要求开发者主动管理一致性与变量注入。
shadcn/ui 为什么让 Tailwind 类名直接进组件逻辑
它不是“改了习惯”，而是把样式决策权从 CSS 文件挪到了 JSX 层。传统组件库用 className 做兜底入口，但实际样式藏在内部 CSS 或主题系统里；shadcn/ui 的每个组件（比如 button.tsx）里，className 就是最终样式出口——没有隐藏层，没有抽象层，Tailwind 类名就是实现本身。
这意味着你改按钮悬停色，不是去写 .my-button:hover，而是直接在组件文件里改 hover:bg-blue-600 这一行。样式不再“分离”，而是和结构、状态、交互逻辑一起被阅读、被调试、被 Git 跟踪。
class-variance-authority（cva）让变体逻辑可读且可维护
当你看到 buttonVariants 这个函数，它不是黑盒配置，而是一段明确映射关系的 JS 对象：
const buttonVariants = cva(
"inline-flex items-center justify-center rounded-md text-sm font-medium",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
outline: "border border-input hover:bg-accent hover:text-accent-foreground",
},
size: {
sm: "h-9 px-2.5 text-xs",
lg: "h-11 px-8 text-lg",
}
}
}
)
这种写法带来的实际影响是：
立即学习“前端免费学习笔记（深入）”；
- 变体组合结果可预测——
variant="outline"+size="lg"对应哪套类名，一眼可见 - 新增变体不用动 CSS，只改 JS 对象，不引入新选择器
- 类型提示自动补全
variant和size的合法值，IDE 能校验拼写错误 - 如果某项目要禁用
destructive变体，删掉对应字段即可，无残留 CSS
为什么你不能再依赖全局 CSS 重置或 BEM 命名？
shadcn/ui 组件默认不带任何全局样式重置，也不生成 BEM 类名（如 btn--primary）。它的样式完全靠 Tailwind 的原子类叠加，而这些类名本身不具备语义层级——bg-red-500 就是红色背景，不暗示它是按钮、卡片还是标题。
这迫使你面对一个现实：设计系统的一致性，必须靠约定而非工具强制。例如：
- 你想让所有 primary 按钮用同一组颜色，就得统一
bg-primary的 CSS 变量定义，而不是靠类名继承 - 如果你在多个组件里重复写
text-muted-foreground，说明该颜色应该抽成color-text-muted变量，而不是新建一个 BEM 类 - 没有
.card__header这种结构类，意味着 header 样式必须和 card 组件一起维护，不能跨组件复用
深色模式切换不再靠 class 切换，而是靠 CSS 变量注入
shadcn/ui 默认配合 next-themes 或类似方案，用 :root 和 [data-theme="dark"] 两套 CSS 变量控制主题。组件里写的 bg-background、text-foreground 等类名，背后其实是 var(--background) 和 var(--foreground)。
这个机制改变了你写主题相关 CSS 的方式：
- 你不再需要写
.dark .btn这类嵌套选择器 - 主题变量必须提前定义好，否则
bg-background会 fallback 到浏览器默认色 - 自定义组件若要用相同主题变量，必须确保其父容器也挂载了
data-theme属性，否则变量不可见
真正容易被忽略的是：shadcn/ui 不提供主题开关 UI，也不封装 toggle 逻辑——那部分代码得你来写，而且得和变量注入时机对齐，否则出现闪屏或错位。
