知识库

Appearance

Tailwind CSS 完全指南 ​

一、Tailwind CSS 简介 ​

Tailwind CSS 是一个功能类优先的 CSS 框架，它提供了大量预定义的工具类（Utility Classes），让你可以直接在 HTML 中构建现代网站，而无需编写自定义 CSS。

核心优势 ​

  1. 无需命名：不需要为 class 命名而苦恼
  2. CSS 体积小：只包含实际使用的样式
  3. 响应式设计：内置响应式前缀，轻松实现多端适配
  4. 高度可定制：可配置颜色、间距、字体等设计系统
  5. 开发效率高：无需在 HTML 和 CSS 文件间切换

与传统 CSS 框架对比 ​

特性Tailwind CSSBootstrap传统 CSS
设计风格无预设风格有预设主题完全自定义
类名数量极多工具类组件类为主自定义
定制性极高中等最高
学习曲线中等低低
输出体积按需生成较大取决于项目

二、核心概念 ​

2.1 工具类优先（Utility-First） ​

Tailwind 的核心理念是将 CSS 属性拆分成独立的工具类：

html
<!-- 传统 CSS 方式 -->
<button class="btn-primary">按钮</button>

<style>
  .btn-primary {
    background-color: #3b82f6;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    font-weight: 600;
  }
  .btn-primary:hover {
    background-color: #2563eb;
  }
</style>

<!-- Tailwind 方式 -->
<button
  class="bg-blue-500 text-white px-4 py-2 rounded font-semibold hover:bg-blue-600"
>
  按钮
</button>

2.2 命名约定 ​

Tailwind 类名遵循一致的命名模式：

{属性前缀}-{值}
{属性前缀}-{方向}-{值}
{状态前缀}:{类名}
{断点前缀}:{类名}

示例：

  • text-lg → font-size: large
  • px-4 → padding-left/right: 1rem
  • hover:bg-blue-600 → hover 状态背景色
  • md:flex → 中等屏幕及以上 display: flex

2.3 设计系统 ​

Tailwind 内置了一套完整的设计系统：

间距系统（基于 4px 基准）

0  → 0px
1  → 4px (0.25rem)
2  → 8px (0.5rem)
3  → 12px (0.75rem)
4  → 16px (1rem)
6  → 24px (1.5rem)
8  → 32px (2rem)
10 → 40px (2.5rem)
12 → 48px (3rem)
16 → 64px (4rem)
20 → 80px (5rem)
24 → 96px (6rem)

颜色系统

颜色强度: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950

示例:
- blue-500 → 主色调
- blue-300 → 浅色
- blue-700 → 深色

三、安装与配置 ​

3.1 安装方式 ​

方式一：通过 npm 安装（推荐）

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

方式二：CDN 引入（仅用于原型开发）

html
<script src="https://cdn.tailwindcss.com"></script>

3.2 配置文件 ​

tailwind.config.js 基础配置：

javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{html,js,ts,jsx,tsx}',
    './components/**/*.{html,js,ts,jsx,tsx}'
  ],
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#eff6ff',
          500: '#3b82f6',
          900: '#1e3a8a'
        }
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif']
      },
      spacing: {
        128: '32rem'
      }
    }
  },
  plugins: []
}

3.3 CSS 入口文件 ​

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

/* 自定义组件类 */
@layer components {
  .btn {
    @apply px-4 py-2 rounded font-semibold transition-colors;
  }
  .btn-primary {
    @apply bg-blue-500 text-white hover:bg-blue-600;
  }
}

四、常用工具类速查 ​

4.1 布局相关 ​

html
<!-- Display -->
<div class="block">块级元素</div>
<div class="inline-block">行内块</div>
<div class="inline">行内元素</div>
<div class="flex">Flex 容器</div>
<div class="grid">Grid 容器</div>
<div class="hidden">隐藏</div>

<!-- Flexbox -->
<div class="flex flex-row flex-col">
  <div class="flex-1">自动填充</div>
  <div class="flex-none">不伸缩</div>
</div>
<div class="flex items-center justify-between">
  <span>垂直居中，水平两端对齐</span>
</div>
<div class="flex flex-wrap">允许换行</div>

<!-- Grid -->
<div class="grid grid-cols-3 gap-4">
  <div>三列网格</div>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6">
  <div>响应式网格</div>
</div>

<!-- Position -->
<div class="relative">
  <div class="absolute top-0 right-0">绝对定位右上角</div>
