tailwind▌

Utility-first CSS framework patterns for responsive, component-based styling with Tailwind v4.1+. \n \n Covers responsive design with mobile-first breakpoints, flexbox/grid layouts, spacing scales, typography, colors, and interactive states \n Includes CSS-first configuration via @theme directive, custom utilities, and container queries for modern styling workflows \n Provides 10+ component patterns (cards, navigation, forms, modals) with accessibility guidelines and dark mode support \n Support

Comprehensive performance optimization guide for Tailwind CSS v4 applications. Contains 44 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.

CSS-first design system framework for Tailwind v4 with tokens, components, and responsive patterns. \n \n Migrates configuration from tailwind.config.ts to CSS @theme blocks with native CSS variables, OKLCH color spaces, and @custom-variant for dark mode \n Provides production-ready component patterns including CVA-based variants, compound components, form controls, grids, and animations using native @keyframes and @starting-style \n Includes design token hierarchy (brand → semantic → component)

Production-ready setup for Tailwind CSS v4 with shadcn/ui, dark mode, and CSS variable architecture. \n \n Four-step architecture: define CSS variables at root level with hsl() wrapper, map to Tailwind utilities via @theme inline , apply base styles, and enable automatic dark mode switching \n Vite plugin-based configuration (no PostCSS or tailwind.config.ts needed); requires @tailwindcss/vite and empty \"config\" in components.json \n Semantic color tokens for destructive, success, warning, and

tailwind-ui-patterns

Elite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial typography (bans 6-line wraps), gapless bento grids, strict GSAP ScrollTriggers (pinning, stacking, scrubbing), inline micro-images, and massive section spacing.

CSS-first Tailwind v4 configuration using @theme directives, OKLCH colors, and design tokens without config files. \n \n Configure theme entirely in CSS via @theme directives (default, inline, or reference modes) instead of tailwind.config.js \n Use OKLCH color format for perceptually uniform colors with L (lightness), C (chroma), and H (hue) parameters \n Vite plugin setup (@tailwindcss/vite) replaces PostCSS; no postcss.config.js needed \n CSS variable naming conventions for colors, spacing, f

Production-ready Tailwind CSS patterns for responsive layouts, cards, forms, buttons, and navigation. \n \n Includes semantic color tokens for automatic light/dark mode support, eliminating raw color usage that breaks themes \n Covers mobile-first responsive design with six breakpoints (base, sm, md, lg, xl, 2xl) and consistent spacing scale (4, 6, 8, 12, 16, 24) \n Provides ready-to-use component patterns for headers, footers, grids, cards, buttons, forms, and typography with hover states and t

Comprehensive UI refactoring guide based on Refactoring UI by Adam Wathan & Steve Schoger, implemented with Tailwind CSS utility classes. Contains 52 rules across 9 categories, prioritized by design impact to guide automated refactoring and code generation. Uses Tailwind CSS v4 syntax (v3 notes provided where syntax differs).

Status: Production Ready ✅ Last Updated: 2026-01-14 Tailwind Compatibility: v3.x and v4.x Source: Production projects, shadcn/ui patterns