Tailwind CSS v4

TurboKit uses Tailwind CSS v4 for styling with the new CSS-first configuration.

Configuration

Tailwind v4 uses CSS @theme directive instead of tailwind.config.js:

/* app/globals.css */
@import "tailwindcss";

@theme {
  --color-primary: oklch(0.205 0 0);
  --color-primary-foreground: oklch(0.985 0 0);
  /* ... more variables */
}

PostCSS Setup

// postcss.config.mjs
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

Usage

Use Tailwind classes directly in your components:

export function Button({ children }) {
  return (
    <button className="bg-primary text-primary-foreground px-4 py-2 rounded-lg hover:bg-primary/90 transition-colors">
      {children}
    </button>
  );
}

Color System

TurboKit uses a semantic color system compatible with shadcn/ui:

Variable	Description
`--color-background`	Page background
`--color-foreground`	Text color
`--color-primary`	Primary brand color
`--color-secondary`	Secondary color
`--color-muted`	Muted backgrounds
`--color-accent`	Accent color
`--color-destructive`	Error/danger color

Dark Mode

Dark mode is configured using prefers-color-scheme:

@media (prefers-color-scheme: dark) {
  @theme {
    --color-background: oklch(0.145 0 0);
    --color-foreground: oklch(0.985 0 0);
    /* ... dark mode colors */
  }
}

Tip: The color system uses OKLCH color space for better perceptual uniformity.