基础按钮组件

1. 按钮样式变体

  1. <!-- 基础按钮 -->
  2. <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
  3.     基础按钮
  4. </button>
  6. <!-- 轮廓按钮 -->
  7. <button class="px-4 py-2 border border-blue-500 text-blue-500 rounded hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
  8.     轮廓按钮
  9. </button>
  11. <!-- 不同尺寸 -->
  12. <button class="px-2 py-1 text-sm">小按钮</button>
  13. <button class="px-6 py-3 text-lg">大按钮</button>
  15. <!-- 禁用状态 -->
  16. <button class="px-4 py-2 bg-gray-400 text-white rounded cursor-not-allowed" disabled>
  17.     禁用按钮
  18. </button>

2. 图标按钮

  1. <!-- 带图标的按钮 -->
  2. <button class="inline-flex items-center px-4 py-2 bg-blue-500 text-white rounded">
  3.     <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  4.         <path d="M12 4v16m8-8H4"/>
  5.     </svg>
  6.     添加
  7. </button>

表单组件

1. 输入框

  1. <!-- 基础输入框 -->
  2. <div class="space-y-2">
  3.     <label class="block text-sm font-medium text-gray-700">
  4.         用户名
  5.     </label>
  6.     <input type="text"
  7.            class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
  8.            placeholder="请输入用户名">
  9. </div>
  11. <!-- 带图标的输入框 -->
  12. <div class="relative">
  13.     <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
  14.         <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  15.             <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
  16.         </svg>
  17.     </div>
  18.     <input type="search"
  19.            class="pl-10 w-full px-3 py-2 border border-gray-300 rounded-md"
  20.            placeholder="搜索">
  21. </div>

2. 下拉选择框

  1. <!-- 基础选择框 -->
  2. <select class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
  3.     <option>选项1</option>
  4.     <option>选项2</option>
  5.     <option>选项3</option>
  6. </select>
  8. <!-- 自定义样式的选择框 -->
  9. <div class="relative">
  10.     <select class="appearance-none w-full px-3 py-2 border border-gray-300 rounded-md bg-white">
  11.         <option>选项1</option>
  12.         <option>选项2</option>
  13.     </select>
  14.     <div class="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
  15.         <svg class="h-4 w-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  16.             <path d="M19 9l-7 7-7-7"/>
  17.         </svg>
  18.     </div>
  19. </div>

卡片组件

1. 基础卡片

  1. <!-- 简单卡片 -->
  2. <div class="bg-white rounded-lg shadow-lg overflow-hidden">
  3.     <img class="w-full h-48 object-cover" src="image.jpg" alt="Card image">
  4.     <div class="p-6">
  5.         <h3 class="text-xl font-semibold mb-2">卡片标题</h3>
  6.         <p class="text-gray-600">卡片描述内容</p>
  7.     </div>
  8. </div>
  10. <!-- 交互式卡片 -->
  11. <div class="bg-white rounded-lg shadow-lg overflow-hidden transform transition-transform hover:scale-105">
  12.     <!-- 卡片内容 -->
  13. </div>

2. 功能卡片

  1. <!-- 产品卡片 -->
  2. <div class="bg-white rounded-lg shadow-lg overflow-hidden">
  3.     <div class="relative">
  4.         <img class="w-full h-48 object-cover" src="product.jpg" alt="Product">
  5.         <div class="absolute top-2 right-2 bg-red-500 text-white px-2 py-1 rounded">
  6.             促销
  7.         </div>
  8.     </div>
  9.     <div class="p-6">
  10.         <h3 class="text-xl font-semibold mb-2">产品名称</h3>
  11.         <p class="text-gray-600 mb-4">产品描述</p>
  12.         <div class="flex items-center justify-between">
  13.             <span class="text-xl font-bold text-blue-500">¥99.00</span>
  14.             <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
  15.                 加入购物车
  16.             </button>
  17.         </div>
  18.     </div>
  19. </div>

导航组件

