关于
Tailwind CSS v4 核心原则。CSS 优先配置、容器查询、现代模式和设计令牌架构。
name: tailwind-patterns description: "Tailwind CSS v4 原则。CSS 优先配置、容器查询、现代模式、设计令牌架构。" risk: unknown source: community date_added: "2026-02-27"
Tailwind CSS 模式（v4 - 2025）
现代实用优先 CSS，采用 CSS 原生配置。
何时使用
配置 Tailwind v4、使用 CSS 优先主题和设计令牌，或实现容器查询和现代 Tailwind 模式时使用此技能。
1. Tailwind v4 架构
从 v3 的变化
| v3（旧版） | v4（当前） |
|-------------|--------------|
| tailwind.config.js | 基于 CSS 的 @theme 指令 |
| PostCSS 插件 | Oxide 引擎（快 10 倍） |
| JIT 模式 | 原生，始终开启 |
| 插件系统 | CSS 原生功能 |
| @apply 指令 | 仍可用，不推荐 |
v4 核心概念
| 概念 | 描述 |
|---------|-------------|
| CSS 优先 | 在 CSS 中配置，而非 JavaScript |
| Oxide 引擎 | 基于 Rust 的编译器，更快 |
| 原生嵌套 | 无需 PostCSS 的 CSS 嵌套 |
| CSS 变量 | 所有令牌暴露为 --* 变量 |
2. 基于 CSS 的配置
主题定义
@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;
}
何时扩展 vs 覆盖
| 操作 | 使用场景 | |--------|----------| | 扩展 | 在默认值旁添加新值 | | 覆盖 | 完全替换默认比例 | | 语义令牌 | 项目特定命名（primary、surface） |
3. 容器查询（v4 原生）
断点 vs 容器
| 类型 | 响应对象 |
|------|-------------|
| 断点（md:） | 视口宽度 |
| 容器（@container） | 父元素宽度 |
容器查询用法
| 模式 | 类名 |
|---------|---------|
| 定义容器 | 父元素上的 @container |
| 容器断点 | 子元素上的 @sm:、@md:、@lg: |
| 命名容器 | @container/card 用于特定性 |
何时使用
| 场景 | 使用 | |----------|-----| | 页面级布局 | 视口断点 | | 组件级响应式 | 容器查询 | | 可复用组件 | 容器查询（上下文无关） |
4. 响应式设计
断点系统
| 前缀 | 最小宽度 | 目标 |
|--------|-----------|--------|
| （无） | 0px | 移动优先基础 |
| sm: | 640px | 大手机 / 小平板 |
| md: | 768px | 平板 |
| lg: | 1024px | 笔记本 |
| xl: | 1280px | 桌面 |
| 2xl: | 1536px | 大桌面 |
移动优先原则
- 先写移动样式（无前缀）
- 用前缀添加大屏覆盖
- 示例：
w-full md:w-1/2 lg:w-1/3
5. 暗色模式
配置策略
| 方法 | 行为 | 使用场景 |
|--------|----------|----------|
| 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. 现代布局模式
Flexbox 模式
| 模式 | 类名 |
|---------|---------|
| 居中（双轴） | 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 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 vs RGB/HSL
| 格式 | 优势 | |--------|-----------| | OKLCH | 感知均匀，更适合设计 | | HSL | 直观的色相/饱和度 | | RGB | 旧版兼容性 |
颜色令牌架构
| 层级 | 示例 | 用途 |
|-------|---------|---------|
| 原始 | --blue-500 | 原始颜色值 |
| 语义 | --color-primary | 基于用途的命名 |
| 组件 | --button-bg | 组件特定 |
8. 排版系统
字体栈模式
| 类型 | 推荐 |
|------|-------------|
| 无衬线 | 'Inter', 'SF Pro', system-ui, sans-serif |
| 等宽 | 'JetBrains Mono', 'Fira Code', monospace |
| 展示 | 'Outfit', 'Poppins', sans-serif |
限制
- 仅在任务明确匹配上述描述范围时使用此技能。
- 不要将输出视为环境特定验证、测试或专家审查的替代品。
- 如果缺少所需输入、权限、安全边界或成功标准，请停下来要求澄清。