【超完整】Tailwind CSS 实战教程

Tailwind CSS 实战教程

目录

1. [什么是 Tailwind CSS](#什么是 Tailwind CSS)
2. 工作流原理
3. 配置详解
4. 快速开始
5. 基础用法
6. 常见布局案例
7. 组件样式案例
8. 响应式设计
9. 动画与过渡
10. 实用技巧

---

什么是 Tailwind CSS

Tailwind CSS 是一个实用优先（utility-first）的 CSS 框架，它提供了大量的预定义类名，让你可以直接在 HTML 中快速构建自定义设计。

特点：

• 原子化 CSS：每个类只做一件事
• 高度可定制：通过配置文件轻松定制主题
• 性能优秀：只打包你用到的样式
• 开发效率高：无需写 CSS，直接组合类名

---

工作流原理

🔄 Tailwind CSS 工作流程图

┌─────────────────┐    ┌──────────────────┐    ┌─────────────────┐
│   开发阶段      │    │   构建阶段       │    │   生产环境      │
└─────────┬───────┘    └──────────┬───────┘    └─────────┬───────┘
          │                       │                       │
          ▼                       ▼                       ▼
┌─────────────────┐    ┌──────────────────┐    ┌─────────────────┐
│  HTML 文件      │    │  扫描 HTML 类名  │    │  精简的 CSS     │
│  ┌───────────┐  │    │  ┌───────────┐  │    │  ┌───────────┐  │
│  │class="flex│  │───▶│  │ 解析 flex  │  │───▶│  │.flex{...} │  │
│  │     text-  │  │    │  │ 解析 text  │  │    │  │.text-lg{} │  │
│  │     lg bg-  │  │    │  │ 解析 bg    │  │    │  │.bg-blue{}│  │
│  │     blue"   │  │    │  │ 等...     │  │    │  │等...     │  │
│  └───────────┘  │    │  └───────────┘  │    │  └───────────┘  │
└─────────────────┘    └──────────────────┘    └─────────────────┘
          │                       │                       │
          │                       ▼                       │
          │              ┌──────────────────┐            │
          │              │  生成完整 CSS    │            │
          │              │  (包含所有工具类)│            │
          │              └──────────────────┘            │
          │                       │                       │
          │                       ▼                       │
          │              ┌──────────────────┐            │
          │              │  PurgeCSS 移除   │            │
          │              │  未使用的样式    │            │
          │              └──────────────────┘            │
          │                       │                       │
          ▼                       ▼                       ▼
┌─────────────────┐    ┌──────────────────┐    ┌─────────────────┐
│  实时热重载     │    │  优化构建        │    │  最小化 CSS      │
│  (开发模式)     │    │  (生产模式)      │    │  (生产环境)      │
└─────────────────┘    └──────────────────┘    └─────────────────┘

🏗️ 构建过程详解

HTML 源代码
├── <div class="flex items-center justify-between p-4">
├── <h1 class="text-2xl font-bold text-blue-600">
├── <button class="bg-blue-500 hover:bg-blue-600 px-4 py-2 rounded">
└── <span class="text-sm text-gray-500">

            │
            ▼ (Tailwind 扫描)

解析的工具类
├── flex → display: flex
├── items-center → align-items: center  
├── justify-between → justify-content: space-between
├── p-4 → padding: 1rem
├── text-2xl → font-size: 1.5rem
├── font-bold → font-weight: 700
├── text-blue-600 → color: #2563eb
├── bg-blue-500 → background-color: #3b82f6
├── hover:bg-blue-600 → :hover { background-color: #2563eb }
├── px-4 → padding-left: 1rem; padding-right: 1rem
├── py-2 → padding-top: 0.5rem; padding-bottom: 0.5rem
├── rounded → border-radius: 0.25rem
├── text-sm → font-size: 0.875rem
└── text-gray-500 → color: #6b7280

            │
            ▼ (JIT 编译)

生成的 CSS
```css
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.p-4 { padding: 1rem; }
.text-2xl { font-size: 1.5rem; }
.font-bold { font-weight: 700; }
.text-blue-600 { color: #2563eb; }
.bg-blue-500 { background-color: #3b82f6; }
.hover\:bg-blue-600:hover { background-color: #2563eb; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.rounded { border-radius: 0.25rem; }
.text-sm { font-size: 0.875rem; }
.text-gray-500 { color: #6b7280; }

🎯 核心原理

1. 扫描阶段：Tailwind 扫描指定的文件内容，找出所有使用的工具类
2. 生成阶段：只生成项目中实际使用的 CSS 规则
3. 优化阶段：移除未使用的样式，确保最小化输出
4. 缓存机制：开发时使用 JIT（Just-In-Time）编译，实时生成样式

---

配置详解

📁 配置文件结构

// tailwind.config.js
module.exports = {
  // 1. 内容扫描配置
  content: [
    './index.html',
    './src/**/*.{vue,js,ts,jsx,tsx}',
    './components/**/*.{vue,js}',
  ],
  
  // 2. 主题配置
  theme: {
    // 扩展默认配置
    extend: {
      // 自定义颜色
      colors: {
        primary: {
          50: '#eff6ff',
          500: '#3b82f6',
          600: '#2563eb',
          700: '#1d4ed8',
        },
        brand: {
          light: '#f3f4f6',
          main: '#1f2937',
          dark: '#111827',
        }
      },
      
      // 自定义字体
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
        mono: ['Fira Code', 'monospace'],
      },
      
      // 自定义间距
      spacing: {
        '72': '18rem',
        '84': '21rem',
        '96': '24rem',
      },
      
      // 自定义断点
      screens: {
        'xs': '475px',
        '3xl': '1600px',
      },
      
      // 自定义阴影
      boxShadow: {
        'custom': '0 10px 30px rgba(0, 0, 0, 0.1)',
        'inner-custom': 'inset 0 2px 4px rgba(0, 0, 0, 0.06)',
      },
      
      // 自定义动画
      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' },
        },
      },
    },
  },
  
  // 3. 插件配置
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio'),
  ],
  
  // 4. 深色模式配置
  darkMode: 'class', // 或 'media'
  
  // 5. 前缀配置
  prefix: 'tw-',
  
  // 6. 重要标记
  important: true,
}

🔧 各配置项详解

content 配置

content: [
  // 字符串模式 - 扫描特定文件
  './index.html',
  
  // Glob 模式 - 扫描目录下的所有匹配文件
  './src/**/*.{vue,js,ts,jsx,tsx}',
  
  // 排除特定文件
  '!./src/excluded/**/*.{js,ts}',
  
  // 对象模式 - 高级配置
  {
    files: ['./src/**/*.{vue,js}'],
    // 相对路径的根目录
    relative: true,
    // 提取类名的函数
    extract: { content: true },
  }
]

theme 配置

theme: {
  // 屏幕尺寸断点
  screens: {
    'sm': '640px',
    'md': '768px',
    'lg': '1024px',
    'xl': '1280px',
    '2xl': '1536px',
  },
  
  // 颜色系统
  colors: {
    // 继承默认颜色
    ...defaultTheme.colors,
    
    // 自定义颜色 - 支持嵌套对象
    brand: {
      50: '#f0f9ff',
      100: '#e0f2fe',
      200: '#bae6fd',
      300: '#7dd3fc',
      400: '#38bdf8',
      500: '#0ea5e9',  // 主色
      600: '#0284c7',
      700: '#0369a1',
      800: '#075985',
      900: '#0c4a6e',
    }
  },
  
  // 字体族
  fontFamily: {
    // 自定义字体族
    'display': ['Inter', 'system-ui', 'sans-serif'],
    'body': ['Open Sans', 'system-ui', 'sans-serif'],
  },
  
  // 间距系统
  spacing: {
    // 基础间距是 4px
    '0': '0px',
    '1': '0.25rem',  // 4px
    '2': '0.5rem',   // 8px
    '3': '0.75rem',  // 12px
    '4': '1rem',     // 16px
    '5': '1.25rem',  // 20px
    // 自定义间距
    '18': '4.5rem',
    '88': '22rem',
  },
  
  // 边框圆角
  borderRadius: {
    'none': '0px',
    'sm': '0.125rem',
    'DEFAULT': '0.25rem',
    'md': '0.375rem',
    'lg': '0.5rem',
    'xl': '0.75rem',
    '2xl': '1rem',
    'full': '9999px',
    // 自定义圆角
    '3xl': '1.5rem',
  }
}

plugins 配置

plugins: [
  // 表单插件 - 美化表单元素
  require('@tailwindcss/forms'),
  
  // 排版插件 - 文章样式
  require('@tailwindcss/typography'),
  
  // 宽高比插件
  require('@tailwindcss/aspect-ratio'),
  
  // 自定义插件
  function({ addUtilities, theme }) {
    const newUtilities = {
      '.scrollbar-hide': {
        '-ms-overflow-style': 'none',
        'scrollbar-width': 'none',
        '&::-webkit-scrollbar': {
          display: 'none',
        },
      },
    }
    addUtilities(newUtilities)
  }
]

🎨 PostCSS 配置

// postcss.config.js
module.exports = {
  plugins: {
    // Tailwind CSS 插件
    tailwindcss: {},
    
    // Autoprefixer - 自动添加浏览器前缀
    autoprefixer: {
      // 配置目标浏览器
      overrideBrowserslist: [
        'last 2 versions',
        '> 1%',
        'IE 10'
      ]
    },
    
    // CSSnano - 生产环境压缩 CSS
    ...(process.env.NODE_ENV === 'production' ? {
      cssnano: {
        preset: 'default'
      }
    } : {})
  }
}

📦 开发 vs 生产配置

// 开发环境配置
const devConfig = {
  // JIT 模式，实时编译
  mode: 'jit',
  
  // 监听更多文件
  content: [
    './src/**/*.{vue,js,ts}',
    './public/**/*.html',
    './node_modules/some-component/**/*.{js,ts}'
  ],
  
  // 开发时的优化
  corePlugins: {
    // 禁用不需要的插件
    preflight: false,
  }
}

// 生产环境配置
const prodConfig = {
  // 启用所有优化
  content: [
    './src/**/*.{vue,js,ts}',
    './public/**/*.html'
  ],
  
  // 生产环境优化
  corePlugins: {
    preflight: true,
  },
  
  // 使用 PurgeCSS 移除未使用的样式
  purge: {
    enabled: true,
    content: [
      './src/**/*.{vue,js,ts}',
      './public/**/*.html'
    ],
    options: {
      safelist: [
        // 保护某些类不被移除
        'bg-red-500',
        /^text-/
      ]
    }
  }
}

module.exports = process.env.NODE_ENV === 'production' ? prodConfig : devConfig

🔍 配置调试

// tailwind.config.js
module.exports = {
  // ... 其他配置
  
  // 开启调试模式
  debug: false,
  
  // 显示生成的 CSS
  showOutput: false,
  
  // 监控文件变化
  watch: true,
}

⚡ 性能优化配置

module.exports = {
  // 限制扫描范围，提高构建速度
  content: [
    './pages/**/*.{js,ts,jsx,tsx,vue}',
    './components/**/*.{js,ts,jsx,tsx,vue}',
    './layouts/**/*.{js,ts,jsx,tsx,vue}',
  ],
  
  // 禁用未使用的核心功能
  corePlugins: {
    float: false,
    clear: false,
    // 根据项目需要禁用
  },
  
  // 优化 JIT 编译
  jit: true,
  
  // 缓存配置
  cache: true,
}

---

快速开始

1. 安装配置

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

2. 配置文件 tailwind.config.js

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        primary: '#3B82F6',
      }
    },
  },
  plugins: [],
}

3. CSS 文件配置

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

---

基础用法

1. 颜色系统

<!-- 背景色 -->
<div class="bg-red-500">红色背景</div>
<div class="bg-blue-400">蓝色背景</div>
<div class="bg-gray-200">灰色背景</div>

<!-- 文字颜色 -->
<p class="text-red-600">红色文字</p>
<p class="text-blue-800">深蓝色文字</p>
<p class="text-gray-500">灰色文字</p>

2. 间距系统

<!-- 内边距 Padding -->
<div class="p-4">四周内边距 16px</div>
<div class="px-6 py-3">左右 24px，上下 12px</div>
<div class="pt-2 pr-4 pb-2 pl-4">分别设置各方向内边距</div>

<!-- 外边距 Margin -->
<div class="m-4">四周外边距 16px</div>
<div class="mx-auto my-4">水平居中，垂直外边距 16px</div>
<div class="mt-2 mr-4 mb-2 ml-4">分别设置各方向外边距</div>

3. 字体与文本

<!-- 字体大小 -->
<h1 class="text-4xl">特大号文字</h1>
<h2 class="text-2xl">大号文字</h2>
<p class="text-base">正常文字</p>
<p class="text-sm">小号文字</p>

<!-- 字体粗细 -->
<p class="font-light">细体</p>
<p class="font-normal">正常</p>
<p class="font-semibold">半粗体</p>
<p class="font-bold">粗体</p>

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

4. 边框与圆角

<!-- 边框 -->
<div class="border">1px 边框</div>
<div class="border-2">2px 边框</div>
<div class="border-4 border-blue-500">4px 蓝色边框</div>
<div class="border-t border-r border-b border-l border-red-500">分别设置各边</div>

<!-- 圆角 -->
<div class="rounded">默认圆角</div>
<div class="rounded-lg">大圆角</div>
<div class="rounded-full">完全圆形</div>
<div class="rounded-t-lg">顶部圆角</div>

---

常见布局案例

1. 居中布局

<!-- 水平居中 -->
<div class="flex justify-center">
  <div class="bg-blue-500 text-white px-4 py-2 rounded">水平居中</div>
</div>

<!-- 垂直居中 -->
<div class="flex items-center h-32 bg-gray-100">
  <div class="bg-green-500 text-white px-4 py-2 rounded">垂直居中</div>
</div>

<!-- 完全居中 -->
<div class="flex items-center justify-center h-48 bg-gray-200">
  <div class="bg-purple-500 text-white px-6 py-3 rounded-lg">完全居中</div>
</div>

<!-- Grid 居中 -->
<div class="grid place-items-center h-48 bg-gray-200">
  <div class="bg-orange-500 text-white px-6 py-3 rounded-lg">Grid 居中</div>
</div>

2. 两栏布局

<!-- 左侧固定，右侧自适应 -->
<div class="flex h-screen">
  <!-- 侧边栏 -->
  <div class="w-64 bg-gray-800 text-white p-4">
    <h2 class="text-xl font-bold mb-4">侧边栏</h2>
    <ul class="space-y-2">
      <li class="bg-gray-700 p-2 rounded">菜单项 1</li>
      <li class="bg-gray-700 p-2 rounded">菜单项 2</li>
      <li class="bg-gray-700 p-2 rounded">菜单项 3</li>
    </ul>
  </div>
  
  <!-- 主内容区 -->
  <div class="flex-1 bg-white p-6">
    <h1 class="text-2xl font-bold mb-4">主内容区域</h1>
    <p class="text-gray-600">这是主内容区域，会自动占据剩余空间。</p>
  </div>
</div>

3. 三栏布局

<div class="flex gap-4 h-screen p-4">
  <!-- 左侧栏 -->
  <div class="w-48 bg-blue-100 p-4 rounded">
    <h3 class="font-bold mb-2">左侧栏</h3>
    <p class="text-sm">左侧固定宽度</p>
  </div>
  
  <!-- 中间内容区 -->
  <div class="flex-1 bg-green-100 p-4 rounded">
    <h3 class="font-bold mb-2">中间内容</h3>
    <p class="text-sm">自适应宽度</p>
  </div>
  
  <!-- 右侧栏 -->
  <div class="w-48 bg-purple-100 p-4 rounded">
    <h3 class="font-bold mb-2">右侧栏</h3>
    <p class="text-sm">右侧固定宽度</p>
  </div>
</div>

4. 卡片网格布局

<div class="container mx-auto p-4">
  <h2 class="text-2xl font-bold mb-6">产品卡片网格</h2>
  
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
    <!-- 卡片 1 -->
    <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
      <img src="https://via.placeholder.com/300x200" alt="产品图片" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="font-bold text-lg mb-2">产品标题</h3>
        <p class="text-gray-600 text-sm mb-4">产品描述信息...</p>
        <div class="flex justify-between items-center">
          <span class="text-xl font-bold text-red-500">¥99</span>
          <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">购买</button>
        </div>
      </div>
    </div>
    
    <!-- 更多卡片... -->
    <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
      <img src="https://via.placeholder.com/300x200" alt="产品图片" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="font-bold text-lg mb-2">产品标题</h3>
        <p class="text-gray-600 text-sm mb-4">产品描述信息...</p>
        <div class="flex justify-between items-center">
          <span class="text-xl font-bold text-red-500">¥159</span>
          <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">购买</button>
        </div>
      </div>
    </div>
  </div>
</div>

---

组件样式案例

1. 按钮组件

<!-- 基础按钮 -->
<button class="bg-blue-500 text-white px-4 py-2 rounded">默认按钮</button>

<!-- 按钮变体 -->
<button class="bg-green-500 hover:bg-green-600 text-white px-6 py-3 rounded-lg">绿色按钮</button>
<button class="bg-red-500 hover:bg-red-600 text-white px-6 py-3 rounded-lg">红色按钮</button>
<button class="bg-gray-500 hover:bg-gray-600 text-white px-6 py-3 rounded-lg">灰色按钮</button>

<!-- 轮廓按钮 -->
<button class="border-2 border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white px-6 py-3 rounded-lg">轮廓按钮</button>

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

<!-- 加载按钮 -->
<button class="bg-blue-500 text-white px-6 py-3 rounded-lg flex items-center gap-2">
  <svg class="animate-spin h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
  </svg>
  加载中...
</button>

2. 表单组件

<div class="max-w-md mx-auto p-6 bg-white rounded-lg shadow-md">
  <h2 class="text-2xl font-bold mb-6">登录表单</h2>
  
  <form class="space-y-4">
    <!-- 用户名输入框 -->
    <div>
      <label class="block text-sm font-medium text-gray-700 mb-2">用户名</label>
      <input type="text" 
             class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
             placeholder="请输入用户名">
    </div>
    
    <!-- 密码输入框 -->
    <div>
      <label class="block text-sm font-medium text-gray-700 mb-2">密码</label>
      <input type="password" 
             class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
             placeholder="请输入密码">
    </div>
    
    <!-- 错误信息 -->
    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
      用户名或密码错误
    </div>
    
    <!-- 记住我 -->
    <div class="flex items-center">
      <input type="checkbox" class="mr-2" id="remember">
      <label for="remember" class="text-sm text-gray-600">记住我</label>
    </div>
    
    <!-- 提交按钮 -->
    <button type="submit" 
            class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded transition-colors">
      登录
    </button>
  </form>
</div>

3. 导航栏组件

<!-- 顶部导航栏 -->
<nav class="bg-white shadow-lg">
  <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 flex items-center">
          <div class="text-2xl font-bold text-blue-600">Brand</div>
        </div>
        
        <!-- 导航菜单 -->
        <div class="hidden md:flex ml-10 space-x-8">
          <a href="#" class="text-gray-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">首页</a>
          <a href="#" class="text-gray-500 hover:text-blue-600 px-3 py-2 text-sm font-medium">产品</a>
          <a href="#" class="text-gray-500 hover:text-blue-600 px-3 py-2 text-sm font-medium">服务</a>
          <a href="#" class="text-gray-500 hover:text-blue-600 px-3 py-2 text-sm font-medium">关于</a>
        </div>
      </div>
      
      <!-- 右侧按钮 -->
      <div class="flex items-center space-x-4">
        <button class="text-gray-500 hover:text-gray-700">
          <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
          </svg>
        </button>
        <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium">
          登录
        </button>
      </div>
    </div>
  </div>
</nav>

4. 提示框组件

<!-- 成功提示 -->
<div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 rounded">
  <div class="flex">
    <div class="flex-shrink-0">
      <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
      </svg>
    </div>
    <div class="ml-3">
      <p class="text-sm font-medium">操作成功！</p>
      <p class="text-sm mt-1">您的更改已保存。</p>
    </div>
  </div>
</div>

<!-- 警告提示 -->
<div class="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 rounded">
  <div class="flex">
    <div class="flex-shrink-0">
      <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
      </svg>
    </div>
    <div class="ml-3">
      <p class="text-sm font-medium">请注意</p>
      <p class="text-sm mt-1">您的会话即将过期。</p>
    </div>
  </div>
</div>

<!-- 错误提示 -->
<div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 rounded">
  <div class="flex">
    <div class="flex-shrink-0">
      <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
      </svg>
    </div>
    <div class="ml-3">
      <p class="text-sm font-medium">操作失败</p>
      <p class="text-sm mt-1">请检查您的输入并重试。</p>
    </div>
  </div>
</div>

---

响应式设计

1. 断点系统

Tailwind CSS 提供了以下断点：

• sm: 640px
• md: 768px
• lg: 1024px
• xl: 1280px
• 2xl: 1536px

2. 响应式网格

<!-- 响应式网格 -->
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
  <!-- 卡片 -->
  <div class="bg-white p-4 rounded shadow">卡片 1</div>
  <div class="bg-white p-4 rounded shadow">卡片 2</div>
  <div class="bg-white p-4 rounded shadow">卡片 3</div>
  <div class="bg-white p-4 rounded shadow">卡片 4</div>
  <div class="bg-white p-4 rounded shadow">卡片 5</div>
  <div class="bg-white p-4 rounded shadow">卡片 6</div>
</div>

3. 响应式文字

<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl">响应式标题</h1>
<p class="text-sm sm:text-base md:text-lg">响应式段落文字</p>

4. 响应式显示隐藏

<!-- 在小屏幕隐藏，大屏幕显示 -->
<div class="hidden md:block">只在中等及以上屏幕显示</div>

<!-- 在小屏幕显示，大屏幕隐藏 -->
<div class="block md:hidden">只在中等以下屏幕显示</div>

5. 移动端优先设计

<!-- 导航栏：桌面横向，移动端垂直 -->
<nav class="flex flex-col md:flex-row justify-between items-center p-4">
  <div class="logo text-xl font-bold mb-4 md:mb-0">Logo</div>
  <div class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-6">
    <a href="#" class="nav-link">首页</a>
    <a href="#" class="nav-link">关于</a>
    <a href="#" class="nav-link">联系</a>
  </div>
</nav>

---

动画与过渡

1. 过渡效果

<!-- 基础过渡 -->
<button class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded transition-colors duration-300">
  颜色过渡按钮
</button>

<!-- 变换过渡 -->
<button class="bg-green-500 hover:scale-110 text-white px-6 py-2 rounded transition-transform duration-200">
  缩放按钮
</button>

<!-- 阴影过渡 -->
<div class="w-32 h-32 bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300">
  悬停阴影效果
</div>

<!-- 多重过渡 -->
<button class="bg-purple-500 hover:bg-purple-600 hover:scale-105 text-white px-6 py-2 rounded transition-all duration-300">
  多重过渡按钮
</button>

2. 动画效果

<!-- 旋转动画 -->
<div class="w-16 h-16 bg-blue-500 rounded animate-spin">
  旋转动画
</div>

<!-- 弹跳动画 -->
<div class="w-16 h-16 bg-green-500 rounded-full animate-bounce">
  弹跳动画
</div>

<!-- 脉冲动画 -->
<div class="w-16 h-16 bg-red-500 rounded animate-pulse">
  脉冲动画
</div>

<!-- 摆动动画 -->
<div class="w-16 h-16 bg-yellow-500 rounded animate-ping">
  摆动动画
</div>

3. 自定义动画

<style>
  @keyframes slideIn {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(0);
    }
  }
  
  .slide-in {
    animation: slideIn 0.3s ease-out;
  }
</style>

<div class="bg-blue-500 text-white p-4 rounded slide-in">
  滑入动画元素
</div>

---

实用技巧

1. 状态样式

<!-- 焦点状态 -->
<input class="border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">

<!-- 禁用状态 -->
<button class="bg-blue-500 hover:bg-blue-600 disabled:bg-gray-400 disabled:cursor-not-allowed">

<!-- 访问状态（链接） -->
<a href="#" class="text-blue-500 hover:text-blue-700 visited:text-purple-600">
  链接颜色
</a>

2. 群组状态

<div class="group">
  <div class="bg-gray-200 group-hover:bg-blue-200 transition-colors">
    悬停时背景色改变
  </div>
  <p class="text-gray-600 group-hover:text-blue-600">
    悬停时文字颜色改变
  </p>
</div>

3. 自定义组件样式

<!-- 使用 @apply 指令（在 CSS 文件中） -->
<style>
  .btn-primary {
    @apply bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded transition-colors;
  }
  
  .card {
    @apply bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow;
  }
</style>

<!-- 在 HTML 中使用 -->
<button class="btn-primary">主要按钮</button>
<div class="card">卡片内容</div>

4. 深色模式

<!-- 支持深色模式的颜色 -->
<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white">
  <h1 class="text-2xl font-bold">深色模式标题</h1>
  <p class="text-gray-600 dark:text-gray-400">深色模式文本</p>
</div>

5. 实用组合技巧

<!-- 完美的居中卡片 -->
<div class="min-h-screen flex items-center justify-center bg-gray-50">
  <div class="bg-white p-8 rounded-xl shadow-lg max-w-md w-full mx-4">
    <h2 class="text-2xl font-bold text-center mb-6">完美居中卡片</h2>
    <p class="text-gray-600 text-center">在任何屏幕尺寸下都完美居中</p>
  </div>
</div>

<!-- 响应式图片容器 -->
<div class="aspect-w-16 aspect-h-9">
  <img src="https://via.placeholder.com/800x450" alt="响应式图片" class="w-full h-full object-cover rounded-lg">
</div>

<!-- 加载骨架屏 -->
<div class="animate-pulse">
  <div class="h-4 bg-gray-200 rounded w-3/4 mb-4"></div>
  <div class="h-4 bg-gray-200 rounded w-1/2 mb-4"></div>
  <div class="h-4 bg-gray-200 rounded w-5/6"></div>
</div>

---

最佳实践

1. 组织代码

• 将重复的样式组合成组件类
• 使用 CSS 变量定义主题色彩
• 合理使用响应式断点

2. 性能优化

• 只导入需要的功能
• 使用 PurgeCSS 移除未使用的样式
• 避免内联样式

3. 可维护性

• 保持类名的一致性
• 使用语义化的 HTML 结构
• 添加适当的注释

---

常见问题解答

Q: 如何自定义颜色主题？

A: 在 tailwind.config.js 中的 theme.extend.colors 添加自定义颜色。

Q: 如何创建自定义组件？

A: 使用 @apply 指令将 utility 类组合成组件类。

Q: 如何处理响应式设计？

A: 使用断点前缀（sm:, md:, lg: 等）来应用不同屏幕尺寸的样式。

Q: 如何添加动画效果？

A: 使用 transition- 和 animate- 前缀的类，或者自定义 CSS 动画。

---

这个教程涵盖了 Tailwind CSS 的核心概念和实际应用场景，希望能帮助你快速上手并熟练使用这个强大的 CSS 框架！