</div>
<div class="fixed bottom-4 right-4">固定在右下角</div>
<div class="sticky top-0">粘性定位</div>

4.2 间距相关 ​

html
<!-- Padding -->
<div class="p-4">四边内边距 16px</div>
<div class="px-4 py-2">水平 16px，垂直 8px</div>
<div class="pt-2 pr-4 pb-2 pl-4">分别设置四边</div>

<!-- Margin -->
<div class="m-4">四边外边距</div>
<div class="mx-auto">水平居中</div>
<div class="mt-8">上边距 32px</div>
<div class="-mt-4">负边距</div>

<!-- Gap (Flex/Grid) -->
<div class="flex gap-4">子元素间距 16px</div>
<div class="grid gap-x-2 gap-y-4">行列间距不同</div>

4.3 尺寸相关 ​

html
<!-- Width -->
<div class="w-full">宽度 100%</div>
<div class="w-screen">宽度 100vw</div>
<div class="w-64">宽度 16rem (256px)</div>
<div class="w-1/2">宽度 50%</div>
<div class="max-w-7xl mx-auto">最大宽度居中</div>
<div class="min-h-screen">最小高度视口高度</div>

<!-- Height -->
<div class="h-32">高度 8rem</div>
<div class="h-full">高度 100%</div>
<div class="h-screen">高度 100vh</div>

4.4 文字相关 ​

html
<!-- 字体大小 -->
<p class="text-xs">12px</p>
<p class="text-sm">14px</p>
<p class="text-base">16px（默认）</p>
<p class="text-lg">18px</p>
<p class="text-xl">20px</p>
<p class="text-2xl">24px</p>
<p class="text-4xl">36px</p>

<!-- 字体粗细 -->
<p class="font-light">细体 300</p>
<p class="font-normal">常规 400</p>
<p class="font-medium">中等 500</p>
<p class="font-semibold">半粗 600</p>
<p class="font-bold">粗体 700</p>

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

<!-- 文字对齐 -->
<p class="text-left">左对齐</p>
<p class="text-center">居中</p>
<p class="text-right">右对齐</p>

<!-- 文字装饰 -->
<p class="underline">下划线</p>
<p class="line-through">删除线</p>
<p class="no-underline">无装饰</p>

<!-- 文字溢出 -->
<p class="truncate">单行省略号...</p>
<p class="line-clamp-3">最多显示三行...</p>

4.5 背景相关 ​

html
<!-- 背景色 -->
<div class="bg-white">白色背景</div>
<div class="bg-gray-100">浅灰背景</div>
<div class="bg-blue-500">蓝色背景</div>
<div class="bg-black/50">半透明黑色背景</div>

<!-- 背景图片 -->
<div
  class="bg-cover bg-center bg-no-repeat"
  style="background-image: url('/image.jpg')"
>
  背景图片
</div>

<!-- 渐变背景 -->
<div class="bg-gradient-to-r from-blue-500 to-purple-500">水平渐变</div>
<div class="bg-gradient-to-b from-white to-gray-100">垂直渐变</div>

4.6 边框相关 ​

html
<!-- 边框 -->
<div class="border">1px 边框</div>
<div class="border-2">2px 边框</div>
<div class="border-t">上边框</div>
<div class="border-gray-200">灰色边框</div>

<!-- 圆角 -->
<div class="rounded">小圆角</div>
<div class="rounded-md">中等圆角</div>
<div class="rounded-lg">大圆角</div>
<div class="rounded-full">完全圆形</div>
<div class="rounded-t-lg">仅上方圆角</div>

<!-- 边框样式 -->
<div class="border-dashed">虚线边框</div>
<div class="border-none">无边框</div>

4.7 交互状态 ​

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

<!-- Focus -->
<input class="border focus:border-blue-500 focus:ring-2 focus:ring-blue-200">
  聚焦状态
</input>

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

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

<!-- 组合状态 -->
<button class="bg-blue-500 hover:bg-blue-600 active:bg-blue-700
               focus:outline-none focus:ring-2 focus:ring-blue-300
               disabled:bg-gray-300 disabled:cursor-not-allowed">
  完整交互按钮
</button>

4.8 响应式设计 ​

html
<!-- 断点前缀 -->
<div class="text-sm md:text-base lg:text-lg xl:text-xl">响应式字体大小</div>

<!-- 响应式布局 -->
<div class="flex flex-col md:flex-row">移动端垂直排列，桌面端水平排列</div>

