Agent skill · design visual · aiskillstore
tailwind-patterns
Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.
Why this skill is useful
Provides domain-specific knowledge on Tailwind CSS v4 features and patterns that the AI wouldn't reliably generate on its own.
What it needs
About 4k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Tailwind CSS Patterns (v4 - 2025) Modern utility-first CSS with CSS-native configuration. When to Use Use this skill when configuring Tailwind v4, using CSS-first theme and design tokens, or implementing container queries and modern Tailwind patterns. --- 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 aiskillstore/tailwind-patterns--7e9e10