Tailwind CSS 4 与第三方组件

在 Tailwind CSS v4 中，与第三方组件库（如 Vant UI、Element Plus、MUI 等）集成时，在样式穿透和变量复用上存在一定挑战。

以下是几种最佳实践方案，按推荐程度排序：

直接利用 CSS 变量 推荐

Tailwind v4 默认将所有主题颜色、间距等定义为原生的 CSS 变量（例如 --color-blue-500）。我们可以直接将 Tailwind 的 CSS 变量传给组件的 Props。

适用场景：组件提供了 color、size 等专用属性，且支持 CSS 变量语法。

代码示例：

<custom-component color="var(--color-blue-500)" />
<custom-component color="oklch(from var(--color-blue-500) l c h / 0.5)" />
<custom-component size="var(--text-xl)" />

信息

Tailwind CSS 4 不再推荐使用 theme() 函数来获取主题变量。

任意变体 / 子选择器 慎用

如果组件不支持 Props 传入 CSS 变量，且外层 Class 无法继承，你可以使用 Tailwind 的任意变体（Arbitrary Variants）语法 [&_选择器] 来进行样式穿透。

适用场景：需要强制覆盖组件内部特定元素的样式。

原理： [&_i]:CLASS 会编译成 .\[\&_i\]\:CLASS { & i { ... } }，从而选中组件内部的标签。

代码示例：

<van-icon name="chat" class="[&_.van-icon]:text-purple-600" />

优点：极其灵活，不需要写额外的 CSS 文件，保持原子化风格。

缺点：与组件内 DOM 结构耦合，组件升级易崩。