# 使用 Tailwind 样式

> 用 Tailwind CSS 定制 React 颜色选择器的样式：给面板的每个部分传入工具类，并调整层叠层的顺序，确保你的工具类优先生效。

Source: https://chroma-panel.jscrate.dev/zh/react/handbook/tailwind
Last updated: 2026-09-21

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

```tsx
<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](https://chroma-panel.jscrate.dev/zh/react/components/chroma-panel) 上的用法完全相同。class 控制不到的值，比如强调色或面板宽度，要通过 CSS 变量设置，详见[主题](https://chroma-panel.jscrate.dev/zh/react/handbook/theming)。

## 层叠层

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

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

```css
@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}`，详见[服务端渲染](https://chroma-panel.jscrate.dev/zh/react/handbook/server-rendering)。如果面板看起来仍然不对，请查看[面板显示不正常时](https://chroma-panel.jscrate.dev/zh/react/handbook/theming#if-the-panel-looks-wrong)。

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