Tailwind Patterns
Ship consistent Tailwind CSS v4 layouts and tokens without fighting legacy tailwind.config.js habits.
Overview
Tailwind-patterns is an agent skill for the Build phase that guides Tailwind CSS v4 CSS-first configuration, container queries, and reusable utility-based UI patterns.
Install
npx skills add https://github.com/davila7/claude-code-templates --skill tailwind-patternsWhat is this skill?
- Documents Tailwind v4 CSS-first @theme configuration replacing tailwind.config.js
- Covers container queries with @container and @sm/@md/@lg container breakpoints
- Includes v3 versus v4 architecture table (Oxide engine, native nesting, CSS variables)
- Mobile-first breakpoint ladder plus touch-target guidance (e.g. min-h-11 min-w-11)
- Lists 8 anti-patterns including @apply overuse, breakpoint-only responsiveness, and v3 config migration gaps
- 8 documented anti-patterns for Tailwind v4 usage
- v3 versus v4 architecture comparison table in SKILL.md
- Documented Oxide engine positioning as much faster compilation versus legacy JIT
Adoption & trust: 519 installs on skills.sh; 27.8k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You are on Tailwind v4 but your agent still generates v3 config files, desktop-first breakpoints, and brittle @apply-heavy CSS.
Who is it for?
Solo builders shipping a web app or marketing site who want their agent to follow Tailwind v4 token architecture and responsive patterns consistently.
Skip if: Backend-only APIs, native mobile UI stacks without Tailwind, or teams that must stay on Tailwind v3 with no migration plan.
When should I use this skill?
You are implementing or refactoring UI with Tailwind CSS v4 and need CSS-first configuration, container queries, or v4-aligned component class patterns.
What do I get? / Deliverables
Your project gets @theme design tokens, mobile-first and container-query layouts, and component class patterns that match v4 conventions and documented anti-patterns.
- @theme design-token blocks and semantic color/spacing scales
- Responsive and container-query layout class structures
- Reusable card, button, and form utility patterns with dark-mode-ready classes
Recommended Skills
Journey fit
Styling, responsive layout, and design-token work happen while implementing the product UI in the build phase. The skill is entirely about utility CSS, @theme tokens, and component class patterns on the frontend surface.
How it compares
Use as a v4 pattern playbook instead of copying random Stack Overflow class strings or a full component library you do not control.
Common Questions / FAQ
Who is tailwind-patterns for?
It is for solo and indie builders—and agents helping them—who implement or refactor frontend UI with Tailwind CSS v4 and want CSS-first themes, responsive rules, and component recipes in one place.
When should I use tailwind-patterns?
Use it during Build while scaffolding pages, defining @theme tokens, adding container-query layouts, or fixing dark mode and touch-target accessibility before you ship the first UI pass.
Is tailwind-patterns safe to install?
It is guidance for editing your repo’s CSS and markup; review the Security Audits panel on this Prism page and your agent’s Read/Write permissions before applying bulk style changes.
SKILL.md
READMESKILL.md - Tailwind Patterns
# 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 ``` @theme { /* Colors - use semantic names */ --color-primary: oklch(0.7 0.15 250); --color-surface: oklch(0.98 0 0); --color-surface-dark: oklch(0.15 0 0); /* Spacing scale */ --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 2rem; /* Typography */ --font-sans: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', monospace; } ``` ### 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. Dark Mode ### Configuration Strategies | Method | Behavior | Use When | |--------|----------|----------| | `class` | `.dark` class toggles | Manual theme switcher | | `media` | Follows system preference | No user control | | `selector` | Custom selector (v4) | Complex theming | ### Dark Mode Pattern | Element | Light | Dark | |---------|-------|------| | Background | `bg-white` | `dark:bg-zinc-900` | | Text | `text-zinc-900` | `dark:text-zinc-100` | | Borders | `border-zinc-200` | `dark:border-zinc-700` | --- ## 6. Modern Layout Patterns ### Flexbox Patterns | Pattern | Classes | |---------|---------| | Center (both axes) | `flex items-center justify-center` | | Vertical stack | `flex flex-col gap-4` | | Horizontal row | `flex gap-4` | | Space between | `flex justify-between items-center` | | Wrap grid | `flex flex-wrap gap-4` | ### Grid Patterns | Pattern | Classes | |---------|---------| | Auto-fit responsive | `grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))]` | | Asymmetric (Bento) | `grid grid-cols-3 grid-rows-2` with spans | | Sidebar layout | `grid grid-cols-[auto_1fr]` | > **Note:** Prefer asymmetric/Bento layouts over symmetric 3-c