vite-tailwind-radix

# Tailwind, Radix, No Custom CSS ## Overview Styling is Tailwind-first with a shared token system, on top of Radix/shadcn primitives. Custom CSS and hand-rolled interactive widgets are what this skill exists to prevent — they fragment the design and re-introduce accessibility bugs the primitives already solved. **Core principle:** Avoid custom CSS. Style with Tailwind utilities and the design tokens; reach for the existing primitive before building an interactive widget. ## Rules - **Tailwind utilities, not custom CSS.** No new `.css` files, no `<style>` blocks, no bespoke class names. Compose utilities; use `cn()` for conditional variants. An inline `style={{}}` object is allowed ONLY for a genuinely dynamic, computed value (a measured width, a transform), never for static styling. - **Design tokens, not magic values.** Use the established spacing/color/radius/typography scale (the shadcn-style token classes) that neighboring screens use — not arbitrary `w-[327px]` or `text-[#3a3a3a]`. Consistency comes from reusing the scale. - **Build on the primitives.** Dialog, Dropdown, Tooltip, Popover, Tabs, etc. come from the Radix primitives wrapped in `components/ui` — never hand-roll one that exists (you'll lose focus trapping, keyboard nav, and ARIA). - **Match neighbors.** Before styling a new screen, look at an adjacent one and reuse its patterns and token classes. - **`npm run build` must stay green** — a TypeScript error or failed build is a broken task, not a warning. ...