tailwind-v4

Vite Plugin Setup : CSS Entry Point : @theme Inline Directive : Generates CSS variables that can be referenced elsewhere: Note : You can also use @theme default explicitly to mark theme values that can be overridden by non-default @theme declarations. Inlines values directly without CSS variables (better performance): Inlines values as fallbacks without emitting CSS variables: OKLCH provides perceptually uniform colors with better consistency across hues: Examples : Tailwind v4 uses double-dash CSS variable naming conventions: Tailwind v4 eliminates configuration files: Use @theme inline : Use @theme (default) : Use @theme reference : Semantic variables that map to design tokens: - L (Lightness) : 0% (black) to 100% (white) - C (Chroma) : 0 (gray) to ~0.4 (vibrant) - H (Hue) : 0-360 degrees (red → yellow → green → blue → magenta) - No tailwind.config.js - Use @theme in CSS instead - No postcss.config.js - Use @tailwindcss/vite plugin - TypeScript support - Add @types/node for path resolution - Setup & Installation : See references/setup.md for Vite plugin configuration, package setup, TypeScript config - Theming & Design Tokens : See references/theming.md for @theme modes, color palettes, custom fonts, animations - Dark Mode Strategies : See references/dark-mode.md for media queries, class-based, attribute-based approaches - Better performance (no CSS variable overhead) -...