tailwindcss

name	tailwindcss
description	当用 Tailwind CSS 设计/实现 UI（布局、排版、响应式、主题、组件模式）时使用。包含用于干净、一致 web 设计的快速食谱与约定。

Tailwind CSS —— 工具优先（Utility-first）样式技能

何时使用

• 快速搭建 UI，并保持一致的间距/排版比例
• 组合优于定制 CSS 的设计系统
• 组件驱动的应用（React/Vue/Svelte）、营销页、原型 → 生产

关键概念与模式

• 工具类在 HTML/JSX 中组合：class="flex gap-4 p-6 bg-zinc-950 text-white"
• 响应式变体：sm: md: lg: xl: 等
• 状态变体：hover:、focus:、active:、disabled:、group-hover:、peer-checked:
• 任意值（谨慎使用）：w-[42rem]、bg-[#0b1220]、translate-y-[3px]
• 暗色模式模式：搭配基于 class 策略的 dark:
• 提取重复模式：
  • 优先用组件（JSX/Vue 组件）
  • 然后对小型可复用模式用 @apply（避免滥用）
• 构建流水线：
  • Tailwind 扫描 “content” 文件里的类名并生成 CSS（零运行时）

常见坑

• 类在生产环境未生成
  • 确保 content 路径包含所有模板/组件。
  • 避免动态拼接类名（例如 "text-" + color），除非已加入 safelist。
• 滥用 @apply 而丧失工具优先的好处
• 因类顺序假设导致样式冲突
• 巨型且无结构的 HTML 类列表
  • 用组件组合；拆成子组件；需要时用 clsx/cva。

快速食谱

1）干净的 CTA 按钮

<button class="inline-flex items-center justify-center rounded-xl px-5 py-3
               bg-indigo-600 text-white font-medium
               hover:bg-indigo-500 active:bg-indigo-700
               focus:outline-none focus:ring-2 focus:ring-indigo-400/60">
  Get started
</button>

2）响应式主视觉布局

<section class="mx-auto max-w-6xl px-6 py-16">
  <div class="grid gap-10 lg:grid-cols-2 lg:items-center">
    <div>
      <h1 class="text-4xl font-semibold tracking-tight sm:text-5xl">
        Ship a beautiful site fast.
      </h1>
      <p class="mt-4 text-zinc-600">
        Tailwind helps you move quickly without fighting CSS.
      </p>
    </div>
    <div class="rounded-2xl border border-zinc-200 bg-white p-6 shadow-sm">
      <!-- media -->
    </div>
  </div>
</section>

3）安全地处理动态类名

优先用映射：

const toneClass = {
  success: "bg-emerald-600",
  danger: "bg-rose-600",
  info: "bg-sky-600",
}[tone];

需要向用户询问的

• 框架/构建工具（Next/Vite/Remix/Webflow 导出）？
• 我们需要设计系统（token、组件库）还是一次性页面？
• 暗色模式？RTL？无障碍约束？