Tailwind Patterns 是一份面向 Tailwind CSS v4（2025）的实践原则整理，核心主张是“CSS 优先”的现代工具类样式写法，重点覆盖配置方式、响应式与设计令牌架构。
用途与定位：资料将其定位为 Tailwind CSS v4 的原则性参考，用于理解从 v3 迁移到 v4 后的变化，并在项目中按新范式组织样式。
主要内容：
- 架构变化：v3 使用 tailwind.config.js、PostCSS 插件与 JIT 模式；v4 改为 CSS 内 @theme 指令配置、Oxide 引擎（号称 10 倍更快）、原生始终开启、CSS 原生特性替代插件系统，@apply 仍可用但不建议。
- CSS 配置：通过 @theme 定义颜色、间距、字体等令牌，令牌以 --* CSS 变量形式暴露；区分“扩展”与“覆盖”的使用场景，以及语义化令牌命名（primary、surface 等）。
- 容器查询：区分视口断点（md: 等）与父元素容器（@container、@sm:/@md:/@lg:、命名容器 @container/card），并说明页面级布局用视口断点、组件级响应与可复用组件用容器查询。
- 响应式：给出 sm 640px、md 768px、lg 1024px、xl 1280px、2xl 1536px 的断点表，强调移动优先的写法顺序。
- 暗色模式：class、media、selector 三种策略及其适用场景，并给出背景、文字、边框的明暗类名搭配示例。
- 布局与视觉模式：Flexbox 与 Grid 常用组合（居中、纵向堆叠、auto-fit 响应式网格、Bento 非对称布局、侧边栏布局），建议优先非对称布局；色彩上对比 OKLCH 与 RGB/HSL，并给出原始色、语义色、组件色三层令牌架构；排版给出字体栈建议与字号尺度；动画列出内置动画类及过渡模式。
- 工程实践：组件提取的触发信号与方法（框架组件、@apply、设计令牌），常见反模式（滥用任意值、!important、内联样式、重复长类名、混用 v3 配置、过度 @apply）及性能原则（v4 自动清理、避免动态拼接类名、使用 Oxide、CI/CD 缓存）。
使用方式：资料以表格与代码片段形式呈现，可作为开发时的速查参考；具体如何在项目中接入或安装，资料未提供。
适用场景：使用 Tailwind CSS v4 的前端项目、组件库与设计系统建设、从 v3 迁移的团队参考。
限制：资料为原则性整理，未提供版本兼容细节、完整迁移步骤、工具链配置说明或效果验证数据；部分结论（如性能倍数）仅为资料中的表述。