Tailwind CSS 常用组件

使用 Tailwind CSS 构建常用的 UI 组件。

1. 按钮组件

1.1 基础按钮

<!-- 主要按钮 -->
<button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">
  主要按钮
</button>
 
<!-- 次要按钮 -->
<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors">
  次要按钮
</button>
 
<!-- 边框按钮 -->
<button class="px-4 py-2 border-2 border-blue-500 text-blue-500 rounded-lg hover:bg-blue-50 transition-colors">
  边框按钮
</button>

1.2 不同尺寸

<!-- 小按钮 -->
<button class="px-2 py-1 text-sm bg-blue-500 text-white rounded">
  小按钮
</button>
 
<!-- 中等按钮（默认） -->
<button class="px-4 py-2 bg-blue-500 text-white rounded-lg">
  中等按钮
</button>
 
<!-- 大按钮 -->
<button class="px-6 py-3 text-lg bg-blue-500 text-white rounded-lg">
  大按钮
</button>

1.3 不同状态

<!-- 悬停效果 -->
<button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 active:scale-95 transition-all">
  交互按钮
</button>
 
<!-- 禁用状态 -->
<button disabled class="px-4 py-2 bg-gray-400 text-white rounded-lg cursor-not-allowed opacity-50">
  禁用按钮
</button>
 
<!-- 加载状态 -->
<button class="px-4 py-2 bg-blue-500 text-white rounded-lg opacity-75 cursor-wait">
  <span class="inline-block animate-spin mr-2">⏳</span>
  加载中...
</button>

1.4 图标按钮

<button class="flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">
  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
  </svg>
  添加
</button>

2. 卡片组件

2.1 基础卡片

<div class="max-w-sm bg-white rounded-lg shadow-md overflow-hidden">
  <div class="p-6">
    <h3 class="text-xl font-bold text-gray-900 mb-2">卡片标题</h3>
    <p class="text-gray-600">
      这是卡片的内容描述，可以包含多行文字。
    </p>
  </div>
</div>

2.2 带图片的卡片

<div class="max-w-sm bg-white rounded-lg shadow-md overflow-hidden">
  <img class="w-full h-48 object-cover" src="image.jpg" alt="卡片图片">
  <div class="p-6">
    <h3 class="text-xl font-bold text-gray-900 mb-2">卡片标题</h3>
    <p class="text-gray-600 mb-4">
      卡片内容描述
    </p>
    <button class="w-full bg-blue-500 text-white py-2 px-4 rounded-lg hover:bg-blue-600">
      了解更多
    </button>
  </div>
</div>

2.3 卡片网格

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <div class="bg-white rounded-lg shadow-md p-6">
    <h3 class="text-xl font-bold mb-2">卡片 1</h3>
    <p class="text-gray-600">内容</p>
  </div>
  <div class="bg-white rounded-lg shadow-md p-6">
    <h3 class="text-xl font-bold mb-2">卡片 2</h3>
    <p class="text-gray-600">内容</p>
  </div>
  <div class="bg-white rounded-lg shadow-md p-6">
    <h3 class="text-xl font-bold mb-2">卡片 3</h3>
    <p class="text-gray-600">内容</p>
  </div>
</div>

3. 表单组件

3.1 输入框

<!-- 基础输入框 -->
<input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none">
 
<!-- 带标签的输入框 -->
<div class="mb-4">
  <label class="block text-sm font-medium text-gray-700 mb-2">
    用户名
  </label>
  <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none">
</div>
 
<!-- 带图标的输入框 -->
<div class="relative">
  <input type="text" class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none" placeholder="搜索...">
  <svg class="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
  </svg>
</div>

3.2 文本域

<textarea class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none resize-none" rows="4" placeholder="请输入内容..."></textarea>

3.3 选择框

<select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none">
  <option>选项 1</option>
  <option>选项 2</option>
  <option>选项 3</option>
</select>

3.4 复选框和单选框

<!-- 复选框 -->
<label class="flex items-center gap-2">
  <input type="checkbox" class="w-4 h-4 text-blue-500 border-gray-300 rounded focus:ring-blue-500">
  <span class="text-gray-700">记住我</span>
</label>
 
<!-- 单选框 -->
<label class="flex items-center gap-2">
  <input type="radio" name="option" class="w-4 h-4 text-blue-500 border-gray-300 focus:ring-blue-500">
  <span class="text-gray-700">选项 1</span>
</label>

3.5 表单布局

<form class="max-w-md mx-auto space-y-4">
  <div>
    <label class="block text-sm font-medium text-gray-700 mb-2">
      用户名
    </label>
    <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none">
  </div>
  
  <div>
    <label class="block text-sm font-medium text-gray-700 mb-2">
      密码
    </label>
    <input type="password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none">
  </div>
  
  <button type="submit" class="w-full bg-blue-500 text-white py-2 px-4 rounded-lg hover:bg-blue-600 transition-colors">
    提交
  </button>
</form>

4. 导航栏

4.1 基础导航栏

