Tailwind CSS + Charts: A perfect match

Every other charting library has its own theming system. You learn their API, configure their color tokens, fight their specificity, and still end up with charts that don't quite match your app.

Chart.ts takes a different approach: just use Tailwind.

className everywhere

Every chart element exposes a className prop. Lines, bars, axes, labels, tooltips, legends - everything is styleable with the same utilities you already know.

<LineChart
  data={data}
  x="month"
  y="revenue"
  className="h-64"
  lineClassName="stroke-cyan-400 dark:stroke-cyan-300"
  areaClassName="fill-cyan-400/10"
  dotClassName="fill-white dark:fill-zinc-900 stroke-cyan-400"
  axisClassName="text-zinc-500 dark:text-zinc-600"
  tooltipClassName="bg-white dark:bg-zinc-900 shadow-lg rounded-lg"
/>

Dark mode that just works

Because Chart.ts uses Tailwind's dark: variant, dark mode is automatic. If your app supports dark mode, your charts support dark mode. No separate theme config. No runtime switching. Just CSS.

// This chart works in both light and dark mode. No extra code.
<BarChart
  data={data}
  x="category"
  y="value"
  barClassName="fill-indigo-500 dark:fill-indigo-400"
/>

Design tokens

Chart.ts respects your Tailwind theme. Custom colors, custom spacing, custom fonts - they all work because Chart.ts renders real DOM elements styled with real CSS.

/* Your Tailwind config */
@theme {
  --color-brand: #6366f1;
  --color-brand-light: #818cf8;
}

/* Your chart uses your tokens */
<LineChart
  data={data}
  x="date"
  y="value"
  lineClassName="stroke-brand dark:stroke-brand-light"
/>

Why this matters

Charts should be part of your design system, not a foreign element bolted onto it. When charts use the same styling primitives as the rest of your UI, everything stays consistent - across themes, breakpoints, and design iterations.

That's the Chart.ts philosophy: your design tokens, your CSS, your charts.