Tailwind CSS Patterns 是一份围绕 Tailwind CSS v4（2025）的使用原则与模式参考，主题为现代 utility-first CSS 与 CSS 原生配置。
【用途与定位】 该资料面向需要理解和使用 Tailwind CSS v4 的开发者，重点在于 v4 的架构变化与新的编写方式，而非单个组件的具体实现。它可用于迁移参考、团队规范或设计系统搭建时的思路梳理。
【主要能力与内容范围】
- 架构变化：对比 v3 与 v4，说明 tailwind.config.js 被 CSS 的 @theme 指令取代、PostCSS 插件被 Oxide 引擎（据称快 10 倍）取代、JIT 模式变为原生常开、插件系统转向 CSS 原生特性，@apply 仍可用但不被推荐。
- CSS 优先配置：使用 @theme 定义颜色、间距、字体等令牌，并区分「扩展」与「覆盖」以及语义化令牌。
- 容器查询：v4 原生支持 @container，区分视口断点（md:）与容器断点（@sm:、@md: 等），说明命名容器及适用场景。
- 响应式设计：列出 sm 640px、md 768px、lg 1024px、xl 1280px、2xl 1536px 断点，强调移动优先。
- 暗色模式：支持 class、media、selector 三种配置策略，并给出明暗背景、文字与边框的对应写法。
- 布局模式：整理 Flexbox 的居中、纵向堆叠、横向排列、两端对齐、换行网格等模式，以及 Grid 的 auto-fit 响应式、非对称 Bento、侧边栏布局，并建议优先使用非对称布局。
- 颜色系统：对比 OKLCH、HSL、RGB，提出原始色、语义色、组件色三层令牌架构。
- 排版系统：给出 sans、mono、display 字体栈建议及 text-xs 到 text-xl 的字号层级与用途。
- 动画与过渡：列出 animate-spin、animate-ping、animate-pulse、animate-bounce 等内置动画，以及过渡属性、缓动与悬停缩放模式。
- 组件抽取：说明同一类组合出现 3 次以上、存在复杂状态变体或属于设计系统元素时应抽取，并对比 React/Vue 组件、CSS 中 @apply、设计令牌三种方式。
- 反模式与性能：列举到处使用任意值、滥用 !important、内联 style、重复长类名列表、混用 v3 配置与 v4、过度使用 @apply 等问题及应对方式，并给出自动清除未使用样式、避免动态类名、使用 Oxide、CI/CD 构建缓存等性能原则。
【使用方式】 资料以概念表、类名模式和代码片段呈现。核心示例为在 CSS 中通过 @theme 定义颜色、间距与字体令牌。文中提醒：v4 是 CSS 优先，配置文件中是可选的，应拥抱 CSS 变量、容器查询与原生特性。
【适用场景与限制】 适用于 Tailwind CSS v4 项目的样式规范制定、从 v3 迁移、设计令牌架构设计以及组件响应式策略选择。限制方面：资料为原则与模式说明，未提供完整的项目搭建步骤、安装命令或具体业务组件实现；部分描述中的性能倍数与推荐字体栈来自资料原文；除文中列出的类名与代码片段外，未提供其他可直接复制的实现。