Tailwind CSS v4 2025 现代模式指南：CSS 原生配置、容器查询与响应式设计

tailwind-patterns by davila7/claude-code-templates

317 周安装量

23,400 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/davila7/claude-code-templates --skill tailwind-patterns

UI组件库 CSS 开发

🇨🇳中文介绍

Tailwind CSS 模式 (v4 - 2025)

采用 CSS 原生配置的现代实用优先 CSS。

1. Tailwind v4 架构

与 v3 相比的变化

v3 (旧版)	v4 (当前版)
`tailwind.config.js`	基于 CSS 的 `@theme` 指令
PostCSS 插件	Oxide 引擎 (快 10 倍)
JIT 模式	原生，始终开启
插件系统	CSS 原生功能
`@apply` 指令	仍然有效，但不推荐使用

v4 核心概念

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

2. 基于 CSS 的配置

@theme {
  /* 颜色 - 使用语义化名称 */
  --color-primary: oklch(0.7 0.15 250);
  --color-surface: oklch(0.98 0 0);
  --color-surface-dark: oklch(0.15 0 0);
  
  /* 间距比例 */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  
  /* 排版 */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

何时扩展与覆盖

操作	使用场景
扩展	在默认值基础上添加新值
覆盖	完全替换默认比例
语义化标记	项目特定的命名 (primary, surface)

3. 容器查询 (v4 原生)

类型	响应对象
断点 (`md:`)	视口宽度
容器 (`@container`)	父元素宽度

模式	类
定义容器	在父元素上使用 `@container`
容器断点	在子元素上使用 `@sm:`, `@md:`, `@lg:`
命名容器	使用 `@container/card` 以提高特异性

场景	使用
页面级布局	视口断点
组件级响应式	容器查询
可复用组件	容器查询 (上下文无关)

前缀	最小宽度	目标设备
(无)	0px	移动优先基础
`sm:`	640px	大手机 / 小平板
`md:`	768px	平板电脑
`lg:`	1024px	笔记本电脑
`xl:`	1280px	台式机
`2xl:`	1536px	大屏台式机

首先编写移动端样式 (无前缀)
使用前缀添加大屏幕覆盖样式
示例：w-full md:w-1/2 lg:w-1/3

方法	行为	使用场景
`class`	`.dark` 类切换	手动主题切换器
`media`	遵循系统偏好	无需用户控制
`selector`	自定义选择器 (v4)	复杂主题

元素	浅色	深色
背景	`bg-white`	`dark:bg-zinc-900`
文本	`text-zinc-900`	`dark:text-zinc-100`
边框	`border-zinc-200`	`dark:border-zinc-700`

6. 现代布局模式

模式	类
居中 (双轴)	`flex items-center justify-center`
垂直堆叠	`flex flex-col gap-4`
水平行	`flex gap-4`
两端对齐	`flex justify-between items-center`
换行网格	`flex flex-wrap gap-4`

模式	类
自动适应响应式	`grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))]`
非对称 (Bento)	`grid grid-cols-3 grid-rows-2` 配合 span
侧边栏布局	`grid grid-cols-[auto_1fr]`

注意： 优先选择非对称/Bento 布局，而非对称的三列网格。

7. 现代色彩系统

格式	优势
OKLCH	感知均匀，更适合设计
HSL	直观的色调/饱和度
RGB	向后兼容

层级	示例	用途
基础色	`--blue-500`	原始颜色值
语义色	`--color-primary`	基于用途的命名
组件色	`--button-bg`	组件特定

类型	推荐
无衬线	`'Inter', 'SF Pro', system-ui, sans-serif`
等宽	`'JetBrains Mono', 'Fira Code', monospace`
展示	`'Outfit', 'Poppins', sans-serif`

类	大小	用途
`text-xs`	0.75rem	标签、说明文字
`text-sm`	0.875rem	次要文本
`text-base`	1rem	正文文本
`text-lg`	1.125rem	引导文本
`text-xl`+	1.25rem+	标题

类	效果
`animate-spin`	连续旋转
`animate-ping`	注意脉冲
`animate-pulse`	轻微透明度脉冲
`animate-bounce`	弹跳效果

模式	类
所有属性	`transition-all duration-200`
特定属性	`transition-colors duration-150`
配合缓动	`ease-out` 或 `ease-in-out`
悬停效果	`hover:scale-105 transition-transform`

信号	操作
相同类组合出现 3 次以上	提取组件
复杂状态变体	提取组件
设计系统元素	提取 + 文档化

方法	使用场景
React/Vue 组件	动态，需要 JS
CSS 中的 @apply	静态，无需 JS
设计标记	可复用的值

不要	要
到处使用任意值	使用设计系统比例
使用 `!important`	正确修复特异性
内联 `style=`	使用实用类
重复冗长的类列表	提取组件
混合 v3 配置与 v4	完全迁移到 CSS 优先
大量使用 `@apply`	优先使用组件

原则	实现
清除未使用的	v4 中自动完成
避免动态性	不使用模板字符串类
使用 Oxide	v4 默认，快 10 倍
缓存构建	CI/CD 缓存

记住： Tailwind v4 是 CSS 优先的。拥抱 CSS 变量、容器查询和原生功能。配置文件现在是可选的。

🇺🇸English

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

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

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-column grids.

7. Modern Color System

OKLCH vs RGB/HSL

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

Color Token Architecture

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

8. Typography System

Font Stack Pattern

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

Type Scale

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

9. Animation & Transitions

Built-in Animations

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

Transition Patterns

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`

10. Component Extraction

When to Extract

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

Extraction Methods

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

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

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

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

Weekly Installs

285

Repository

davila7/claude-…emplates

GitHub Stars

22.6K

First Seen

Jan 25, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

opencode233

gemini-cli224

codex220

github-copilot213

claude-code203

cursor173

React 组合模式指南：Vercel 组件架构最佳实践，提升代码可维护性

105,000 周安装

CSS 优先	配置在 CSS 中，而非 JavaScript
Oxide 引擎	基于 Rust 的编译器，速度更快
原生嵌套	无需 PostCSS 的 CSS 嵌套
CSS 变量	所有标记都暴露为 `--*` 变量

Tailwind CSS v4 2025 现代模式指南：CSS 原生配置、容器查询与响应式设计

🇨🇳中文介绍

Tailwind CSS 模式 (v4 - 2025)

1. Tailwind v4 架构

与 v3 相比的变化

v4 核心概念

相关 Skills

2. 基于 CSS 的配置

主题定义

何时扩展与覆盖

3. 容器查询 (v4 原生)

断点 vs 容器

容器查询用法

何时使用

4. 响应式设计

断点系统

移动优先原则

5. 深色模式

配置策略

深色模式模式

6. 现代布局模式

Flexbox 模式

Grid 模式

7. 现代色彩系统

OKLCH vs RGB/HSL

色彩标记架构

8. 排版系统

字体栈模式

字体比例

9. 动画与过渡

内置动画

过渡模式

10. 组件提取

何时提取

提取方法

11. 反模式

12. 性能原则

🇺🇸English

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

最新 Skills