Tailwind CSS v4

@theme-kit/tailwind

CSSDesign tokensv4

Map every semantic token to Tailwind v4 utilities and theme variables.

Installation

Install the package for your framework alongside @theme-kit/core.

bash

pnpm add @theme-kit/tailwind

Quick Start

Start from scratch — install the package, then wrap your app in the provider at the entry point shown below.

globals.css

css

1@import "tailwindcss";
2@import "@theme-kit/tailwind";
3
4body {
5  @apply bg-background text-foreground;
6}

Every integration re-exports the full @theme-kit/core surface, so history, batching, snapshots, packs and lifecycle work the same way across frameworks.

Implementation

Read and update theme state from any component using the framework-native primitives below.

globals.css

css

1@import "tailwindcss";
2@import "@theme-kit/tailwind";
3
4body {
5  @apply bg-background text-foreground;
6}
7
8.card {
9  @apply bg-card text-card-foreground border-border;
10}
11
12.btn-primary {
13  @apply bg-primary text-primary-foreground;
14}

What's Available

@theme-kit/tailwind ships 6 exports in 2 categories. Everything below is also documented in the full API reference. Click any export to reveal what it does and how to use it.

Integration

—

Transition

—

Use Cases

The important features in practice — copy any of these straight into your app.

Map tokens to Tailwind

Import the plugin so theme tokens become Tailwind v4 utilities.

Map tokens to Tailwind

css

@import "tailwindcss";
@import "@theme-kit/tailwind";

Dark variant

The plugin wires the .dark class so dark: works out of the box.

Dark variant

css

1@custom-variant dark (&:where(.dark, .dark *));
2
3/* bg-surface, text-foreground, bg-primary, ring-ring, ... are all tokens */
4.card {
5  @apply bg-card text-foreground border border-border rounded-lg;
6}

Use tokens as utilities

Every semantic token maps to --color-*, --radius-*, --shadow-* and friends.

Use tokens as utilities

tsx

1export function Card() {
2  return (
3    <div className="bg-card text-card-foreground rounded-lg shadow-md border border-border">
4      <button className="bg-primary text-primary-foreground hover:bg-primary/90">
5        Primary action
6      </button>
7    </div>
8  );
9}

Keep the dark class in sync

synchronizeDarkClass bridges a theme-kit runtime with Tailwind's dark variant.

Keep the dark class in sync

import { synchronizeDarkClass } from "@theme-kit/tailwind";
import { getProviderRuntime } from "@theme-kit/web";

const runtime = getProviderRuntime();
synchronizeDarkClass(runtime.store.get());

Smooth theme transitions

Enable CSS transitions on theme changes for a polished user experience.

Smooth theme transitions

css

1@import "tailwindcss";
2@import "@theme-kit/tailwind";
3
4:root {
5  --theme-transition-enabled: true;
6  --theme-transition-duration: 300ms;
7  --theme-transition-easing: ease-in-out;
8}

More Examples

Scoped theming, history controls, and framework-specific patterns.

semantic utilities

html

1<header class="bg-surface text-foreground dark:bg-surface-muted">
2  <button class="bg-primary text-primary-foreground rounded-lg px-4 py-2">
3    Get started
4  </button>
5  <span class="text-muted-foreground">Ready</span>
6</header>

API Reference

Integration

Export	Description
`@import "@theme-kit/tailwind"`	One import maps tokens to `@theme` variables: `--color-`, `--radius-`, `--spacing-`, `--font-`, `--shadow-*`.
`Dark-mode variant`	`@custom-variant dark (&:where(.dark, .dark *))` — scoped to the `.dark` class Theme Kit maintains.
`synchronizeDarkClass(theme)`	Keeps the `.dark` class in sync with the active theme.
`CSS layers`	Ships `theme.css`, `dark.css` and `preflight.css` layers.

Transition

Export	Description
`CSS transition variables`	Theme Kit exposes transition variables for Tailwind-aware styling, while the runtime owns the actual theme-change orchestration; you do not need to hand-author a global transition block just to get smooth theme changes.
`themeCSS`	Tailwind-compatible `@theme` variable block generated from your Theme Kit tokens, imported via the package's CSS entry.