<!-- 响应式显示/隐藏 -->
<div class="hidden md:block">仅在 md 及以上显示</div>
<div class="block md:hidden">仅在 md 以下显示</div>

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

断点说明：

断点前缀最小宽度
手机(默认)0px
平板竖屏sm:640px
平板横屏/小桌面md:768px
桌面lg:1024px
大桌面xl:1280px
超大屏2xl:1536px

五、项目常用场景案例 ​

5.1 导航栏组件 ​

html
<!-- 响应式导航栏 -->
<nav class="bg-white shadow-sm border-b border-gray-100">
  <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">
        <a href="/" class="flex items-center space-x-2">
          <div class="w-8 h-8 bg-blue-500 rounded-lg"></div>
          <span class="text-xl font-bold text-gray-900">Brand</span>
        </a>
      </div>

      <!-- 桌面端导航链接 -->
      <div class="hidden md:flex items-center space-x-8">
        <a href="#" class="text-gray-600 hover:text-gray-900 transition-colors">
          首页
        </a>
        <a href="#" class="text-gray-600 hover:text-gray-900 transition-colors">
          产品
        </a>
        <a href="#" class="text-gray-600 hover:text-gray-900 transition-colors">
          关于
        </a>
        <a href="#" class="text-gray-600 hover:text-gray-900 transition-colors">
          联系
        </a>
      </div>

      <!-- 右侧按钮 -->
      <div class="flex items-center space-x-4">
        <button class="hidden sm:block text-gray-600 hover:text-gray-900">
          登录
        </button>
        <button
          class="bg-blue-500 text-white px-4 py-2 rounded-lg 
                       hover:bg-blue-600 transition-colors"
        >
          注册
        </button>
        <!-- 移动端菜单按钮 -->
        <button class="md:hidden p-2 text-gray-600 hover:text-gray-900">
          <svg
            class="w-6 h-6"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M4 6h16M4 12h16M4 18h16"
            />
          </svg>
        </button>
      </div>
    </div>
  </div>
</nav>

5.2 卡片组件 ​

html
<!-- 基础卡片 -->
<div
  class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden
            hover:shadow-md transition-shadow"
>
  <img src="/image.jpg" alt="" class="w-full h-48 object-cover" />
  <div class="p-6">
    <h3 class="text-lg font-semibold text-gray-900 mb-2">卡片标题</h3>
    <p class="text-gray-600 text-sm mb-4">
      这是一段卡片描述文字，简要说明卡片内容。
    </p>
    <div class="flex items-center justify-between">
      <span class="text-blue-500 font-semibold">¥99.00</span>
      <button
        class="bg-blue-500 text-white px-4 py-2 rounded-lg text-sm
                     hover:bg-blue-600 transition-colors"
      >
        立即购买
      </button>
    </div>
  </div>
</div>

<!-- 卡片网格 -->
<div
  class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
>
  <!-- 卡片重复... -->
</div>

5.3 表单组件 ​

html
<!-- 登录表单 -->
<form class="max-w-md mx-auto space-y-6">
  <!-- 输入框 -->
  <div>
    <label class="block text-sm font-medium text-gray-700 mb-2">
      邮箱地址
    </label>
    <input
      type="email"
      class="w-full px-4 py-3 border border-gray-300 rounded-lg
                  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
                  placeholder:text-gray-400"
      placeholder="请输入邮箱"
    />
  </div>

  <!-- 密码框 -->
  <div>
    <label class="block text-sm font-medium text-gray-700 mb-2"> 密码 </label>
    <div class="relative">
      <input
        type="password"
        class="w-full px-4 py-3 border border-gray-300 rounded-lg
                    focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
        placeholder="请输入密码"
      />
      <button
        type="button"
        class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
      >
        <svg
          class="w-5 h-5"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
          />
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
          />
        </svg>
      </button>
    </div>
  </div>

  <!-- 复选框 -->
  <div class="flex items-center">
    <input
      type="checkbox"
      id="remember"
      class="w-4 h-4 text-blue-500 border-gray-300 rounded focus:ring-blue-500"
    />
    <label for="remember" class="ml-2 text-sm text-gray-600">记住我</label>
  </div>

  <!-- 提交按钮 -->
  <button
    type="submit"
    class="w-full bg-blue-500 text-white py-3 rounded-lg font-medium
                 hover:bg-blue-600 active:bg-blue-700
                 disabled:bg-gray-300 disabled:cursor-not-allowed
                 transition-colors"
  >
    登录
  </button>

  <!-- 其他登录方式 -->
  <div class="relative">
    <div class="absolute inset-0 flex items-center">
      <div class="w-full border-t border-gray-200"></div>
    </div>
    <div class="relative flex justify-center text-sm">
      <span class="px-4 bg-white text-gray-500">或使用以下方式登录</span>
    </div>
  </div>

  <div class="grid grid-cols-2 gap-4">
    <button
      class="flex items-center justify-center px-4 py-3 border border-gray-300 
                   rounded-lg hover:bg-gray-50 transition-colors"
    >
      <svg class="w-5 h-5 mr-2" viewBox="0 0 24 24">
        <!-- 微信图标 -->
      </svg>
      微信登录
    </button>
    <button
      class="flex items-center justify-center px-4 py-3 border border-gray-300 
                   rounded-lg hover:bg-gray-50 transition-colors"
    >
      <svg class="w-5 h-5 mr-2" viewBox="0 0 24 24">
        <!-- QQ 图标 -->
      </svg>
      QQ 登录
    </button>
  </div>
