name: tailwind-patternsdescription: “Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.”risk: nonesource: communitydate_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 中配置而非 JavaScriptOxide 引擎基于 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; }何时扩展而非覆盖操作使用场景扩展在默认值之外添加新值覆盖完全替换默认刻度语义令牌项目特定的命名primary、surface3. 容器查询v4 原生断点与容器对比类型响应对象断点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/35. 深色模式配置策略方法行为使用场景class.dark类切换手动主题切换器media跟随系统偏好无用户控制selector自定义选择器v4复杂主题化深色模式模式元素浅色深色背景bg-whitedark:bg-zinc-900文本text-zinc-900dark:text-zinc-100边框border-zinc-200dark:border-zinc-7006. 现代布局模式Flexbox 模式模式类居中两个轴flex items-center justify-center垂直堆叠flex flex-col gap-4水平行flex gap-4两端对齐flex justify-between items-center换行网格flex flex-wrap gap-4Grid 模式模式类自适应适配grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))]非对称Bentogrid grid-cols-3 grid-rows-2配合 span侧边栏布局grid grid-cols-[auto_1fr]注意优先使用非对称/Bento 布局而不是对称的 3 列网格。7. 现代颜色系统OKLCH 与 RGB/HSL 对比格式优势OKLCH感知均匀更适合设计HSL直观的色相/饱和度RGB遗留兼容性颜色令牌架构层示例用途原始值--blue-500原始颜色值语义--color-primary基于用途的命名组件--button-bg组件特定8. 字体系统字体栈模式类型推荐SansInter, SF Pro, system-ui, sans-serifMonoJetBrains Mono, Fira Code, monospaceDisplayOutfit, Poppins, sans-serif字号刻度类大小用途text-xs0.75rem标签、说明文字text-sm0.875rem次要文本text-base1rem正文文本text-lg1.125rem引导文本text-xl1.25rem标题9. 动画与过渡内置动画类效果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-transform10. 组件提取何时提取信号操作相同的类组合出现 3 次以上提取组件复杂的状态变体提取组件设计系统元素提取 记录提取方法方法使用场景React/Vue 组件动态、需要 JSCSS 中的 apply静态、不需要 JS设计令牌可复用的值11. 反模式不要要到处使用任意值使用设计系统刻度!important正确修复特异性内联style使用工具类重复的长类列表提取组件将 v3 配置与 v4 混用完全迁移到 CSS 优先大量使用apply优先使用组件12. 性能原则原则实现清除未使用的v4 中自动进行避免动态不要使用模板字符串类使用 Oxidev4 中默认快 10 倍缓存构建CI/CD 缓存记住Tailwind v4 是 CSS 优先的。拥抱 CSS 变量、容器查询和原生特性。配置文件现在变得可选。局限性仅当任务明确匹配上述范围时才使用此技能。不要将输出视为针对特定环境验证、测试或专家审查的替代品。如果缺少所需输入、权限、安全边界或成功标准请停下来询问澄清。