𝑻𝒆𝒏𝑪𝒍𝒂𝒘正在头脑风暴···
𝑻𝒆𝒏𝑲𝒊𝑺𝒆𝒀𝒂の𝑨𝒈𝒆𝒏𝒕助手
𝑻𝒆𝒏-𝒇𝒍𝒂𝒔𝒉

TailwindCSS 实用类优先的设计系统

TailwindCSS 是目前最流行的实用类优先 CSS 框架之一。它通过预定义的实用类，让你可以快速构建现代化的用户界面，而不需要编写自定义 CSS。本文将全面介绍 TailwindCSS 的核心概念、使用方法和最佳实践。

一、TailwindCSS 简介

1.1 什么是 TailwindCSS？

TailwindCSS 是一个功能类优先的 CSS 框架，它不是像 Bootstrap 那样提供现成的组件，而是提供了一系列基础的样式类，你可以通过组合这些类来构建任意设计。

1.2 核心优势

  1. 无需离开 HTML：直接在 HTML 中编写样式，无需编写单独的 CSS 文件
  2. 即时反馈：工具提示可以实时预览样式效果
  3. 可定制化：可以自定义配置，完全控制设计系统
  4. 按需加载：只加载使用的样式，减小文件体积
  5. 响应式设计：内置响应式前缀，轻松实现响应式布局

1.3 设计理念

TailwindCSS 采用实用类优先的设计理念，每个类都只做一件事：

<!-- 不使用 TailwindCSS -->
<div class="box box--large box--primary box--shadow">
  内容
</div>

<!-- 使用 TailwindCSS -->
<div class="p-4 bg-blue-500 rounded-lg shadow-lg">
  内容
</div>

二、安装和配置

2.1 安装 TailwindCSS

方式一：使用 CLI

# 创建新项目
npm create next-app@latest my-app

# 安装 TailwindCSS
cd my-app
npm install -D tailwindcss postcss autoprefixer

# 初始化配置
npx tailwindcss init -p

方式二：使用 CDN

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My App</title>
  <!-- 引入 TailwindCSS -->
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <div class="p-4">
    内容
  </div>
</body>
</html>

2.2 配置文件

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#eff6ff',
          100: '#dbeafe',
          500: '#3b82f6',
          600: '#2563eb',
          700: '#1d4ed8',
        },
        secondary: {
          50: '#fdf4ff',
          100: '#fae8ff',
          500: '#d946ef',
          600: '#c026d3',
          700: '#a21caf',
        }
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
        mono: ['Fira Code', 'monospace'],
      },
      boxShadow: {
        'neumorphic': '5px 5px 10px #d1d9e6, -5px -5px 10px #ffffff',
        'soft': '0 10px 40px rgba(0,0,0,0.1)',
      }
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
    require('@tailwindcss/line-clamp'),
  ],
}

tailwind.config.ts

import type { Config } from 'tailwindcss'

const config: Config = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

export default config

2.3 样式文件配置

app/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

/* 自定义样式 */
@layer base {
  body {
    @apply text-gray-900 bg-gray-50;
  }
}