</form>

5.4 按钮组件 ​

html
<!-- 按钮变体 -->
<div class="flex flex-wrap gap-4">
  <!-- 主要按钮 -->
  <button
    class="px-6 py-2.5 bg-blue-500 text-white rounded-lg font-medium
                 hover:bg-blue-600 active:bg-blue-700
                 focus:outline-none focus:ring-2 focus:ring-blue-300
                 transition-colors"
  >
    主要按钮
  </button>

  <!-- 次要按钮 -->
  <button
    class="px-6 py-2.5 bg-gray-100 text-gray-700 rounded-lg font-medium
                 hover:bg-gray-200 active:bg-gray-300
                 focus:outline-none focus:ring-2 focus:ring-gray-300
                 transition-colors"
  >
    次要按钮
  </button>

  <!-- 轮廓按钮 -->
  <button
    class="px-6 py-2.5 border-2 border-blue-500 text-blue-500 rounded-lg font-medium
                 hover:bg-blue-50 active:bg-blue-100
                 focus:outline-none focus:ring-2 focus:ring-blue-300
                 transition-colors"
  >
    轮廓按钮
  </button>

  <!-- 文字按钮 -->
  <button
    class="px-6 py-2.5 text-blue-500 rounded-lg font-medium
                 hover:bg-blue-50 active:bg-blue-100
                 focus:outline-none focus:ring-2 focus:ring-blue-300
                 transition-colors"
  >
    文字按钮
  </button>

  <!-- 危险按钮 -->
  <button
    class="px-6 py-2.5 bg-red-500 text-white rounded-lg font-medium
                 hover:bg-red-600 active:bg-red-700
                 focus:outline-none focus:ring-2 focus:ring-red-300
                 transition-colors"
  >
    危险按钮
  </button>

  <!-- 禁用按钮 -->
  <button
    disabled
    class="px-6 py-2.5 bg-gray-300 text-gray-500 rounded-lg font-medium
                 cursor-not-allowed"
  >
    禁用按钮
  </button>
</div>

<!-- 按钮尺寸 -->
<div class="flex flex-wrap items-center gap-4 mt-4">
  <button class="px-3 py-1.5 text-sm bg-blue-500 text-white rounded-md">
    小按钮
  </button>
  <button class="px-4 py-2 bg-blue-500 text-white rounded-lg">默认按钮</button>
  <button class="px-6 py-3 text-lg bg-blue-500 text-white rounded-lg">
    大按钮
  </button>
</div>

<!-- 带图标按钮 -->
<div class="flex flex-wrap gap-4 mt-4">
  <button
    class="flex items-center px-4 py-2 bg-blue-500 text-white rounded-lg
                 hover:bg-blue-600 transition-colors"
  >
    <svg
      class="w-5 h-5 mr-2"
      fill="none"
      stroke="currentColor"
      viewBox="0 0 24 24"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M12 4v16m8-8H4"
      />
    </svg>
    新建
  </button>

  <button
    class="flex items-center px-4 py-2 border border-gray-300 rounded-lg
                 hover:bg-gray-50 transition-colors"
  >
    <svg
      class="w-5 h-5 mr-2"
      fill="none"
      stroke="currentColor"
      viewBox="0 0 24 24"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
      />
    </svg>
    下载
  </button>

  <!-- 纯图标按钮 -->
  <button
    class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg
                 transition-colors"
  >
    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
      />
    </svg>
  </button>
