Tailwind v4 组件设计指南

设计令牌

在 css/site.css 的 @theme 中定义品牌色与语义色，保证组件风格统一。

布局结构

用一致的容器与间距规则（如 container、max-w-*）构建可复用布局。

状态设计

• 定义 hover/focus/active 状态，保持交互一致。
• 使用 transition 提升可感知质量。

组件组合

复杂页面拆分为卡片、列表、CTA 等组件，提升维护性。

性能与可访问性

关注 CLS 与可访问性，对关键元素设置固定尺寸与对比度。