02-快速开始

Tailwind CSS 快速开始

5 分钟快速上手 Tailwind CSS，构建你的第一个页面。

---

1. 第一个 Tailwind 页面

基础示例

创建一个简单的卡片组件：

<div class="max-w-sm mx-auto bg-white rounded-xl shadow-lg overflow-hidden">
  <div class="p-6">
    <h2 class="text-2xl font-bold text-gray-900 mb-2">卡片标题</h2>
    <p class="text-gray-600">
      这是一个使用 Tailwind CSS 构建的卡片组件。
    </p>
    <button class="mt-4 bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600">
      点击我
    </button>
  </div>
</div>

效果说明

• max-w-sm：最大宽度为 24rem（384px）
• mx-auto：水平居中
• bg-white：白色背景
• rounded-xl：大圆角
• shadow-lg：大阴影
• p-6：内边距 1.5rem
• text-2xl：文字大小 1.5rem
• font-bold：粗体
• hover:bg-blue-600：悬停时背景色变深

---

2. 工具类命名规则

2.1 基本格式

Tailwind CSS 的工具类遵循统一的命名规则：

{属性}-{值}

例如：

• p-4：padding 为 1rem
• text-center：文本居中
• bg-blue-500：背景色为蓝色 500

2.2 响应式前缀

在工具类前添加断点前缀：

{断点}:{工具类}

例如：

• md:text-lg：中等屏幕及以上文字大小为 lg
• lg:grid-cols-3：大屏幕及以上网格 3 列

2.3 状态变体

在工具类前添加状态前缀：

{状态}:{工具类}

例如：

• hover:bg-blue-600：悬停时背景色
• focus:ring-2：聚焦时添加环形边框

---

3. 常用工具类速查

3.1 布局（Layout）

Flexbox

<!-- 基础 Flex 容器 -->
<div class="flex">
  <div>项目 1</div>
  <div>项目 2</div>
</div>
 
<!-- 垂直方向 -->
<div class="flex flex-col">
  <div>项目 1</div>
  <div>项目 2</div>
</div>
 
<!-- 对齐方式 -->
<div class="flex items-center justify-between">
  <div>左侧</div>
  <div>右侧</div>
</div>

常用类：

• flex：启用 Flexbox
• flex-col：垂直方向
• items-center：垂直居中
• justify-between：两端对齐
• justify-center：水平居中
• gap-4：间距 1rem

Grid

<!-- 基础 Grid -->
<div class="grid grid-cols-3 gap-4">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
</div>
 
<!-- 响应式 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>

常用类：

• grid：启用 Grid
• grid-cols-{n}：n 列网格
• grid-rows-{n}：n 行网格
• gap-{size}：网格间距

3.2 间距（Spacing）

内边距（Padding）

<div class="p-4">所有方向 1rem</div>
<div class="px-4 py-2">水平 1rem，垂直 0.5rem</div>
<div class="pt-4 pb-2">上 1rem，下 0.5rem</div>

常用类：

• p-{size}：所有方向内边距
• px-{size}：水平内边距
• py-{size}：垂直内边距
• pt-{size}：上内边距
• pr-{size}：右内边距
• pb-{size}：下内边距
• pl-{size}：左内边距

外边距（Margin）

<div class="m-4">所有方向 1rem</div>
<div class="mx-auto">水平居中</div>
<div class="mt-8 mb-4">上 2rem，下 1rem</div>

常用类：

• m-{size}：所有方向外边距
• mx-{size}：水平外边距
• my-{size}：垂直外边距
• mx-auto：水平居中（常用）

3.3 颜色（Colors）

背景色

<div class="bg-blue-500">蓝色背景</div>
<div class="bg-gray-100">浅灰背景</div>
<div class="bg-white">白色背景</div>

文字颜色

<p class="text-gray-900">深灰文字</p>
<p class="text-blue-600">蓝色文字</p>
<p class="text-white">白色文字</p>

边框颜色

<div class="border border-gray-300">灰色边框</div>
<div class="border-2 border-blue-500">蓝色粗边框</div>

颜色值：

• 50：最浅
• 100-900：从浅到深
• 500：默认主色

3.4 文字（Typography）

<!-- 字体大小 -->
<h1 class="text-4xl">大标题</h1>
<p class="text-base">正文</p>
<span class="text-sm">小字</span>
 
<!-- 字重 -->
<p class="font-normal">正常</p>
<p class="font-bold">粗体</p>
<p class="font-semibold">半粗</p>
 
<!-- 对齐 -->
<p class="text-left">左对齐</p>
<p class="text-center">居中</p>
<p class="text-right">右对齐</p>

常用类：

• text-{size}：字体大小（xs, sm, base, lg, xl, 2xl-9xl）
• font-{weight}：字重（thin, normal, medium, semibold, bold）
• text-{align}：对齐方式（left, center, right, justify）