</div>

5.5 模态框组件 ​

html
<!-- 模态框遮罩层 -->
<div
  class="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50"
>
  <!-- 模态框主体 -->
  <div
    class="bg-white rounded-2xl shadow-xl max-w-lg w-full max-h-[90vh] overflow-hidden"
  >
    <!-- 头部 -->
    <div class="flex items-center justify-between p-6 border-b border-gray-100">
      <h3 class="text-xl font-semibold text-gray-900">确认删除</h3>
      <button
        class="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg
                     transition-colors"
      >
        <svg
          class="w-5 h-5"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M6 18L18 6M6 6l12 12"
          />
        </svg>
      </button>
    </div>

    <!-- 内容 -->
    <div class="p-6">
      <p class="text-gray-600">
        您确定要删除这个项目吗？此操作无法撤销，所有相关数据将被永久删除。
      </p>
    </div>

    <!-- 底部按钮 -->
    <div
      class="flex items-center justify-end gap-3 p-6 border-t border-gray-100 bg-gray-50"
    >
      <button
        class="px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors"
      >
        取消
      </button>
      <button
        class="px-4 py-2 bg-red-500 text-white rounded-lg
                     hover:bg-red-600 transition-colors"
      >
        确认删除
      </button>
    </div>
  </div>
</div>

5.6 表格组件 ​

html
<!-- 响应式表格 -->
<div class="overflow-x-auto rounded-lg border border-gray-200">
  <table class="w-full text-sm">
    <thead class="bg-gray-50 border-b border-gray-200">
      <tr>
        <th class="px-6 py-4 text-left font-semibold text-gray-900">姓名</th>
        <th class="px-6 py-4 text-left font-semibold text-gray-900">邮箱</th>
        <th class="px-6 py-4 text-left font-semibold text-gray-900">角色</th>
        <th class="px-6 py-4 text-left font-semibold text-gray-900">状态</th>
        <th class="px-6 py-4 text-right font-semibold text-gray-900">操作</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-gray-100">
      <tr class="hover:bg-gray-50 transition-colors">
        <td class="px-6 py-4">
          <div class="flex items-center">
            <img src="/avatar.jpg" alt="" class="w-10 h-10 rounded-full mr-3" />
            <div>
              <div class="font-medium text-gray-900">张三</div>
              <div class="text-gray-500 text-xs">ID: 10001</div>
            </div>
          </div>
        </td>
        <td class="px-6 py-4 text-gray-600">zhangsan@example.com</td>
        <td class="px-6 py-4">
          <span
            class="px-2 py-1 bg-blue-100 text-blue-700 rounded-full text-xs font-medium"
          >
            管理员
          </span>
        </td>
        <td class="px-6 py-4">
          <span class="flex items-center text-green-600">
            <span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
            在线
          </span>
        </td>
        <td class="px-6 py-4 text-right">
          <button class="text-blue-500 hover:text-blue-700 mr-3">编辑</button>
          <button class="text-red-500 hover:text-red-700">删除</button>
        </td>
      </tr>
      <!-- 更多行... -->
    </tbody>
  </table>
</div>

5.7 标签页组件 ​

html
<!-- 标签页 -->
<div class="border-b border-gray-200">
  <nav class="flex space-x-8">
    <button
      class="py-4 px-1 border-b-2 border-blue-500 text-blue-500 font-medium"
    >
      全部
    </button>
    <button
      class="py-4 px-1 border-b-2 border-transparent text-gray-500 
                   hover:text-gray-700 hover:border-gray-300 transition-colors"
    >
      待处理
    </button>
    <button
      class="py-4 px-1 border-b-2 border-transparent text-gray-500 
                   hover:text-gray-700 hover:border-gray-300 transition-colors"
    >
      已完成
    </button>
    <button
      class="py-4 px-1 border-b-2 border-transparent text-gray-500 
                   hover:text-gray-700 hover:border-gray-300 transition-colors"
    >
      已归档
    </button>
  </nav>
</div>

