styling-with-tailwind

Theming with Tailwind CSS uses CSS variables paired with OKLCH colors for semantic color management. Define variables in your root stylesheet, map them to Tailwind's theme config, and apply utility classes to components. This approach centralizes theme values and enables dark mode by switching variable values at runtime.

Yes. CVA (Class Variance Authority) works with Tailwind by defining variant logic separately from utility classes, then composing them into component APIs. This decouples styling logic from markup and pairs well with shadcn/ui patterns for maintainable, reusable component libraries.

Dark mode in Tailwind works via class-based or system-preference toggles applied to the root element. Use CSS variables tied to OKLCH colors for theme values, then switch variable values when the dark class is present. This approach integrates with shadcn/ui theming patterns and Tailwind v4 features.

Tailwind's responsive utilities use breakpoint prefixes (sm:, md:, lg:) to apply styles conditionally at different screen sizes. Stack utilities with breakpoint modifiers to define mobile-first designs, then override at larger breakpoints. Combine with CSS variables for responsive theming that adapts color and spacing across devices.

Tailwind v4 introduces CSS-native features and improved variable integration that simplify theme configuration. Pair v4's native CSS support with OKLCH variables and CVA for cleaner variant definitions. The Skill covers v4-specific patterns alongside shadcn/ui integration for modern React interfaces.

No. Tailwind CSS theming with CSS variables and OKLCH colors works independently. shadcn/ui is optional and provides pre-built component patterns that leverage Tailwind utilities. Use the Skill's Tailwind patterns alone for custom components, or combine with shadcn/ui for accelerated development.