@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors;
  }

  .card {
    @apply bg-white rounded-xl shadow-lg p-6;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

三、核心概念

3.1 布局系统

Flexbox 布局

<!-- 容器 -->
<div class="flex">
  <!-- 项目 -->
  <div class="flex-1">项目 1</div>
  <div class="flex-1">项目 2</div>
  <div class="flex-1">项目 3</div>
</div>

<!-- 对齐方式 -->
<div class="flex items-center">
  <div>垂直居中</div>
</div>

<div class="flex justify-between">
  <div>项目 1</div>
  <div>项目 2</div>
</div>

<!-- 方向 -->
<div class="flex-row">横向排列</div>
<div class="flex-col">纵向排列</div>

<!-- 换行 -->
<div class="flex flex-wrap">
  <!-- 自动换行 -->
</div>

<!-- 间距 -->
<div class="gap-2">间距 0.5rem</div>
<div class="gap-4">间距 1rem</div>

Grid 布局

<!-- 基础 Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
  <div>项目 4</div>
  <div>项目 5</div>
  <div>项目 6</div>
</div>

<!-- 列宽 -->
<div class="grid grid-cols-[100px_1fr_150px]">
  <!-- 固定宽度列 -->
</div>

<!-- 垂直对齐 -->
<div class="grid items-center gap-4">
  <!-- 垂直居中 -->
</div>

<!-- 水平对齐 -->
<div class="grid justify-items-center">
  <!-- 水平居中 -->
</div>

<!-- 自动填充 -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
  <!-- 响应式网格 -->
</div>

响应式设计

<!-- 基础响应式前缀 -->
<div class="text-sm md:text-base lg:text-lg">
  根据屏幕宽度调整字体大小
</div>

<!-- 断点 -->
<div class="p-4 sm:p-6 md:p-8">
  <!-- 响应式内边距 -->
</div>

<!-- 常用断点 -->
<!-- sm: 640px -->
<!-- md: 768px -->
<!-- lg: 1024px -->
<!-- xl: 1280px -->
<!-- 2xl: 1536px -->

3.2 排版系统

字体大小

<div class="text-xs">10px</div>
<div class="text-sm">14px</div>
<div class="text-base">16px</div>
<div class="text-lg">18px</div>
<div class="text-xl">20px</div>
<div class="text-2xl">24px</div>
<div class="text-3xl">30px</div>
<div class="text-4xl">36px</div>
<div class="text-5xl">48px</div>
<div class="text-6xl">60px</div>

字体粗细

<div class="font-light">300</div>
<div class="font-normal">400</div>
<div class="font-medium">500</div>
<div class="font-semibold">600</div>
<div class="font-bold">700</div>
<div class="font-extrabold">800</div>

字体样式

<div class="font-sans">无衬线字体</div>
<div class="font-serif">衬线字体</div>
<div class="font-mono">等宽字体</div>

<div class="italic">斜体</div>
<div class="not-italic">正常</div>

行高

<div class="leading-none">1</div>
<div class="leading-tight">1.25</div>
<div class="leading-snug">1.375</div>
<div class="leading-normal">1.5</div>
<div class="leading-relaxed">1.625</div>
<div class="leading-loose">2</div>

对齐方式

<div class="text-left">左对齐</div>
<div class="text-center">居中对齐</div>
<div class="text-right">右对齐</div>
<div class="text-justify">两端对齐</div>

文本转换

<div class="uppercase">全大写</div>
<div class="lowercase">全小写</div>
<div class="capitalize">首字母大写</div>
<div class="normal-case">正常大小写</div>

文本颜色

<div class="text-gray-900">深灰色</div>
<div class="text-gray-600">中灰色</div>
<div class="text-gray-400">浅灰色</div>
<div class="text-red-600">红色</div>
<div class="text-blue-600">蓝色</div>
<div class="text-green-600">绿色</div>
<div class="text-yellow-600">黄色</div>
<div class="text-indigo-600">靛蓝色</div>
<div class="text-purple-600">紫色</div>

3.3 间距系统

Padding

<div class="p-4">四周 padding</div>
<div class="px-4">左右 padding</div>
<div class="py-4">上下 padding</div>
<div class="pt-4">上 padding</div>
<div class="pr-4">右 padding</div>
<div class="pb-4">下 padding</div>
<div class="pl-4">左 padding</div>

Margin

<div class="m-4">四周 margin</div>
<div class="mx-4">左右 margin</div>
<div class="my-4">上下 margin</div>
<div class="mt-4">上 margin</div>
<div class="mr-4">右 margin</div>
<div class="mb-4">下 margin</div>
<div class="ml-4">左 margin</div>

间距值

<div class="p-0">0</div>
<div class="p-1">0.25rem (4px)</div>
<div class="p-2">0.5rem (8px)</div>
<div class="p-4">1rem (16px)</div>
<div class="p-8">2rem (32px)</div>
<div class="p-16">4rem (64px)</div>

3.4 圆角

<div class="rounded-none">0</div>
<div class="rounded-sm">2px</div>
<div class="rounded">4px</div>
<div class="rounded-md">6px</div>
<div class="rounded-lg">8px</div>
<div class="rounded-xl">12px</div>
<div class="rounded-2xl">16px</div>
<div class="rounded-3xl">24px</div>
<div class="rounded-full">50% 圆形</div>

3.5 阴影

<div class="shadow-sm">小阴影</div>
<div class="shadow">正常阴影</div>
<div class="shadow-lg">大阴影</div>
<div class="shadow-xl">超大阴影</div>
<div class="shadow-2xl">超超大阴影</div>

<div class="shadow-none">无阴影</div>

<div class="shadow-[0_10px_40px_rgba(0,0,0,0.1)]">自定义阴影</div>

3.6 过渡和动画

过渡

<div class="transition-all">所有属性过渡</div>
<div class="transition-colors">颜色过渡</div>
<div class="transition-transform">变换过渡</div>

<div class="duration-75">75ms</div>
<div class="duration-150">150ms</div>
<div class="duration-300">300ms</div>
<div class="duration-500">500ms</div>
<div class="duration-700">700ms</div>
<div class="duration-1000">1000ms</div>

<div class="ease-linear">线性</div>
<div class="ease-in">加速</div>
<div class="ease-out">减速</div>
<div class="ease-in-out">加速后减速</div>

动画

<!-- 关键帧动画 -->
<div class="animate-pulse">脉冲动画</div>
<div class="animate-bounce">弹跳动画</div>
<div class="animate-spin">旋转动画</div>
<div class="animate-ping">扩散动画</div>
<div class="animate-ping">淡入动画</div>
<div class="animate-slide-in">滑入动画</div>

<!-- 自定义动画 -->
<style>
@keyframes slideIn {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.slide-in {
  animation: slideIn 0.3s ease-out;
}
</style>

<div class="animate-[slideUp_0.3s_ease-out]">自定义动画</div>

四、实战案例

4.1 卡片组件

<div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-shadow duration-300">
  <!-- 图片 -->
  <div class="h-48 overflow-hidden">
    <img src="https://via.placeholder.com/400x200/3b82f6/ffffff?text=图片" alt="图片" class="w-full h-full object-cover transition-transform duration-300 hover:scale-110">
  </div>

  <!-- 内容 -->
  <div class="p-6">
    <!-- 标题 -->
    <h3 class="text-xl font-semibold text-gray-900 mb-2">卡片标题</h3>

    <!-- 描述 -->
    <p class="text-gray-600 mb-4">
      这是卡片的描述内容，可以包含一些文字说明。
    </p>

    <!-- 操作按钮 -->
    <div class="flex gap-2">
      <button class="flex-1 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">
        查看详情
      </button>
      <button class="flex-1 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors">
        收藏
      </button>
    </div>
  </div>
</div>

4.2 导航栏

<nav class="bg-white shadow-md">
  <!-- 顶部栏 -->
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-16">
      <!-- Logo -->
      <div class="flex items-center">
        <div class="flex-shrink-0">
          <span class="text-2xl font-bold text-blue-600">Logo</span>
        </div>
      </div>

      <!-- 导航链接 -->
      <div class="hidden md:flex items-center space-x-8">
        <a href="#" class="text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors">
          首页
        </a>
        <a href="#" class="text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors">
          产品
        </a>
        <a href="#" class="text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors">
          服务
        </a>
        <a href="#" class="text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors">
          关于我们
        </a>
      </div>

      <!-- 右侧按钮 -->
      <div class="flex items-center space-x-4">
        <button class="text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium">
          登录
        </button>
        <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors text-sm font-medium">
          注册
        </button>

        <!-- 移动端菜单按钮 -->
        <button class="md:hidden p-2 rounded-md text-gray-700 hover:text-blue-600">
          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  <!-- 移动端菜单 -->
  <div class="md:hidden hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
      <a href="#" class="text-gray-700 hover:text-blue-600 block px-3 py-2 rounded-md text-base font-medium">
        首页
      </a>
      <a href="#" class="text-gray-700 hover:text-blue-600 block px-3 py-2 rounded-md text-base font-medium">
        产品
      </a>
      <a href="#" class="text-gray-700 hover:text-blue-600 block px-3 py-2 rounded-md text-base font-medium">
        服务
      </a>
    </div>
  </div>
</nav>

4.3 表格组件

<div class="bg-white shadow overflow-hidden sm:rounded-lg">
  <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
    <h3 class="text-lg leading-6 font-medium text-gray-900">用户列表</h3>
    <p class="mt-1 max-w-2xl text-sm text-gray-500">这是用户列表，展示所有注册用户</p>
  </div>

  <div class="px-4 py-5 sm:p-0">
    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
          <tr>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              姓名
            </th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              邮箱
            </th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              角色
            </th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              状态
            </th>
            <th scope="col" class="relative px-6 py-3">
              <span class="sr-only">操作</span>
            </th>
          </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
          <tr>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="flex items-center">
                <div class="flex-shrink-0 h-10 w-10">
                  <div class="h-10 w-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-medium">
                    张
                  </div>
                </div>
                <div class="ml-4">
                  <div class="text-sm font-medium text-gray-900">张三</div>
                  <div class="text-sm text-gray-500">zhangsan@example.com</div>
                </div>
              </div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
              zhangsan@example.com
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
              管理员
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                活跃
              </span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
              <a href="#" class="text-blue-600 hover:text-blue-900">编辑</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <!-- 分页 -->
  <div class="px-4 py-4 border-t border-gray-200 flex items-center justify-between sm:px-6">
    <div class="flex-1 flex justify-between sm:hidden">
      <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
        上一页
      </a>
      <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
        下一页
      </a>
    </div>
    <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
      <div>
        <p class="text-sm text-gray-700">
          显示 <span class="font-medium">1</span> 到 <span class="font-medium">10</span> 条，
          共 <span class="font-medium">50</span> 条结果
        </p>
      </div>
      <div>
        <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
          <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
            <span class="sr-only">上一页</span>
            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
          </a>
          <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
            1
          </a>
          <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
            2
          </a>
          <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
            3
          </a>
          <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
            <span class="sr-only">下一页</span>
            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
            </svg>
          </a>
        </nav>
      </div>
    </div>
  </div>
</div>

4.4 响应式导航栏

<div class="relative bg-white shadow">
  <!-- 顶部栏 -->
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-16">
      <!-- Logo -->
      <div class="flex items-center">
        <div class="flex-shrink-0">
          <a href="#" class="text-2xl font-bold text-blue-600">Logo</a>
        </div>
      </div>

      <!-- 导航链接（桌面端） -->
      <div class="hidden md:flex items-center space-x-8">
        <a href="#" class="text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors">首页</a>
        <a href="#" class="text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors">产品</a>
        <a href="#" class="text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors">服务</a>
        <a href="#" class="text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors">关于我们</a>
      </div>

      <!-- 移动端菜单按钮 -->
      <div class="flex items-center md:hidden">
        <button id="mobile-menu-btn" class="inline-flex items-center justify-center p-2 rounded-md text-gray-700 hover:text-blue-600 hover:bg-gray-100 focus:outline-none">
          <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
            <path class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
            <path class="hidden flex-1" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>

      <!-- 右侧按钮 -->
      <div class="hidden md:flex items-center space-x-4">
        <button class="text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium">登录</button>
        <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors text-sm font-medium">注册</button>
      </div>
    </div>
  </div>

  <!-- 移动端菜单 -->
  <div id="mobile-menu" class="hidden md:hidden">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
      <a href="#" class="text-gray-700 hover:text-blue-600 block px-3 py-2 rounded-md text-base font-medium">首页</a>
      <a href="#" class="text-gray-700 hover:text-blue-600 block px-3 py-2 rounded-md text-base font-medium">产品</a>
      <a href="#" class="text-gray-700 hover:text-blue-600 block px-3 py-2 rounded-md text-base font-medium">服务</a>
      <a href="#" class="text-gray-700 hover:text-blue-600 block px-3 py-2 rounded-md text-base font-medium">关于我们</a>
    </div>
  </div>
</div>

<script>
  // 移动端菜单切换
  const mobileMenuBtn = document.getElementById('mobile-menu-btn');
  const mobileMenu = document.getElementById('mobile-menu');

  mobileMenuBtn.addEventListener('click', () => {
    mobileMenu.classList.toggle('hidden');
  });
</script>

五、最佳实践

5.1 使用组件化

<!-- components/Card.vue -->
<template>
  <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-shadow duration-300">
    <slot></slot>
  </div>
</template>
<!-- 使用组件 -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
  <Card>
    <img src="..." alt="图片" class="w-full h-48 object-cover" />
    <div class="p-6">
      <h3 class="text-xl font-semibold text-gray-900 mb-2">{{ title }}</h3>
      <p class="text-gray-600">{{ description }}</p>
    </div>
  </Card>
</div>

5.2 避免过度嵌套

<!-- 好的做法 -->
<div class="flex items-center justify-between">
  <div class="flex items-center">
    <img src="..." class="w-10 h-10 rounded-full" />
    <div class="ml-3">
      <p class="text-sm font-medium text-gray-900">用户名</p>
    </div>
  </div>
  <button>操作</button>
</div>

<!-- 不好的做法 -->
<div class="flex items-center justify-between">
  <div>
    <div class="flex items-center">
      <div>
        <div>
          <div class="w-10 h-10 rounded-full"></div>
        </div>
        <div>
          <div class="ml-3">
            <div>
              <div class="text-sm font-medium text-gray-900">用户名</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div>
    <div>
      <div>
        <button>操作</button>
      </div>
    </div>
  </div>
</div>

5.3 使用工具提示

TailwindCSS 提供了工具提示插件：

npm install @tailwindcss/typography @tailwindcss/forms @tailwindcss/line-clamp
<div class="group relative">
  <button class="p-2 rounded-full bg-gray-100 hover:bg-gray-200 transition-colors">
    <svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
    </svg>
  </button>

  <!-- 工具提示 -->
  <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-max px-4 py-2 bg-gray-800 text-white text-sm rounded-lg opacity-0 group-hover:opacity-100 transition-opacity">
    工具提示
    <div class="absolute top-full left-1/2 transform -translate-x-1/2 border-8 border-transparent border-t-gray-800"></div>
  </div>
</div>

六、性能优化

6.1 按需加载

// tailwind.config.js
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  // 只使用需要的样式
}

6.2 使用 JIT 模式

TailwindCSS v3+ 默认使用 JIT 模式，只生成使用的样式。

6.3 优化图片

<img
  src="image.jpg"
  alt="描述"
  loading="lazy"
  class="w-full h-auto object-cover"
/>

七、总结

TailwindCSS 的优势：

  1. 快速开发：无需离开 HTML，即时看到效果
  2. 一致性：统一的间距、颜色、字体系统
  3. 可定制：完全可配置的设计系统
  4. 响应式：内置响应式前缀
  5. 性能：只生成使用的样式

常用命令：

# 安装
npm install -D tailwindcss postcss autoprefixer

# 初始化
npx tailwindcss init -p

# 监视模式
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

掌握 TailwindCSS，可以让你快速构建现代化的用户界面！