<!-- 胶囊标签页 -->
<div class="inline-flex bg-gray-100 rounded-lg p-1">
  <button
    class="px-4 py-2 bg-white text-gray-900 rounded-md shadow-sm font-medium"
  >
    日
  </button>
  <button
    class="px-4 py-2 text-gray-500 hover:text-gray-700 rounded-md font-medium
                 transition-colors"
  >
    周
  </button>
  <button
    class="px-4 py-2 text-gray-500 hover:text-gray-700 rounded-md font-medium
                 transition-colors"
  >
    月
  </button>
  <button
    class="px-4 py-2 text-gray-500 hover:text-gray-700 rounded-md font-medium
                 transition-colors"
  >
    年
  </button>
</div>

5.8 徽章与标签 ​

html
<!-- 状态徽章 -->
<div class="flex flex-wrap gap-2">
  <span
    class="px-2.5 py-0.5 bg-green-100 text-green-800 rounded-full text-xs font-medium"
  >
    成功
  </span>
  <span
    class="px-2.5 py-0.5 bg-yellow-100 text-yellow-800 rounded-full text-xs font-medium"
  >
    警告
  </span>
  <span
    class="px-2.5 py-0.5 bg-red-100 text-red-800 rounded-full text-xs font-medium"
  >
    错误
  </span>
  <span
    class="px-2.5 py-0.5 bg-blue-100 text-blue-800 rounded-full text-xs font-medium"
  >
    信息
  </span>
  <span
    class="px-2.5 py-0.5 bg-gray-100 text-gray-800 rounded-full text-xs font-medium"
  >
    默认
  </span>
</div>

<!-- 带圆点徽章 -->
<div class="flex flex-wrap gap-3">
  <span class="inline-flex items-center">
    <span class="w-2 h-2 bg-green-500 rounded-full mr-1.5"></span>
    <span class="text-sm text-gray-600">在线</span>
  </span>
  <span class="inline-flex items-center">
    <span class="w-2 h-2 bg-yellow-500 rounded-full mr-1.5"></span>
    <span class="text-sm text-gray-600">忙碌</span>
  </span>
  <span class="inline-flex items-center">
    <span class="w-2 h-2 bg-gray-400 rounded-full mr-1.5"></span>
    <span class="text-sm text-gray-600">离线</span>
  </span>
</div>

<!-- 数字徽章 -->
<button class="relative">
  <svg
    class="w-6 h-6 text-gray-500"
    fill="none"
    stroke="currentColor"
    viewBox="0 0 24 24"
  >
    <path
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="2"
      d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
    />
  </svg>
  <span
    class="absolute -top-1 -right-1 w-5 h-5 bg-red-500 text-white text-xs 
               rounded-full flex items-center justify-center font-medium"
  >
    3
  </span>
</button>

5.9 骨架屏加载 ​

html
<!-- 卡片骨架屏 -->
<div
  class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 animate-pulse"
>
  <div class="w-full h-48 bg-gray-200 rounded-lg mb-4"></div>
  <div class="h-4 bg-gray-200 rounded w-3/4 mb-2"></div>
  <div class="h-4 bg-gray-200 rounded w-1/2 mb-4"></div>
  <div class="flex items-center justify-between">
    <div class="h-6 bg-gray-200 rounded w-20"></div>
    <div class="h-10 bg-gray-200 rounded w-24"></div>
  </div>
</div>

<!-- 列表骨架屏 -->
<div class="space-y-4">
  <div class="flex items-center space-x-4 animate-pulse">
    <div class="w-12 h-12 bg-gray-200 rounded-full"></div>
    <div class="flex-1 space-y-2">
      <div class="h-4 bg-gray-200 rounded w-1/4"></div>
      <div class="h-3 bg-gray-200 rounded w-1/2"></div>
    </div>
  </div>
  <div class="flex items-center space-x-4 animate-pulse">
    <div class="w-12 h-12 bg-gray-200 rounded-full"></div>
    <div class="flex-1 space-y-2">
      <div class="h-4 bg-gray-200 rounded w-1/3"></div>
      <div class="h-3 bg-gray-200 rounded w-2/3"></div>
    </div>
  </div>
</div>

5.10 空状态 ​

html
<!-- 空状态 -->
<div class="text-center py-16">
  <div class="w-24 h-24 mx-auto mb-6 text-gray-300">
    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="1.5"
        d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
      />
    </svg>
  </div>
  <h3 class="text-lg font-medium text-gray-900 mb-2">暂无数据</h3>
  <p class="text-gray-500 mb-6">您还没有创建任何内容，点击下方按钮开始创建</p>
  <button
    class="inline-flex items-center px-4 py-2 bg-blue-500 text-white rounded-lg
                 hover:bg-blue-600 transition-colors"
  >
    <svg
      class="w-5 h-5 mr-2"
      fill="none"
      stroke="currentColor"
      viewBox="0 0 24 24"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M12 4v16m8-8H4"
      />
    </svg>
    新建项目
  </button>
