用 Tailwind CSS 定制 React 颜色选择器

通过 classNames 传入 Tailwind class，React 颜色选择器的每个部分对应一个键。在层叠顺序中，让包的样式排在 Tailwind 工具类之前，这样你的 class 才会生效。

<ColorInput
  classNames={{
    root: "shadow-2xl ring-1 ring-white/10",
    trigger: "h-8 w-12 rounded-lg",
  }}
/>

可用的键有 root、titlebar、toolbar、tab、panel、footer、swatch、slider、thumb、field、trigger 和 popover。这个 prop 在 ChromaPanel 上的用法完全相同。class 控制不到的值，比如强调色或面板宽度，要通过 CSS 变量设置，详见主题。

层叠层

这个包的样式规则都放在 @layer chroma-panel 中。Tailwind v4 会输出 @layer theme, base, components, utilities，而后声明的层排在后面，所以一个没有事先声明顺序的 chroma-panel 层会压过你的工具类。

显式声明层的顺序，让工具类仍然优先：

@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "chroma-panel/style.css";
@import "tailwindcss/utilities.css" layer(utilities);

这样面板样式排在 preflight 之后，不会被重置样式抹平；又排在工具类之前，所以 classNames 依然可以覆盖它。本站正是这样构建的。既然你已经自己导入了样式表，就可以传入 injectStyles={false}，详见服务端渲染。如果面板看起来仍然不对，请查看面板显示不正常时。

如果在组件中导入

在组件里写 import "chroma-panel/style.css"，打包后它会排在你的工具类之后，正好颠倒了上面的顺序。请在你的样式表中导入它。

使用 Tailwind 样式

层叠层