tailwindcss_skill

Overview

This skill guides styling applications with Tailwind CSS using modern, CSS-first patterns. It emphasizes always using the latest Tailwind version, the @theme directive, OKLCH colors for perceptual uniformity, and container queries for component-aware responsiveness. The focus is practical: theme definitions in CSS, predictable design tokens, and accessible dark mode patterns.

How this skill works

Use the @theme directive in your global CSS to declare design tokens (colors, spacing, radii, shadows, animations). Consume tokens with Tailwind utility classes that map to those variables, enabling a single source of truth. Prefer OKLCH color values for perceptual consistency, and use @container modifiers to adapt components to their container size rather than the viewport. Configure PostCSS to include the Tailwind PostCSS plugin so the CSS-first setup is compiled with the latest Tailwind features.

When to use it

• When you need a maintainable design system driven by CSS variables and utility classes.
• When you want perceptually uniform color ramps using OKLCH.
• When components should respond to container size instead of global breakpoints.
• When implementing theme variants such as dark mode with minimal JS.
• When configuring Tailwind in modern build setups (PostCSS, Next.js, etc.).

Best practices

• Declare design tokens inside @theme so tokens live in CSS and are easy to override.
• Use OKLCH for color palettes; tune lightness and chroma for consistent ramps.
• Favor container queries (@container) for component-driven layouts over global media queries.
• Scope dark mode via CSS variable variants (@variant dark) for automatic adaptation or use the class strategy when you need explicit control.
• Keep utility-first markup concise and extract repeated patterns into components or semantic classes.

Example use cases

• Create a brand system: define primary/semantic palettes in OKLCH and consume with bg-primary-500, text-primary-700 utilities.
• Build responsive card components that change layout with @container rather than viewport breakpoints.
• Implement dark mode by overriding CSS variables inside a dark variant block for automatic color inversion.
• Add custom spacing and radii tokens in @theme and use them with p-18, rounded-2xl utility classes.
• Respect motion preferences with motion-safe and motion-reduce variants combined with tokenized animations.