Agent skill · design visual · davila7
tailwind-patterns
Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.
Why this skill is useful
Provides specific patterns and configurations for Tailwind CSS v4 that the AI wouldn't reliably generate on its own.
What it needs
About 4k tokens when loaded. Last updated 2026-08-06. 30,138 stars on the source repository.
What this skill does
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 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 --- 2. CSS-Based Configuration Theme Definition When to Extend vs Override Action Use When -------- ---------- Extend Adding new values alongside defaults Override Replacing default scale entirely Semantic tokens Project-specific naming (primary, surface) --- 3. Container Queries (v4 Native) Breakpoint vs Container Type Responds To ------ ------------- Breakpoint (md:) Viewport width Container (@container) Parent element width Container Query Usage Pattern Classes --------- --------- Define container @container on parent Container breakpoint @sm:, @md:, @lg: on children Named containers @container/card for specificity When to Use Scenario Use ---------- ----- Page-level layouts Viewport breakpoints Component-level responsive Container queries Reusable components Container queries (context-independent) --- 4. Responsive Design Breakpoint System Prefix Min Width Target -------- ----------- -------- (none) 0px Mobile-first base sm: 640px Large phone / small tablet md: 768px Tablet lg: 1024px Laptop xl: 1280px Desktop 2xl: 1536px Large desktop Mobile-First Principle 1. Write mobile styles first (no prefix) 2. Add larger screen overrides with prefixes 3. Example: w-full md:w-1/2 lg:w-1/3 --- 5. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills davila7/tailwind-patterns