用途：当需要用 Tailwind CSS 为 UI 组件或布局编写样式时使用，例如设计 KPI 卡片、按钮组件、表单、仪表盘网格、卡片布局与灵活容器；涉及移动优先布局、响应式工具类、自定义主题时同样适用。资料未说明纯 CSS 或其他方案的边界场景。
主要能力：以工具类优先方式编写组件样式；移动优先的渐进增强与响应式断点（sm:640px、md:768px、lg:1024px、xl:1280px、2xl:1536px）；响应式网格与间距；容器查询；在 tailwind.config.ts 中扩展主题（颜色、间距、字体），可用语义化命名（primary、secondary、accent）；深色模式支持（darkMode: 'class' 或 'media'）；组件变体可用 CVA（class-variance-authority）等库管理；遵循 shadcn/ui 设计令牌与模式。
使用方式与工作流：先分析布局需求与断点，再用无前缀基础样式写移动端，随后用 sm:/md:/lg: 前缀逐步增强；添加深色模式 dark: 变体并在明暗两种模式下测试；最后校验无障碍。样式输出为 JSX/TSX 内联工具类、tailwind.config.ts 配置与 globals.css 全局样式；文档要求生成 PHR 记录样式决策、用 ADR 记录主题决策，并注释不直观的工具类组合。代码示例中的类名与配置应保持原样，不修改。
质量与限制：需满足移动端无横向滚动（适配 375px）、交互元素触控目标 44px 以上、WCAG 2.1 AA 对比度（正文 4.5:1）、focus-visible 焦点态、生产环境清除未使用类、在 sm/md/lg 断点测试、使用 Tailwind 间距刻度并添加过渡类。性能方面建议启用 JIT、压缩 CSS、内联关键 CSS、懒加载重组件。资料未提供价格、收费、平台限制或具体性能数值。