Documentation

Getting Started

Quick Start Get Started Core Concepts

Semantic Tokens Code Tokens

Themes

Custom Themes Scoped Theme Sunrise & Sunset Migration

Default Presets Brand Presets

Runtime

Zero Flash Animation & Transition Advanced Features Custom Scrollbar Theme Inspector Architecture Persistence Multi-Window Sync

Deep Dives

Token Resolution Plugins DOM Adapters Framework-Free Vite Plugin

Adapters

Overview shadcn/ui Bootstrap daisyUI Open Props Material UI Chakra UI Ant Design Mantine UnoCSS

Frameworks

Overview React Next.js Vue 3 Svelte 5 Solid Angular Web Components Tailwind CSS Astro Nuxt Remix

Use Cases

Playground Theme Studio Accessibility Showcase

CLI

Overview Installation Quick Start

Commands

generate validate inspect migrate export

Workflows CI & Automation Reference

Reference

Package Map API Reference DevTools Troubleshooting Known Limitations

Project

Tailwind CSS

@theme-kit/tailwind

Tailwind v4Tokens4 exports

Tailwind CSS v4 mappings from theme tokens to utility variables.

Installation

View on npm ↗Source ↗

Install the integration alongside @theme-kit/core.

bash

pnpm add @theme-kit/tailwind

Quick Start

Complete copy-paste usage for this package.

globals.css

css

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

API Reference

Curated highlights below. The complete generated reference — every signature, parameter and type — is at /api-reference/tailwind.

CSS

Export	Description
`@theme mapping`	Maps tokens to --color-, --radius-, --spacing-, --font-, --shadow-*.
`Dark variant`	@custom-variant dark (&:where(.dark, .dark *)).
`Layers`	theme.css / dark.css / preflight.css.

Helpers

Export	Description
`synchronizeDarkClass(theme)`	Keeps the .dark class in sync.

@theme-kit/tailwind — Theme Kit