<nav class="bg-white shadow-md">
  <div class="max-w-7xl mx-auto px-4">
    <div class="flex items-center justify-between h-16">
      <div class="flex items-center">
        <h1 class="text-xl font-bold text-gray-900">Logo</h1>
      </div>
      <div class="flex space-x-4">
        <a href="#" class="text-gray-600 hover:text-gray-900">首页</a>
        <a href="#" class="text-gray-600 hover:text-gray-900">关于</a>
        <a href="#" class="text-gray-600 hover:text-gray-900">联系</a>
      </div>
    </div>
  </div>
</nav>

4.2 响应式导航栏

<nav class="bg-white shadow-md">
  <div class="max-w-7xl mx-auto px-4">
    <div class="flex items-center justify-between h-16">
      <div class="flex items-center">
        <h1 class="text-xl font-bold text-gray-900">Logo</h1>
      </div>
      
      <!-- 桌面端导航 -->
      <div class="hidden md:flex space-x-4">
        <a href="#" class="text-gray-600 hover:text-gray-900">首页</a>
        <a href="#" class="text-gray-600 hover:text-gray-900">关于</a>
        <a href="#" class="text-gray-600 hover:text-gray-900">联系</a>
      </div>
      
      <!-- 移动端菜单按钮 -->
      <button class="md:hidden">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>
  </div>
</nav>

5. 模态框

5.1 基础模态框

<!-- 遮罩层 -->
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
  <!-- 模态框 -->
  <div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
    <div class="p-6">
      <h2 class="text-2xl font-bold text-gray-900 mb-4">模态框标题</h2>
      <p class="text-gray-600 mb-6">
        这是模态框的内容。
      </p>
      <div class="flex justify-end gap-4">
        <button class="px-4 py-2 text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-50">
          取消
        </button>
        <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">
          确认
        </button>
      </div>
    </div>
  </div>
</div>

6. 提示框

6.1 成功提示

<div class="bg-green-50 border border-green-200 text-green-800 px-4 py-3 rounded-lg flex items-center gap-2">
  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
  </svg>
  <span>操作成功！</span>
</div>

6.2 错误提示

<div class="bg-red-50 border border-red-200 text-red-800 px-4 py-3 rounded-lg flex items-center gap-2">
  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
  </svg>
  <span>操作失败，请重试。</span>
</div>

7. 加载状态

7.1 加载动画

<!-- 旋转加载 -->
<div class="flex items-center justify-center">
  <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
</div>
 
<!-- 点状加载 -->
<div class="flex items-center justify-center gap-2">
  <div class="w-2 h-2 bg-blue-500 rounded-full animate-bounce"></div>
  <div class="w-2 h-2 bg-blue-500 rounded-full animate-bounce" style="animation-delay: 0.1s"></div>
  <div class="w-2 h-2 bg-blue-500 rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
</div>

8. 标签和徽章

8.1 标签

<span class="px-2 py-1 text-xs font-semibold text-blue-800 bg-blue-100 rounded">
  标签
</span>
 
<span class="px-2 py-1 text-xs font-semibold text-green-800 bg-green-100 rounded">
  成功
</span>
 
<span class="px-2 py-1 text-xs font-semibold text-red-800 bg-red-100 rounded">
  错误
</span>

8.2 徽章

<div class="relative inline-block">
  <button class="px-4 py-2 bg-blue-500 text-white rounded-lg">
    通知
  </button>
  <span class="absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
    3
  </span>
</div>

9. 分页

<div class="flex items-center justify-center gap-2">
  <button class="px-3 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">
    上一页
  </button>
  <button class="px-3 py-2 bg-blue-500 text-white rounded-lg">
    1
  </button>
  <button class="px-3 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">
    2
  </button>
  <button class="px-3 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">
    3
  </button>
  <button class="px-3 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">
    下一页
  </button>
</div>

10. 下拉菜单

<div class="relative inline-block">
  <button class="px-4 py-2 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 flex items-center gap-2">
    选项
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
    </svg>
  </button>
  
  <div class="absolute right-0 mt-2 w-48 bg-white border border-gray-300 rounded-lg shadow-lg z-10">
    <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">选项 1</a>
    <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">选项 2</a>
    <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">选项 3</a>
  </div>
</div>

11. 下一步

现在你已经掌握了常用组件的构建方法，可以：

学习布局模式
查看最佳实践
实践构建完整项目

相关链接：

Tailwind UI — 官方组件库
组件示例

TailwindCSS 组件 UI 实战

Muliminty Note

探索

01-常用组件

Tailwind CSS 常用组件

1. 按钮组件

1.1 基础按钮

1.2 不同尺寸

1.3 不同状态

1.4 图标按钮

2. 卡片组件

2.1 基础卡片

2.2 带图片的卡片

2.3 卡片网格

3. 表单组件

3.1 输入框

3.2 文本域

3.3 选择框

3.4 复选框和单选框

3.5 表单布局

4. 导航栏

4.1 基础导航栏

4.2 响应式导航栏

5. 模态框

5.1 基础模态框

6. 提示框

6.1 成功提示

6.2 错误提示

7. 加载状态

7.1 加载动画

8. 标签和徽章

8.1 标签

8.2 徽章

9. 分页

10. 下拉菜单

11. 下一步

关系图谱

目录

反向链接