Name: Tailwind Patterns
Author: AtilaMedeiros

SkillsPool

搵技能.../

技能內容

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

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

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

Tailwind Patterns | Skills Pool

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`

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]`

Format	Advantage
OKLCH	Perceptually uniform, better for design
HSL	Intuitive hue/saturation
RGB	Legacy compatibility

Layer	Example	Purpose
Primitive	`--blue-500`	Raw color values
Semantic	`--color-primary`	Purpose-based naming
Component	`--button-bg`	Component-specific

Type	Recommended
Sans	`'Inter', 'SF Pro', system-ui, sans-serif`
Mono	`'JetBrains Mono', 'Fira Code', monospace`
Display	`'Outfit', 'Poppins', sans-serif`

Class	Size	Use
`text-xs`	0.75rem	Labels, captions
`text-sm`	0.875rem	Secondary text
`text-base`	1rem	Body text
`text-lg`	1.125rem	Lead text
`text-xl`+	1.25rem+	Headings

Class	Effect
`animate-spin`	Continuous rotation
`animate-ping`	Attention pulse
`animate-pulse`	Subtle opacity pulse
`animate-bounce`	Bouncing effect

Pattern	Classes
All properties	`transition-all duration-200`
Specific	`transition-colors duration-150`
With easing	`ease-out` or `ease-in-out`
Hover effect	`hover:scale-105 transition-transform`

Method	Use When
React/Vue component	Dynamic, JS needed
@apply in CSS	Static, no JS needed
Design tokens	Reusable values

Principle	Implementation
Purge unused	Automatic in v4
Avoid dynamism	No template string classes
Use Oxide	Default in v4, 10x faster
Cache builds	CI/CD caching

Signal	Action
Same class combo 3+ times	Extract component
Complex state variants	Extract component
Design system element	Extract + document

Tailwind Patterns

Tailwind Patterns

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)

Breakpoint vs Container

Container Query Usage

When to Use

4. Responsive Design

Breakpoint System

Mobile-First Principle

5. Dark Mode

Configuration Strategies

Dark Mode Pattern

6. Modern Layout Patterns

Flexbox Patterns

Grid Patterns

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

12. Performance Principles

Extract Errors

Frontend Patterns

Coding Standards

Coding Standards

Coding Standards

Frontend Patterns