Tailwind CSS 详细使用手册

🎨 核心概念

Tailwind 是一个实用类优先的 CSS 框架，通过组合原子类实现样式设计

工作原理

<!-- 传统CSS -->
<style>
  .btn {
    padding: 8px 16px;
    background: blue;
    color: white;
    border-radius: 4px;
  }
</style>
<button class="btn">按钮</button>

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

📦 安装

# 使用 npm
npm install -D tailwindcss
npx tailwindcss init

# 配置 tailwind.config.js
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

# 在CSS中引入
@tailwind base;
@tailwind components;
@tailwind utilities;

📐 布局系统

Flexbox

<div class="flex"> 
  <!-- 默认行排列 -->
  <div class="flex-1">Item 1</div>
  <div class="flex-1">Item 2</div>
</div>

<div class="flex flex-col">
  <!-- 列排列 -->
  <div>Top</div>
  <div>Bottom</div>
</div>

<!-- 对齐方式 -->
<div class="flex justify-center items-center">
  <div>居中内容</div>
</div>

Grid

<div class="grid grid-cols-3 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<!-- 响应式网格 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
  <!-- 内容 -->
</div>

定位

<div class="relative h-32 w-32">
  <div class="absolute top-0 left-0">左上角</div>
  <div class="absolute bottom-0 right-0">右下角</div>
</div>

<!-- 固定定位 -->
<div class="fixed top-4 right-4">固定按钮</div>

📏 盒模型与间距

内边距 (Padding)

<div class="p-4">所有方向</div>
<div class="px-4 py-2">水平+垂直</div>
<div class="pt-8 pr-4 pb-2 pl-6">单独设置</div>

类名	值 (rem)
p-0	0
p-1	0.25
p-2	0.5
...	...
p-64	16

外边距 (Margin)

<div class="mt-4">上边距</div>
<div class="mr-auto">右侧自动边距</div>
<div class="-mt-8">负边距</div>

尺寸 (Width/Height)

<div class="w-full h-screen">全宽 + 视口高度</div>
<div class="w-64 h-32">固定尺寸</div>
<div class="min-w-min max-w-3xl">最小/最大宽度</div>

🎨 颜色系统

文本颜色

<p class="text-red-500">红色文本</p>
<p class="text-blue-600 hover:text-blue-800">悬停变色</p>
<p class="text-gray-900 dark:text-gray-100">深色模式适配</p>

背景颜色

<div class="bg-green-200">浅绿色背景</div>
<div class="bg-gradient-to-r from-purple-400 to-pink-600">渐变背景</div>

边框颜色

<div class="border border-yellow-300">黄色边框</div>

颜色等级

Tailwind 提供 9 级颜色深浅（50-900）：

• 50: 最浅
• 100-400: 浅色系
• 500: 基准色
• 600-900: 深色系

✏️ 排版系统

字体大小

<p class="text-xs">超小文本</p>
<p class="text-base">基础文本</p>
<p class="text-xl">大标题</p>
<h1 class="text-4xl font-bold">超大标题</h1>

字体粗细

<p class="font-thin">细体</p>
<p class="font-normal">常规</p>
<p class="font-bold">粗体</p>
<p class="font-black">特粗</p>

文本修饰

<p class="underline">下划线</p>
<p class="line-through">删除线</p>
<p class="italic">斜体</p>
<p class="uppercase tracking-wide">大写+字母间距</p>

🖼️ 背景与边框

背景

<div class="bg-cover bg-center bg-no-repeat" 
     style="background-image: url('...')">
</div>

<div class="bg-opacity-75 bg-blue-500">75% 不透明度</div>

边框

<div class="border">基础边框</div>
<div class="border-2 border-dashed border-red-500">虚线边框</div>
<div class="rounded-lg">中等圆角</div>
<div class="rounded-full">完全圆形</div>

💫 变换与动画

变换

<button class="transform hover:scale-105 transition">
  悬停缩放
</button>

<div class="rotate-45">旋转45度</div>

过渡

<button class="transition duration-300 ease-in-out hover:bg-blue-700">
  平滑过渡
</button>

动画

<button class="animate-bounce">弹跳动画</button>
<button class="animate-pulse">脉冲动画</button>

💡 状态与交互

悬停状态

<button class="bg-blue-500 hover:bg-blue-700">
  悬停变色
</button>

焦点状态

<input class="focus:ring-2 focus:ring-blue-500 focus:outline-none">

禁用状态

<button disabled class="disabled:opacity-50">
  禁用按钮
</button>

📱 响应式设计

断点系统

前缀	最小宽度
sm	640px
md	768px
lg	1024px
xl	1280px
2xl	1536px

响应式示例

<div class="w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24">
  <!-- 响应式尺寸 -->
</div>

<div class="grid grid-cols-1 md:grid-cols-3">
  <!-- 响应式网格 -->
</div>

🌙 深色模式

<!-- 配置 tailwind.config.js -->
module.exports = {
  darkMode: 'class', // 或 'media'
  // ...
}

<!-- 使用示例 -->
<div class="bg-white dark:bg-gray-800">
  <p class="text-gray-900 dark:text-white">文本</p>
</div>

🧩 高级特性

自定义类

@layer components {
  .btn {
    @apply px-4 py-2 rounded font-semibold;
  }
  .btn-blue {
    @apply bg-blue-500 text-white hover:bg-blue-700;
  }
}

自定义配置

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand': '#3a86ff',
      },
      spacing: {
        '128': '32rem',
      }
    }
  }
}

伪元素

<div class="before:content-['★'] before:text-yellow-400">
  带星号的内容
</div>

🛠 实用工具类

可见性

<div class="invisible">不可见但占位</div>
<div class="hidden">完全隐藏</div>

溢出处理

<div class="overflow-auto">自动滚动</div>
<div class="truncate">超长文本截断</div>

光标

<button class="cursor-pointer">指针</button>
<div class="cursor-move">可移动</div>

Z-index

<div class="z-10">上层元素</div>
<div class="z-0">底层元素</div>

🚀 最佳实践

类组合模式

<button class="btn btn-blue"> <!-- 自定义组件类 -->
  提交
</button>

响应式优化

<!-- 移动设备优先 -->
<div class="p-4 md:p-8 lg:p-12">
  响应式内边距
</div>

性能优化

<!-- 使用 purge 配置移除未使用的样式 -->
// tailwind.config.js
module.exports = {
  purge: ['./src/**/*.html'],
}

工具类提取

/* 提取重复模式 */
.card {
  @apply bg-white shadow-md rounded-lg p-6;
}

📚 学习资源

• 官方文档
• Tailwind Play - 在线编辑器
• Tailwind UI - 官方组件库
• Awesome Tailwind

提示：本手册覆盖 Tailwind v3.x 核心功能，实际使用时请查阅官方文档获取最新特性