Tailwind Patterns

by davila78da17d671b6fNo license32K starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated today

Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.

Instructions onlySoftware Development Design & Creative

AI-generated overview

Reference guide for Tailwind CSS v4 patterns, covering CSS-first configuration, container queries, tokens and layout.

What it does: This skill supplies reference material on Tailwind CSS v4 conventions: CSS-based @theme configuration, container queries, responsive breakpoints, dark mode, layout, color and typography systems, animation, component extraction, anti-patterns and performance notes. It is presented as tables and short guidance rather than executable code, and it produces no files or artifacts on its own. It is intended to inform how an agent writes or reviews Tailwind markup and configuration.
When to use it: Use it when writing or reviewing Tailwind CSS v4 styles, setting up a CSS-first theme, or choosing between container queries and viewport breakpoints. It also helps when defining design tokens, dark mode strategy or component extraction rules.
Requirements: No scripts, packages or credentials are required; it is instructions-only reference content. The agent needs read and write access to project files to apply the guidance.

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

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;}

@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

3. Container Queries (v4 Native)

Breakpoint vs Container

Container Query Usage

When to Use

4. Responsive Design

Breakpoint System

Mobile-First Principle

Write mobile styles first (no prefix)
Add larger screen overrides with prefixes
Example: w-full md:w-1/2 lg:w-1/3

5. Dark Mode

Configuration Strategies

Dark Mode Pattern

6. Modern Layout Patterns

Flexbox Patterns

Grid Patterns

Note: Prefer asymmetric/Bento layouts over symmetric 3-column grids.

7. Modern Color System

OKLCH vs RGB/HSL

Color Token Architecture

8. Typography System

Font Stack Pattern

Type Scale

9. Animation & Transitions

Built-in Animations

Transition Patterns

10. Component Extraction

When to Extract

Extraction Methods

11. Anti-Patterns

Don't	Do
Arbitrary values everywhere	Use design system scale
`!important`	Fix specificity properly
Inline `style=`	Use utilities
Duplicate long class lists	Extract component
Mix v3 config with v4	Migrate fully to CSS-first
Use `@apply` heavily	Prefer components

12. Performance Principles

Remember: Tailwind v4 is CSS-first. Embrace CSS variables, container queries, and native features. The config file is now optional.

Source and attribution

Source:davila7/claude-code-templatesincli-tool/components/skills/creative-design/tailwind-patternsat commit8da17d6

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

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 layouts	Viewport breakpoints
Component-level responsive	Container queries
Reusable components	Container queries (context-independent)

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

Method	Behavior	Use When
`class`	`.dark` class toggles	Manual theme switcher
`media`	Follows system preference	No user control
`selector`	Custom selector (v4)	Complex theming

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`

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`