@gridkitjs/theme-tailwind

Palette tokens, dark mode, and the grid's styles.

@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

PropTypeDefaultDescription
.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-handleelement—

The draggable resize grip on a header cell's trailing edge.

Theme tokens

PropTypeDefaultDescription
--gridkit-surfacecolor—

Header background.

--gridkit-surface-mutedcolor—

Hover background.

--gridkit-linecolor—

Borders.

--gridkit-hover-linecolor—

Cell hover outline, resize edge.

--gridkit-fgcolor—

Text.

--gridkit-fg-mutedcolor—

Secondary text, resize grip.

--gridkit-accentcolor—

Accent — resize and reorder indicator lines.

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

Dark mode

The dark: variant is bound to a .dark class rather than the OS preference, so you drive the theme yourself:

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