Overview

@gridkitjs/react renders semantic class names — gridkit-data-grid, header-cell, grid-row — and this stylesheet targets them directly. Nothing needs to scan component source, and every colour is a CSS custom property, so overriding one is plain CSS.

Install#

npm install @gridkitjs/theme-tailwind

@import "tailwindcss";
@import "@gridkitjs/theme-tailwind/styles.css";

Semantic classes#

Theme tokens#

:root {
  --gridkit-accent: oklch(0.6 0.17 145);
  --gridkit-line: oklch(0.9 0.01 145);
}

Dark mode#

GridKit doesn't register its own dark: variant — it follows whatever your app's Tailwind build already resolves dark: to. Out of the box that's the OS preference. For the common class-toggle pattern, declare it yourself, same as any Tailwind v4 app would:

@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));
@import "@gridkitjs/theme-tailwind/styles.css";

document.documentElement.classList.toggle("dark", isDark);

Redefine a token inside @variant dark { } to change its dark value too:

:root {
  --gridkit-accent: oklch(0.6 0.17 145);

  @variant dark {
    --gridkit-accent: oklch(0.7 0.15 145);
  }
}

Forcing a theme on one grid#

.gridkit-light / .gridkit-dark pin a grid to one palette regardless of the ambient dark: state. Put either on any ancestor of the grid, including the grid's own root — toggle the app theme below and only the first grid follows it:

<div className="gridkit-dark">
  <DataGridComponent ... />
</div>