tailwind-patterns

Topics in the source

• Tailwind CSS Patterns (v4 - 2025)
• 1. Tailwind v4 Architecture
• What Changed from v3
• v4 Core Concepts
• 2. CSS-Based Configuration
• Theme Definition
• When to Extend vs Override
• 3. Container Queries (v4 Native)

Modern utility-first CSS with CSS-native configuration. -- | 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 | | Concept | Description | |---------|-------------| | CSS-first | Configuration in CSS, not JavaScript | | Oxide Engine | Rust-based compiler, much faster | | Native Nesting | CSS nesting without PostCSS | | CSS Variables | All tokens exposed as -- vars | -- | Action | Use When | |--------|----------| | Extend | Adding new values alongside defaults | | Override | Replacing default scale entirely | | Semantic tokens | Project-specific naming (primary, surface) | -- | Type | Responds To | |------|-------------| | Breakpoint (md:) | Viewport width | | Container (@container) | Parent element width | | Pattern | Classes | |---------|---------| | Define container | @container on parent | | Container breakpoint | @sm:, @md:, @lg: on children | | Named containers | @container/card for specificity | | Scenario | Use | |----------|-----| | Page-level layout

This is an excerpt. Refer to the complete source and its current requirements.