3.5 边框与圆角

<!-- 边框 -->
<div class="border">1px 边框</div>
<div class="border-2 border-blue-500">2px 蓝色边框</div>
 
<!-- 圆角 -->
<div class="rounded">小圆角</div>
<div class="rounded-lg">中等圆角</div>
<div class="rounded-full">完全圆形</div>

常用类：

• border：1px 边框
• border-{width}：边框宽度（0, 2, 4, 8）
• rounded-{size}：圆角（none, sm, md, lg, xl, 2xl, 3xl, full）

3.6 阴影

<div class="shadow-sm">小阴影</div>
<div class="shadow-md">中等阴影</div>
<div class="shadow-lg">大阴影</div>
<div class="shadow-xl">超大阴影</div>

---

4. 响应式设计

4.1 断点系统

Tailwind CSS 使用移动优先的断点系统：

• sm：640px 及以上
• md：768px 及以上
• lg：1024px 及以上
• xl：1280px 及以上
• 2xl：1536px 及以上

4.2 响应式示例

<!-- 响应式文字大小 -->
<h1 class="text-2xl md:text-4xl lg:text-6xl">
  响应式标题
</h1>
 
<!-- 响应式布局 -->
<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>
 
<!-- 响应式显示/隐藏 -->
<div class="hidden md:block">
  中等屏幕及以上显示
</div>
<div class="block md:hidden">
  仅小屏幕显示
</div>

---

5. 状态变体

5.1 交互状态

<!-- 悬停 -->
<button class="bg-blue-500 hover:bg-blue-600">
  悬停变深
</button>
 
<!-- 聚焦 -->
<input class="border focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
 
<!-- 激活 -->
<button class="active:scale-95">
  点击时缩小
</button>

5.2 状态类

<!-- 禁用 -->
<button class="bg-gray-400 disabled:opacity-50 disabled:cursor-not-allowed">
  禁用按钮
</button>
 
<!-- 选中 -->
<input type="checkbox" class="checked:bg-blue-500">
 
<!-- 组状态 -->
<div class="group">
  <div class="group-hover:bg-blue-500">悬停父元素时变蓝</div>
</div>

---

6. 实战案例

6.1 按钮组件

<!-- 基础按钮 -->
<button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">
  基础按钮
</button>
 
<!-- 不同尺寸 -->
<button class="px-2 py-1 text-sm bg-blue-500 text-white rounded">小按钮</button>
<button class="px-6 py-3 text-lg bg-blue-500 text-white rounded-lg">大按钮</button>
 
<!-- 不同样式 -->
<button class="px-4 py-2 border-2 border-blue-500 text-blue-500 rounded-lg hover:bg-blue-50">
  边框按钮
</button>

6.2 卡片组件

<div class="max-w-sm mx-auto bg-white rounded-xl shadow-lg overflow-hidden">
  <img class="w-full h-48 object-cover" src="image.jpg" alt="卡片图片">
  <div class="p-6">
    <h2 class="text-2xl font-bold text-gray-900 mb-2">卡片标题</h2>
    <p class="text-gray-600 mb-4">
      这是卡片的内容描述，可以包含多行文字。
    </p>
    <button class="w-full bg-blue-500 text-white py-2 px-4 rounded-lg hover:bg-blue-600">
      了解更多
    </button>
  </div>
</div>

6.3 导航栏

<nav class="bg-white shadow-md">
  <div class="max-w-7xl mx-auto px-4">
    <div class="flex justify-between items-center h-16">
      <div class="flex items-center">
        <h1 class="text-xl font-bold text-gray-900">Logo</h1>
      </div>
      <div class="hidden md:flex space-x-4">
        <a href="#" class="text-gray-600 hover:text-gray-900">首页</a>
        <a href="#" class="text-gray-600 hover:text-gray-900">关于</a>
        <a href="#" class="text-gray-600 hover:text-gray-900">联系</a>
      </div>
      <button class="md:hidden">菜单</button>
    </div>
  </div>
</nav>

---

7. 常用组合模式

7.1 居中容器

<div class="max-w-7xl mx-auto px-4">
  <!-- 内容 -->
</div>

7.2 卡片布局

<div class="bg-white rounded-lg shadow-md p-6">
  <!-- 内容 -->
</div>

7.3 按钮组

<div class="flex gap-2">
  <button class="px-4 py-2 bg-blue-500 text-white rounded">按钮 1</button>
  <button class="px-4 py-2 bg-gray-200 text-gray-700 rounded">按钮 2</button>
</div>

---

8. 下一步

现在你已经掌握了 Tailwind CSS 的基础用法，可以：

1. 学习 核心概念 深入了解工具类系统
2. 查看 布局系统 学习高级布局
3. 实践构建 常用组件

---

相关链接：

• Tailwind CSS 文档
• Tailwind Play — 在线练习

TailwindCSS 快速开始 工具类 响应式