# Styling with Tailwind


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

## Cascade layers

The package ships its rules inside `@layer chroma-panel`. Tailwind v4 emits
`@layer theme, base, components, utilities`, and a layer declared later sorts
after — so an undeclared `chroma-panel` layer would beat your utility classes.

Declare the order explicitly so utilities still win:

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

That puts the panel after preflight, so it is not flattened by the reset, and
before utilities, so `classNames` still overrides it. This site is built exactly
this way.

<Callout variant="note" title="Importing from a component instead">
  `import "chroma-panel/style.css"` inside a component lands after your
  utilities in the bundle, which inverts the order above. Import it from your
  stylesheet.
</Callout>