如何使用 TailwindCSS 将动态颜色用于 ShadcnUI 复选框？

使用 Tailwind CSS 和模板文字动态设置复选框的背景颜色时遇到的问题源于 Tailwind 编译器的运行方式。Tailwind CSS 旨在提高效率，作为其构建过程的一部分，它会从最终的 CSS 包中删除所有未使用的类。此修剪过程要求在代码中显式提及完整的类名。由于模板文字会动态生成类名，因此 Tailwind 的编译器无法在构建时预测这些类名，因此无法将它们包含在最终的 CSS 中。

在您的例子中，当您尝试使用模板文字将十六进制颜色代码注入类名（例如，）时，Tailwind 的编译器在构建过程中无法识别此动态类名。因此，该类在最终的 CSS 中不存在，因此不会应用所需的样式。data-[state=checked]:bg-[${data.colorHexCode}]

但是，有一个简洁的解决方案，涉及使用 CSS 变量来动态设置背景颜色。此方法利用 CSS 变量以内联方式定义，然后在 Tailwind CSS 类中引用的功能。以下是将其应用于 Checkbox 组件的方法：

<Checkbox
  className="w-4 h-4 data-[state=checked]:bg-[var(--primary)]"
  style={{ "--primary": data.colorHexCode }}
/>

在此示例中，我们在 style 属性中内联定义了一个 CSS 变量。的值设置为数据中所需的颜色十六进制代码。然后，在 className 中，我们使用 Tailwind 的任意值语法 （） 在选中复选框时将变量应用为背景色（用 表示）。--primary--primarybg-[var(--primary)]--primarydata-[state=checked]

这种方法将 Tailwind CSS 的实用性与 CSS 变量的灵活性相结合，允许您根据组件的状态或属性动态更改样式。