1. 顶部导航栏

  1. <!-- 响应式导航栏 -->
  2. <nav class="bg-white shadow">
  3.     <div class="max-w-7xl mx-auto px-4">
  4.         <div class="flex justify-between h-16">
  5.             <!-- Logo -->
  6.             <div class="flex items-center">
  7.                 <img class="h-8 w-auto" src="logo.svg" alt="Logo">
  8.             </div>
  10.             <!-- 桌面端导航 -->
  11.             <div class="hidden md:flex items-center space-x-4">
  12.                 <a href="#" class="text-gray-700 hover:text-gray-900 px-3 py-2">首页</a>
  13.                 <a href="#" class="text-gray-700 hover:text-gray-900 px-3 py-2">产品</a>
  14.                 <a href="#" class="text-gray-700 hover:text-gray-900 px-3 py-2">关于</a>
  15.             </div>
  17.             <!-- 移动端菜单按钮 -->
  18.             <div class="md:hidden flex items-center">
  19.                 <button class="text-gray-700">
  20.                     <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  21.                         <path d="M4 6h16M4 12h16M4 18h16"/>
  22.                     </svg>
  23.                 </button>
  24.             </div>
  25.         </div>
  26.     </div>
  27. </nav>

2. 侧边导航

  1. <!-- 侧边导航 -->
  2. <div class="w-64 bg-gray-800 h-screen">
  3.     <div class="flex items-center justify-center h-16 bg-gray-900">
  4.         <span class="text-white text-lg font-semibold">控制面板</span>
  5.     </div>
  7.     <nav class="mt-4">
  8.         <a href="#" class="flex items-center px-6 py-3 text-gray-300 hover:bg-gray-700">
  9.             <svg class="h-5 w-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  10.                 <path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
  11.             </svg>
  12.             仪表盘
  13.         </a>
  14.         <!-- 更多导航项 -->
  15.     </nav>
  16. </div>

提示和对话框

1. 消息提示

  1. <!-- 成功提示 -->
  2. <div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4">
  3.     <div class="flex items-center">
  4.         <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  5.             <path d="M5 13l4 4L19 7"/>
  6.         </svg>
  7.         <span>操作成功！</span>
  8.     </div>
  9. </div>
  11. <!-- 错误提示 -->
  12. <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4">
  13.     <div class="flex items-center">
  14.         <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  15.             <path d="M6 18L18 6M6 6l12 12"/>
  16.         </svg>
  17.         <span>出现错误！</span>
  18.     </div>
  19. </div>

2. 模态对话框

  1. <!-- 模态框背景 -->
  2. <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
  3.     <!-- 模态框内容 -->
  4.     <div class="bg-white rounded-lg shadow-xl max-w-md w-full">
  5.         <!-- 头部 -->
  6.         <div class="px-6 py-4 border-b">
  7.             <h3 class="text-lg font-semibold">确认操作</h3>
  8.         </div>
  10.         <!-- 内容 -->
  11.         <div class="px-6 py-4">
  12.             <p>确定要执行此操作吗？</p>
  13.         </div>
  15.         <!-- 底部按钮 -->
  16.         <div class="px-6 py-4 bg-gray-50 flex justify-end space-x-4 rounded-b-lg">
  17.             <button class="px-4 py-2 text-gray-600 hover:text-gray-700">
  18.                 取消
  19.             </button>
  20.             <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
  21.                 确定
  22.             </button>
  23.         </div>
  24.     </div>
  25. </div>

最佳实践

1. 组件封装

  • 使用 @apply 抽取公共样式
  • 保持组件的单一职责
  • 建立组件变体系统

2. 可访问性

  • 添加适当的 ARIA 属性
  • 确保键盘可访问性
  • 提供合适的颜色对比度

3. 响应式设计

  • 采用移动优先策略
  • 使用合适的断点
  • 保持布局灵活性

总结

Tailwind CSS 组件开发的核心优势：

  1. 快速构建标准化组件
  2. 灵活的样式定制能力
  3. 良好的复用性
  4. 完整的响应式支持

实际开发建议：

  1. 建立组件库文档
  2. 规范组件命名和结构
  3. 持续优化和迭代
  4. 注重代码可维护性