Overview
Palette tokens, dark mode, and the grid's styles.
Last updated August 8, 2026
@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#
| Class | Element | Description |
|---|---|---|
.gridkit-data-grid | <table> | The grid itself. Carries borders-horizontal/vertical/all and no-hover-rows/columns/cells state classes. |
.grid-header | <tr> | The header row. |
.header-cell | <th> | A header cell. States: is-resizing, is-dragging, is-drop-before, is-drop-after, is-wrapped. |
.grid-row | <tr> | A body row. |
.grid-cell | <td> | A body cell. States: is-resizing, is-wrapped. |
.header-resize-handle | element | The draggable resize grip on a header cell's trailing edge. |
.selectable-rows / .selectable-columns / .selectable-cells | <table> | Present on the grid while the matching selectable member is enabled — what turns on the pointer cursor and text-selection guard. |
.is-selected | <tr> | <th> | <td> | A selected row, header cell, or cell. A selected cell wins over its row and column. |
Theme tokens#
| Token | Type | Description |
|---|---|---|
--gridkit-surface | color | Header background. |
--gridkit-surface-muted | color | Hover background. |
--gridkit-line | color | Borders. |
--gridkit-hover-line | color | Cell hover outline, resize edge. |
--gridkit-fg | color | Text. |
--gridkit-fg-muted | color | Secondary text, resize grip. |
--gridkit-accent | color | Accent — resize and reorder indicator lines. |
--gridkit-selected | color | A selected row, column, or cell. |
--gridkit-selected-strong | color | A selected row or cell also hovered. |
: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:
.gridkit-light / .gridkit-dark
Live exampleFollows app theme
.gridkit-light
.gridkit-dark
<div className="gridkit-dark">
<DataGridComponent ... />
</div>