Tailwind CSS

这一课你将能做到

1. 用 Tailwind 工具类快速开发 UI
2. 配置自定义主题（颜色、字体、间距）
3. 提取组件类避免重复

为什么要学

传统 CSS 开发：写 HTML → 想类名 → 写 CSS → 调样式，来回切换文件，效率低。Tailwind 把样式变成工具类，直接在 HTML 里写 class="flex items-center justify-between p-4"，不用想类名，不用切文件。

人话：Tailwind 是「乐高积木」，每个类是一块积木，拼起来就是完整 UI。

先建立图像

<!-- 传统 CSS -->
<div class="card">
    <h2 class="card-title">标题</h2>
    <p class="card-desc">描述</p>
</div>

<style>
.card {
    background: white;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.card-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}
.card-desc {
    color: #666;
    font-size: 14px;
}
</style>

<!-- Tailwind -->
<div class="bg-white rounded-lg p-4 shadow">
    <h2 class="text-lg font-semibold mb-2">标题</h2>
    <p class="text-gray-600 text-sm">描述</p>
</div>

跟着做

步骤 1：安装与配置

# 创建项目
npm create vite@latest myapp -- --template react
cd myapp

# 安装 Tailwind
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

生成 tailwind.config.js：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

在 src/index.css 引入：

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

步骤 2：基础工具类

<!-- 布局 -->
<div class="flex items-center justify-between">
<div class="grid grid-cols-3 gap-4">
<div class="block">块级元素</div>
<div class="inline-block">行内块</div>
<div class="hidden md:block">移动端隐藏，桌面端显示</div>

<!-- 间距 -->
<div class="p-4">内边距 1rem</div>
<div class="px-4 py-2">水平 1rem，垂直 0.5rem</div>
<div class="m-4">外边距 1rem</div>
<div class="mt-8">上外边距 2rem</div>

<!-- 尺寸 -->
<div class="w-full">宽度 100%</div>
<div class="w-1/2">宽度 50%</div>
<div class="h-64">高度 16rem</div>
<div class="max-w-7xl mx-auto">最大宽度 + 水平居中</div>

<!-- 文字 -->
<p class="text-sm">小号字</p>
<p class="text-lg">大号字</p>
<p class="font-bold">加粗</p>
<p class="text-center">居中</p>
<p class="text-gray-600">灰色文字</p>

<!-- 颜色 -->
<div class="bg-blue-500">蓝色背景</div>
<div class="bg-blue-500/50">50% 透明度</div>
<p class="text-white">白色文字</p>
<div class="border border-gray-300">灰色边框</div>

<!-- 圆角 -->
<div class="rounded">小圆角</div>
<div class="rounded-lg">大圆角</div>
<div class="rounded-full">全圆角</div>

<!-- 阴影 -->
<div class="shadow">默认阴影</div>
<div class="shadow-lg">大阴影</div>
<div class="shadow-none">无阴影</div>