[TOC]

组件实践

Tailwind CSS 本身不提供固定组件库，但非常适合构建项目自己的组件体系。本章提供常见组件示例。

按钮

<button class="inline-flex items-center justify-center rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm transition hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-200 disabled:cursor-not-allowed disabled:opacity-50">
  保存
</button>

标签

<span class="inline-flex items-center rounded-full bg-green-50 px-2.5 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20">
  已启用
</span>

卡片

<div class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
  <h3 class="text-lg font-semibold text-slate-900">尊云科技服务卡片</h3>
  <p class="mt-2 text-sm leading-6 text-slate-600">面向 zunyunkeji.com 项目的服务说明文字。</p>
</div>

弹窗

<div class="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/50 p-4">
  <div class="w-full max-w-lg rounded-2xl bg-white p-6 shadow-xl">
    <h2 class="text-lg font-semibold text-slate-900">确认操作</h2>
    <p class="mt-2 text-sm text-slate-600">确定要删除这条记录吗？</p>
    <div class="mt-6 flex justify-end gap-3">
      <button class="rounded-lg border px-4 py-2 text-sm">取消</button>
      <button class="rounded-lg bg-red-600 px-4 py-2 text-sm text-white">删除</button>
    </div>
  </div>
</div>

空状态

<div class="rounded-2xl border border-dashed border-slate-300 p-10 text-center">
  <h3 class="text-base font-semibold text-slate-900">暂无数据</h3>
  <p class="mt-2 text-sm text-slate-500">创建第一条记录后会显示在这里。</p>
  <button class="mt-6 rounded-lg bg-blue-600 px-4 py-2 text-sm text-white">立即创建</button>
</div>

组件维护建议

• 优先在业务组件中组合 Tailwind 类。
• 高频组件可以沉淀为 .btn、.card 等项目级类。
• 状态样式和无障碍属性要一起设计。
• 组件内不要动态拼接不可预测的类名。