Tailwind CSS

Tailwind 是原子化 CSS 框架，通过组合工具类直接在 HTML 中写样式，彻底改变了 CSS 的写法。

核心理念

<!-- 传统 CSS：命名 → 写样式 → 应用 -->
<button class="btn-primary">Submit</button>
<style>
.btn-primary {
  background: #3b82f6;
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
}
</style>

<!-- Tailwind：直接用工具类 -->
<button class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600">
  Submit
</button>

安装与配置

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  // 扫描这些文件中的类名（用于 PurgeCSS）
  content: [
    './index.html',
    './src/**/*.{js,ts,jsx,tsx,vue}',
  ],

  // 暗色模式
  darkMode: 'class',  // 或 'media'

  theme: {
    extend: {
      // 扩展默认主题
      colors: {
        brand: {
          50:  '#eff6ff',
          500: '#3b82f6',
          900: '#1e3a8a',
        }
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
      spacing: {
        '18': '4.5rem',
        '88': '22rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },

  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio'),
  ]
}

核心工具类速查

<!-- 布局 -->
<div class="flex items-center justify-between gap-4">
<div class="grid grid-cols-3 gap-6">
<div class="absolute top-0 right-0">
<div class="fixed bottom-4 right-4">

<!-- 尺寸 -->
<div class="w-full h-screen max-w-4xl mx-auto">
<div class="w-1/2 h-64 min-h-0">

<!-- 间距（p=padding, m=margin）-->
<div class="p-4 px-6 py-2 pt-8">
<div class="m-auto mt-4 mb-8 -mx-4">

<!-- 文字 -->
<p class="text-xl font-bold text-gray-900 leading-relaxed tracking-wide">
<p class="text-sm text-gray-500 truncate line-clamp-2">

<!-- 背景与边框 -->
<div class="bg-white border border-gray-200 rounded-lg shadow-md">
<div class="bg-gradient-to-r from-blue-500 to-purple-600">

<!-- 交互状态 -->
<button class="hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 active:scale-95">
<input class="focus:outline-none focus:ring-2 focus:border-blue-500">

<!-- 响应式（移动优先）-->
<div class="text-sm md:text-base lg:text-lg">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
<div class="hidden md:block">

<!-- 暗色模式 -->
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">

@apply 提取组件样式

/* 当一组类名重复使用时，用 @apply 提取 */
@layer components {
  .btn {
    @apply inline-flex items-center justify-center
           px-4 py-2 rounded-md font-medium
           transition-colors duration-200
           focus:outline-none focus:ring-2 focus:ring-offset-2;
  }

  .btn-primary {
    @apply btn bg-blue-500 text-white
           hover:bg-blue-600
           focus:ring-blue-500;
  }

  .btn-secondary {
    @apply btn bg-gray-100 text-gray-700
           hover:bg-gray-200
           focus:ring-gray-500;
  }

  .card {
    @apply bg-white rounded-xl shadow-sm
           border border-gray-100 p-6;
  }

  .input {
    @apply w-full px-3 py-2 rounded-md border border-gray-300
           focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
           placeholder-gray-400 text-gray-900;
  }
}

实战：完整组件

<!-- 用户卡片 -->
<div class="max-w-sm bg-white rounded-2xl shadow-lg overflow-hidden
            hover:shadow-xl transition-shadow duration-300">
  <!-- 封面图 -->
  <div class="h-32 bg-gradient-to-br from-blue-400 to-purple-500"></div>

  <!-- 头像 -->
  <div class="px-6 pb-6">
    <div class="-mt-12 mb-4">
      <img
        class="w-20 h-20 rounded-full border-4 border-white shadow-md object-cover"
        src="/avatar.jpg" alt="Avatar"
      />
    </div>

    <!-- 信息 -->
    <h3 class="text-xl font-bold text-gray-900">Alice Johnson</h3>
    <p class="text-sm text-gray-500 mt-1">Senior Frontend Engineer</p>

    <!-- 标签 -->
    <div class="flex flex-wrap gap-2 mt-3">
      <span class="px-2 py-1 bg-blue-100 text-blue-700 text-xs font-medium rounded-full">
        React
      </span>
      <span class="px-2 py-1 bg-green-100 text-green-700 text-xs font-medium rounded-full">
        Vue
      </span>
      <span class="px-2 py-1 bg-purple-100 text-purple-700 text-xs font-medium rounded-full">
        TypeScript
      </span>
    </div>

    <!-- 操作 -->
    <div class="flex gap-3 mt-4">
      <button class="flex-1 py-2 bg-blue-500 text-white text-sm font-medium
                     rounded-lg hover:bg-blue-600 transition-colors">
        关注
      </button>
      <button class="flex-1 py-2 border border-gray-200 text-gray-700 text-sm
                     font-medium rounded-lg hover:bg-gray-50 transition-colors">
        消息
      </button>
    </div>
  </div>
</div>

Tailwind v4 新特性

/* Tailwind v4：CSS-first 配置，无需 tailwind.config.js */
@import "tailwindcss";

@theme {
  --color-brand-500: #3b82f6;
  --font-sans: 'Inter', sans-serif;
  --radius-card: 1rem;
}

/* 直接在 CSS 中定义主题变量 */

最佳实践

• 用 @apply 提取重复的工具类组合，但不要过度使用
• 响应式断点：sm(640px) md(768px) lg(1024px) xl(1280px) 2xl(1536px)
• 配合 prettier-plugin-tailwindcss 自动排序类名
• 用 clsx 或 cn 工具函数动态组合类名