Tailwind CSS 实用技巧与最佳实践

什么是 Tailwind CSS？

Tailwind 是原子化 CSS 框架，通过组合实用类快速构建 UI。

核心优势

• 无需写自定义 CSS
• 响应式设计简单
• 设计系统一致
• 生产环境自动 Purge

基础使用

<!-- 按钮 -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  点击我
</button>

<!-- 卡片 -->
<div class="max-w-sm rounded overflow-hidden shadow-lg">
  <img class="w-full" src="/img.jpg" alt="Sunset">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">卡片标题</div>
    <p class="text-gray-700 text-base">卡片内容描述...</p>
  </div>
</div>

布局系统

Flexbox

<div class="flex items-center justify-between">
  <div class="flex-1">左侧内容</div>
  <div class="flex-none">右侧固定</div>
</div>

<!-- 水平居中 -->
<div class="flex justify-center items-center h-screen">
  <div>居中内容</div>
</div>

Grid

<div class="grid grid-cols-3 gap-4">
  <div class="col-span-2">占 2 列</div>
  <div>占 1 列</div>
</div>

<!-- 响应式网格 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
  <div>卡片 1</div>
  <div>卡片 2</div>
  <div>卡片 3</div>
  <div>卡片 4</div>
</div>

响应式设计

<!-- 断点：sm(640px) md(768px) lg(1024px) xl(1280px) 2xl(1536px) -->
<div class="text-sm md:text-base lg:text-lg">
  响应式文字
</div>

<div class="w-full md:w-1/2 lg:w-1/3">
  响应式宽度
</div>

<div class="hidden md:block">
  中等屏幕以上显示
</div>

间距系统

<!-- margin -->
<div class="m-4">四周外边距 1rem</div>
<div class="mx-auto">水平居中</div>
<div class="mt-4 mb-2">上 1rem 下 0.5rem</div>

<!-- padding -->
<div class="p-4">四周内边距 1rem</div>
<div class="px-6 py-3">横向 1.5rem 纵向 0.75rem</div>

<!-- gap -->
<div class="flex gap-4">
  <div>元素 1</div>
  <div>元素 2</div>
</div>

颜色与主题

<!-- 背景色 -->
<div class="bg-blue-500">蓝色背景</div>
<div class="bg-gray-100">浅灰背景</div>
<div class="bg-gradient-to-r from-purple-500 to-pink-500">渐变</div>

<!-- 文字颜色 -->
<p class="text-white">白色文字</p>
<p class="text-gray-600">灰色文字</p>

<!-- 透明度 -->
<div class="bg-blue-500 bg-opacity-50">半透明</div>

自定义配置

// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
  theme: {
    extend: {
      colors: {
        brand: {
          500: '#1da1f2',
          600: '#1a91da',
        }
      },
      spacing: {
        '128': '32rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
  plugins: [],
}

组件复用

@apply 指令

/* input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn-primary {
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
  }
  
  .card {
    @apply bg-white rounded-lg shadow-md p-6;
  }
}

<button class="btn-primary">按钮</button>
<div class="card">卡片</div>

状态变体

<!-- hover -->
<button class="bg-blue-500 hover:bg-blue-700">悬停变色</button>

<!-- focus -->
<input class="focus:ring-2 focus:ring-blue-500 focus:outline-none">

<!-- active -->
<button class="active:scale-95">点击缩放</button>

<!-- disabled -->
<button class="disabled:opacity-50 disabled:cursor-not-allowed">禁用</button>

<!-- group hover -->
<div class="group">
  <h3 class="group-hover:text-blue-500">悬停父元素变色</h3>
</div>

动画与过渡

<!-- 过渡 -->
<button class="transition duration-300 ease-in-out hover:scale-105">
  平滑过渡
</button>

<!-- 动画 -->
<div class="animate-spin">旋转</div>
<div class="animate-pulse">脉冲</div>
<div class="animate-bounce">弹跳</div>

<!-- 自定义动画 -->
@keyframes slide-in {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
.animate-slide-in { animation: slide-in 0.3s ease-out; }

性能优化

1. Purge CSS - 生产环境移除未使用类
2. JIT 模式 - 按需生成样式
3. 合理分组 - 避免过度嵌套

Tailwind CSS 让样式开发更高效，是现代化前端开发的首选！