tailwind

Style with Tailwind CSS classes, already set up with kitr's colours.

InterfaceClientBuilt onTailwind CSS

What it is

@kitr/tailwind is Tailwind CSS v4 with a preset that maps kitr's design tokens onto Tailwind's theme, and cn() to merge class names. Dark mode follows the theme toggle.

Runs at build time and in the browser. If you prefer plain CSS, use the helpers in theme instead.

Install

kitr add tailwind

First time? Run npm i -g @kitr/kitr once. Inside a project, the global kitr runs your project's own version.

Adds @kitr/tailwind with Tailwind CSS 4, config/tailwind.ts and app/styles/app.css. Adds react first if missing. Every change.

Quick start

A styled component is a component with className. bg-muted and border-border are the theme's colours:

// app/features/orders/order-status-badge.tsx
export function OrderStatusBadge({ status }: { status: 'paid' | 'pending' | 'refunded' }) {
  return (
    <span className="inline-flex items-center rounded-md border border-border bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground">
      {status}
    </span>
  )
}

Use it on a page:

// app/pages/orders/index.tsx
import { OrderStatusBadge } from '#app/features/orders/order-status-badge'

export default () => (
  <main className="mx-auto max-w-3xl p-6">
    <h1 className="text-2xl font-semibold text-foreground">Orders</h1>
    <p className="mt-2 text-muted-foreground">
      Order ACME-1042 from Grace <OrderStatusBadge status="paid" />
    </p>
  </main>
)

Open /orders. Switch the theme to dark and the badge follows with no dark: class, because the tokens change under it. Next in the guide: Style your first component.

Built on

Built on Role
Tailwind CSS v4 and @tailwindcss/vite The utilities, variants and the @theme syntax, unchanged.
clsx Conditional class names inside cn().
tailwind-merge Conflict resolution inside cn(), so p-2 p-4 becomes p-4.

kitr adds the preset, cn(), the config file and the Vite wiring.

Problems it solves

Further reading