tailwind-patterns

# Tailwind CSS 模式 (v4 - 2025) > 采用 CSS 原生配置的现代实用优先 CSS。 --- ## 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 { /* 颜色 - 使用语义化名称 */ --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; } ### 何时扩展 vs 覆盖 | 操作 | 使用场景 | |--------|----------| | **扩展 (Extend)** | 在默认值基础上添加新值 | | **覆盖 (Override)** | 完全替换默认比例 | | **语义令牌 (Semantic tokens)** | 项目特定的命名 (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 | 大屏台式机 | ### 移动优先原则 1. 编写移动端