Theming Tailwind v4 + CSS-in-JS

Tailwind v4 + CSS-in-JS

@pretable/ui ships pure CSS, so it works in any styling toolchain.

@pretable/ui ships pure CSS, which means it works in any styling toolchain. Two specific integrations are documented below.

Tailwind v4

@pretable/ui includes an opt-in Tailwind v4 bridge. Importing tailwind.css registers --color-pt-* and --font-pt-* shortcuts in Tailwind's @theme namespace, giving you utility classes that resolve to the active Pretable tokens.

css

@import "tailwindcss";
@import "@pretable/ui/themes/material.css";
@import "@pretable/ui/grid.css";
@import "@pretable/ui/tailwind.css";

Now you can use Pretable's tokens in Tailwind utilities:

tsx

<aside className="bg-pt-bg-toolbar text-pt-text-dim p-4 border-b border-pt-rule">
  <p className="font-pt-mono text-pt-accent">Filter active</p>
</aside>

The pt- prefix avoids collisions with your own design tokens. Available utilities:

bg-pt-{token} — backgrounds (e.g., bg-pt-bg-grid, bg-pt-bg-header, bg-pt-bg-toolbar)
text-pt-{token} — text colors (e.g., text-pt-text-cell, text-pt-accent)
border-pt-{token} — border colors (e.g., border-pt-rule)
font-pt-{token} — font families (e.g., font-pt-mono, font-pt-sans)

Density tokens and --pretable-radius are intentionally NOT exposed as Tailwind utilities — they're consumed by grid.css directly and don't have meaningful per-element utility analogs.

Why the bridge is opt-in

You don't need the bridge to use @pretable/ui with Tailwind. The grid renders correctly with just themes/excel.css + grid.css imported. The bridge is only useful if you want to style your own application's UI using Pretable's token palette — for example, building a sidebar that color-matches the embedded grid.

If you don't want the pt-* utilities, skip the tailwind.css import. The grid still works.

CSS-in-JS

CSS-in-JS libraries (styled-components, emotion, vanilla-extract, stitches, panda) all support runtime CSS custom properties. Reference Pretable's tokens directly via var(--pretable-*):

tsx

import styled from "styled-components";
 
const Toolbar = styled.div`
  background: var(--pretable-bg-toolbar);
  color: var(--pretable-text-dim);
  border-bottom: 1px solid var(--pretable-rule);
  font-family: var(--pretable-font-sans);
  padding: 12px 16px;
`;

Or with emotion's css prop:

tsx

import { css } from "@emotion/react";
 
<div
  css={css`
    background: var(--pretable-bg-grid);
    color: var(--pretable-text-cell);
  `}
/>;

CSS custom properties resolve at runtime, so they reflect whichever theme + density + dark-mode variant is currently active. No build-time wiring needed.

Composition with both

You can use the Tailwind bridge AND CSS-in-JS in the same app — they both resolve to the same --pretable-* source values. The bridge gives you ergonomic utility classes; CSS-in-JS gives you per-component scoped styles. Use whichever fits the surface you're building.

Where to go next

Override tokens — change Pretable's token values; both Tailwind utilities and CSS-in-JS automatically reflect the override.
Token reference — the full list of --pretable-* tokens you can reference in either approach.