tailwind

kitr add tailwind sets up Tailwind CSS v4 and connects it to your theme. bg-background, text-primary and rounded-md use the same colours and radii as the rest of the app, and dark mode follows the theme toggle.

Install

kitr add tailwind

This installs @kitr/tailwind, tailwindcss, @tailwindcss/vite and tailwind-merge. It writes config/tailwind.ts and this stylesheet:

/* app/styles/app.css */
@import 'tailwindcss';
@import 'kitr/tailwind/preset.css';
@import 'kitr/theme/styles.css';

@source '../';

The kitr() Vite plugin adds Tailwind for you when the package is installed. There is no tailwind.config.js: Tailwind v4 is configured in CSS.

Theme classes

The preset maps kitr's design tokens onto Tailwind's theme:

Change a token in your theme and every class that uses it follows.

Dark mode

dark: classes apply when <html data-theme="dark"> is set, which is what useTheme() from theme toggles:

<div className="bg-white text-black dark:bg-black dark:text-white" />

Merging classes

cn() joins class names and lets later ones win, so a component can take a className that overrides its defaults:

import { cn } from 'kitr/tailwind'

function Card({ className, ...props }: React.ComponentProps<'div'>) {
  return <div className={cn('rounded-lg border p-4', className)} {...props} />
}

<Card className="p-8" /> // p-8 replaces p-4

Config