tailwind-patterns

SKILL.md

Modern utility-first CSS with CSS-native configuration and container queries.

CSS-first configuration using @theme directives instead of JavaScript, powered by the Oxide engine for 10x faster compilation

Native container queries (@container, @sm:, @md:) for component-level responsive design independent of viewport

Comprehensive design token architecture using CSS variables for colors, spacing, typography, and semantic naming

Mobile-first responsive breakpoints (sm:, md:, lg:, xl:, 2xl:) with dark mode support via class, media, or custom selectors

Modern layout patterns including flexbox, CSS Grid with auto-fit, and asymmetric Bento layouts; animation and transition utilities; component extraction guidelines

Tailwind CSS Patterns (v4 - 2025)

Modern utility-first CSS with CSS-native configuration.

1. Tailwind v4 Architecture

What Changed from v3

v3 (Legacy)
v4 (Current)

tailwind.config.js
CSS-based @theme directive

PostCSS plugin
Oxide engine (10x faster)

JIT mode
Native, always-on

Plugin system
CSS-native features

@apply directive
Still works, discouraged

v4 Core Concepts