tailwind-patterns

用途：整理 Tailwind CSS v4（2025）的现代工具类 CSS 使用原则，帮助开发者按 CSS 原生配置方式组织主题、响应式与设计令牌。主要能力：v4 架构说明（@theme 指令替代 tailwind.config.js、Oxide 引擎、原生嵌套、CSS 变量暴露令牌）；CSS 化配置（颜色、间距、字体等令牌定义，区分扩展与覆盖、语义化命名）；容器查询（@container 与 @sm/@md/@lg、命名容器，用于组件级响应式，视口断点用于页面布局）；响应式断点表（sm 640、md 768、lg 1024、xl 1280、2xl 1536，移动优先）；暗色模式（class、media、selector）；布局模式（flex 居中/堆叠/两端对齐/换行，grid 自动适配、Bento 非对称、侧边栏）；颜色系统（OKLCH 优势与 primitive/semantic/component 令牌分层）；字体栈与字号阶梯；动画过渡（animate-spin/ping/pulse/bounce、transition 组合、悬停缩放）；组件抽取时机（同类组合 3 次以上、复杂状态、设计系统元素）与方式（React/Vue 组件、@apply、设计令牌）；反模式（随意任意值、!important、内联样式、重复长类名、混用 v3 配置、过度 @apply）；性能原则（自动清理、避免动态类名、Oxide 加速、构建缓存）。使用方式：按主题、容器查询、布局、颜色、排版、动效等分节查阅对应类名或写法；示例采用表格与短代码片段呈现，可直接对照应用。适用场景：前端组件库、设计系统、响应式界面与可复用组件的样式实现。限制：资料为原则性参考而非完整 API 文档，未提供安装命令、版本兼容细节、浏览器支持与收费信息，具体类名行为需以官方文档为准。