@chartts/tailwind

Tailwind CSS plugin for Chartts. Bridges Tailwind v3 color variables to the CSS custom properties Chartts reads, and adds theme preset utility classes.

Tailwind v4: This plugin is optional. Tailwind v4 exposes --color-* variables natively, which Chartts reads automatically.

Install

npm install @chartts/tailwind

Setup (Tailwind v3)

// tailwind.config.js
import chartts from "@chartts/tailwind"

export default {
  plugins: [chartts()],
}

What it does

1. Color variables — Exposes all Tailwind colors as --color-* CSS custom properties on :root
2. Theme classes — Adds utility classes like .chartts-theme-corporate, .chartts-theme-saas, etc.
3. Dark mode — Adds .dark .chartts overrides and prefers-color-scheme support

Options

chartts({
  colors: true,    // Expose --color-* variables (default: true)
  themes: true,    // Add theme utility classes (default: true)
  darkMode: true,  // Add dark mode overrides (default: true)
  palette: {},     // Custom color palette to expose
})

Part of Chartts

Beautiful charts. Tiny bundle. Every framework.

• Documentation
• GitHub
• All packages

License

MIT