Styling with Tailwind

<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:

@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.