Tailwind CSS：设计系统对开发者的限制

Tailwind CSS 为什么限制可扩展设计系统：方法剖析

Tailwind CSS 加速了原型开发，但其“实用优先”的方法在规模化时带来诸多麻烦。在设计系统中，按钮等组件需要各种变体、大小和状态的组合。新添加的变体如 btn-focus 必须与 btn-sm、btn-lg、btn-outline 完美兼容。悬停状态（暗化 15%）或激活状态（亮化 10%）应在所有变体中一致应用。传统框架通过 mixin 处理这些，例如：

.button-variant-other(@color; @background; @border);

Tailwind 缺少内置工具，无法实现这种无缝集成，而不做妥协。

CVA：快速但受限

Shadcn 使用 CVA 处理按钮，变体和大小固定：

variant "default" | "outline" | "ghost" | "destructive" | "secondary" | "link"
size "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg"

优势：

• 无需在文件间跳转，即可快速开发。
• 基本场景下 API 简洁。

长期项目中缺点显现：

• 无法轻松创建 primary outlined small，需 hack。
• 固定组合积累技术债，6 个月后问题凸显。

适合简单应用，但在企业开发中会增加成本。

CSS 变量：灵活解决方案

CSS 变量将状态逻辑与变体分离：

.btn {
  @apply inline-flex items-center justify-center rounded px-4 py-2 font-body;
  background-color: var(--btn-color);
  color: var(--btn-text, white);
}

.btn:hover {
  background-color: color-mix(in srgb, var(--btn-color), black 15%);
}

.btn:active {
  filter: brightness(1.1);
}

.btn-primary {
  --btn-color: theme('colors.blue.600');
}
.btn-whatever {
  --btn-color: …;
}

核心优势：

• 任意颜色自动支持状态变化。
• 通过变量轻松添加变体。
• 兼容任何 UI 库。

对 Tailwind 爱好者的缺点：样式移到单独文件，略微牺牲速度。

@utility 指令：实用类 hack

该指令动态生成类：

@utility btn-* {
  font-size: --value(--text-ui-*, [length]);
  background-color: --value(--color-ui-*, [color]);
  color: --value(--color-ui-*-text, [color]);
}

可与 Tailwind 修饰符结合处理悬停或响应式。但：

• btn-focus 无法扩展到 sm 或 lg——功能类不足以应对。
• 构建 primary small outline 需要脆弱的组件调整。
• 复杂组合时崩溃。

方法对比

| 方法 | 开发速度 | 可扩展性 | 状态集成 | Tailwind 依赖 |

|-------------|----------|----------|----------|---------------|

| CVA | 高 | 低 | 有限 | 完全 |

| CSS 变量 | 中 | 高 | 完整 | 低 |

| @utility | 中 | 中 | 部分 | 高 |

CVA 适合 MVP，CSS 变量适用于生产环境，@utility 是折中方案。

关键要点

• Tailwind 不强加结构：实用优先要求自建系统。
• 组件即类：复杂设计系统被锁定在刚性选项中。
• 技术债预警：早期简单化意味着 6 个月后重构。
• 替代方案更优：CSS 变量提供灵活性，无需放弃 Tailwind。

Tailwind 适合快速启动，但成熟设计系统需要混合方案或放松实用类约束。

— Editorial Team