</div>

5.11 分页组件 ​

html
<!-- 分页 -->
<nav class="flex items-center justify-center space-x-1">
  <button
    class="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg
                 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
    disabled
  >
    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M15 19l-7-7 7-7"
      />
    </svg>
  </button>

  <button
    class="w-10 h-10 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
  >
    1
  </button>
  <button class="w-10 h-10 bg-blue-500 text-white rounded-lg font-medium">
    2
  </button>
  <button
    class="w-10 h-10 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
  >
    3
  </button>
  <span class="px-2 text-gray-400">...</span>
  <button
    class="w-10 h-10 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
  >
    10
  </button>

  <button
    class="p-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
  >
    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M9 5l7 7-7 7"
      />
    </svg>
  </button>
</nav>

5.12 响应式图片画廊 ​

html
<!-- 图片画廊 -->
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
  <div class="relative aspect-square overflow-hidden rounded-lg group">
    <img
      src="/image1.jpg"
      alt=""
      class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"
    />
    <div
      class="absolute inset-0 bg-black/0 group-hover:bg-black/30 transition-colors"
    >
      <div
        class="absolute bottom-0 left-0 right-0 p-4 
                  translate-y-full group-hover:translate-y-0 transition-transform"
      >
        <p class="text-white text-sm font-medium">图片标题</p>
      </div>
    </div>
  </div>
  <!-- 更多图片... -->
</div>

六、进阶技巧 ​

6.1 使用 @apply 抽取组件类 ​

当重复使用相同样式组合时，可以使用 @apply 抽取：

css
@layer components {
  .btn {
    @apply px-4 py-2 rounded-lg font-medium transition-colors;
  }

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

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

  .btn-outline {
    @apply border-2 border-blue-500 text-blue-500 hover:bg-blue-50;
  }

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

  .input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg
           focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
  }
}

6.2 自定义配置扩展 ​

javascript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      // 自定义颜色
      colors: {
        brand: {
          50: '#f0f9ff',
          100: '#e0f2fe',
          500: '#0ea5e9',
          600: '#0284c7',
          700: '#0369a1'
        }
      },
      // 自定义字体
      fontFamily: {
        sans: ['Inter var', 'system-ui', 'sans-serif'],
        mono: ['JetBrains Mono', 'monospace']
      },
      // 自定义间距
      spacing: {
        18: '4.5rem',
        88: '22rem'
      },
      // 自定义动画
      animation: {
        'fade-in': 'fadeIn 0.3s ease-in-out',
        'slide-up': 'slideUp 0.3s ease-out'
      },
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' }
        },
        slideUp: {
          '0%': { transform: 'translateY(10px)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' }
        }
      }
    }
  }
}

6.3 暗黑模式 ​

html
<!-- 使用 class 策略 -->
<div class="bg-white dark:bg-gray-900">
  <h1 class="text-gray-900 dark:text-white">标题</h1>
  <p class="text-gray-600 dark:text-gray-300">内容</p>
</div>
javascript
// tailwind.config.js
module.exports = {
  darkMode: 'class' // 或 'media'
}

6.4 任意值语法 ​

当需要使用 Tailwind 未预设的值时：

html
<!-- 任意宽度 -->
<div class="w-[137px]">自定义宽度</div>

<!-- 任意颜色 -->
<div class="bg-[#1da1f2]">自定义颜色</div>

<!-- 任意 CSS 变量 -->
<div class="bg-[var(--my-color)]">CSS 变量</div>

<!-- 复杂选择器 -->
<div class="[&>*]:mb-4">所有子元素下边距</div>
<div class="[&:nth-child(3)]:bg-blue-500">第三个子元素</div>

七、最佳实践 ​

7.1 类名组织顺序 ​

建议按照一致顺序组织类名，便于阅读和维护：

html
<!-- 推荐顺序 -->
<div
  class="
  /* 布局 */
  flex items-center justify-between
  
  /* 尺寸 */
  w-full h-16 max-w-7xl
  
  /* 间距 */
  px-4 py-2 mx-auto
  
  /* 边框 */
  border-b border-gray-200
  
  /* 背景 */
  bg-white
  
  /* 文字 */
  text-gray-900 font-medium
  
  /* 其他 */
  shadow-sm
  
  /* 状态 */
  hover:shadow-md
  
  /* 响应式 */
  md:px-6 lg:px-8
