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

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)

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).

tailwind-ui-patterns

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

This skill provides comprehensive guidance for building modern web applications with the SvelteKit 2 + Svelte 5 + Tailwind CSS v4 stack.

Expert guide for creating and managing a centralized Design System using Tailwind CSS (v4.1+) and shadcn/ui. This skill provides structured workflows for defining design tokens, configuring themes with CSS variables, and building a consistent UI component library based on shadcn/ui primitives.

When libraries don't accept className (like Recharts):