Concern

Styling, utility-first CSS, and theming.

Technology

Tailwind CSS

Documentation

• Website: https://tailwindcss.com/
• Repository: https://github.com/tailwindlabs/tailwindcss
• Getting started: https://tailwindcss.com/docs/installation

Installation

With Vite: pnpm add tailwindcss @tailwindcss/vite, then add the Tailwind plugin to vite.config.ts and set src/index.css to @import "tailwindcss";. Full Vite setup (path alias, tsconfig) is described in ui-components when using shadcn; see Installation — Vite.

Implementation

Tailwind is included in the desktop app as part of shadcn create: the shadcn preset adds @tailwindcss/vite and the Vite config uses the Tailwind plugin. Global styles (e.g. src/index.css) use @import "tailwindcss";. No separate Tailwind config file is required when using the Vite plugin; the desktop app is already set up for utility-first CSS and theming as defined by the shadcn style (e.g. base-nova).

Integration

vite

Vite via @tailwindcss/vite. Complements ui-components (shadcn) and ui-primitives (Base UI). Design tokens can drive both Tailwind config and component themes.