"
></div>

7.2 避免过度使用 @apply ​

css
/* 不推荐：过度使用 @apply */
.card {
  @apply bg-white rounded-lg shadow-sm border border-gray-200 p-6
         hover:shadow-md transition-shadow cursor-pointer;
}

/* 推荐：在 HTML 中直接使用工具类 */
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6
            hover:shadow-md transition-shadow cursor-pointer">

7.3 使用语义化组件 ​

html
<!-- 使用组件抽象复杂 UI -->
<template>
  <Card>
    <CardHeader>
      <CardTitle>标题</CardTitle>
      <CardDescription>描述</CardDescription>
    </CardHeader>
    <CardContent> 内容 </CardContent>
    <CardFooter>
      <button>操作</button>
    </CardFooter>
  </Card>
</template>

7.4 响应式设计原则 ​

html
<!-- 移动优先：从基础样式开始，逐步增强 -->
<div
  class="
  text-sm           /* 移动端小字体 */
  md:text-base      /* 平板正常字体 */
  lg:text-lg        /* 桌面大字体 */
  
  grid              /* 移动端网格 */
  grid-cols-1       /* 单列 */
  md:grid-cols-2    /* 平板两列 */
  lg:grid-cols-3    /* 桌面三列 */
  xl:grid-cols-4    /* 大屏四列 */
"
></div>

八、常用插件 ​

8.1 官方插件 ​

bash
# 表单样式
npm install @tailwindcss/forms

# 排版样式
npm install @tailwindcss/typography

# 容器查询
npm install @tailwindcss/container-queries

# 宽高比
npm install @tailwindcss/aspect-ratio
javascript
// tailwind.config.js
module.exports = {
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/container-queries'),
    require('@tailwindcss/aspect-ratio')
  ]
}

8.2 使用示例 ​

html
<!-- @tailwindcss/forms：美化表单 -->
<input type="email" class="form-input rounded-lg" />

<!-- @tailwindcss/typography：排版样式 -->
<article class="prose prose-lg prose-blue max-w-none">
  <h1>文章标题</h1>
  <p>文章内容...</p>
</article>

<!-- @tailwindcss/container-queries：容器查询 -->
<div class="@container">
  <div class="@lg:grid-cols-2">容器响应式布局</div>
</div>

<!-- @tailwindcss/aspect-ratio：宽高比 -->
<div class="aspect-w-16 aspect-h-9">
  <iframe src="..."></iframe>
</div>

九、调试技巧 ​

9.1 VS Code 插件推荐 ​

  • Tailwind CSS IntelliSense：类名自动补全、悬停预览
  • Tailwind CSS Fold：折叠类名提升可读性
  • Inline Fold：将 class 属性折叠显示

9.2 浏览器开发工具 ​

javascript
// 在控制台查看当前使用的 Tailwind 类
document.querySelectorAll('[class*="bg-"]')

9.3 常见问题排查 ​

问题1：样式不生效

  • 检查 content 配置是否包含目标文件
  • 确认是否正确引入 CSS 文件
  • 检查是否有其他 CSS 覆盖

问题2：生产环境样式丢失

  • 确保 content 配置正确
  • 检查是否使用了动态类名（不支持）
  • 使用完整类名而非字符串拼接
html
<!-- 不支持：动态类名 -->
<div class="text-{{ color }}-500">
  <!-- 支持：完整类名 -->
  <div class="{{ color === 'red' ? 'text-red-500' : 'text-blue-500' }}"></div>
</div>

十、总结 ​

Tailwind CSS 是一个强大且灵活的 CSS 框架，掌握其核心概念和常用模式可以极大提升开发效率。关键要点：

  1. 理解工具类优先理念：直接在 HTML 中使用工具类
  2. 熟悉设计系统：间距、颜色、断点等内置系统
  3. 善用响应式前缀：移动优先的响应式设计
  4. 合理使用状态变体：hover、focus、active 等
  5. 适度抽象组件：避免重复，但不过度抽象
  6. 配置自定义主题：根据项目需求扩展默认配置

持续实践和探索，你会发现 Tailwind CSS 能让前端开发变得更加高效和愉悦！

基于 VitePress 的本地知识库

Copyright © 2026