Tailwind CSS 使用指南

什么是 Tailwind CSS？

Tailwind CSS 是一个用于快速构建用户界面的实用优先（Utility-First）CSS 框架。它提供了大量预定义的实用类，可以直接在 HTML 中使用，而无需编写自定义 CSS。

核心特性

实用优先：提供原子化的 CSS 类，可直接组合使用
响应式设计：内置响应式断点，轻松实现移动端适配
高度可定制：通过配置文件自定义主题、颜色、间距等
性能优化：使用 PurgeCSS 自动移除未使用的样式，减小文件体积
现代化：支持最新 CSS 特性，如 Grid、Flexbox、动画等

提示

注意：本文档基于 Tailwind CSS v4，部分配置可能与 v3 有所不同。建议参考官方文档获取最新信息。

安装和使用

Vite 项目

1. 安装依赖

bash

# 使用 npm
npm install -D tailwindcss @tailwindcss/vite

# 使用 pnpm
pnpm add -D tailwindcss @tailwindcss/vite

# 使用 yarn
yarn add -D tailwindcss @tailwindcss/vite

2. 配置 Vite

在 vite.config.ts 或 vite.config.js 中导入并添加插件：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    vue(),
    tailwindcss(),
  ],
})

3. 在全局 CSS 中引入

在项目的全局 CSS 文件（如 main.css 或 style.css）中引入：

css

@import "tailwindcss";

4. 配置自定义主题

使用 @theme 指令定义自定义 CSS 变量：

css

@theme {
    /* 自定义颜色 */
    --color-danger: #dc3545;
    --color-primary: #007bff;
    --color-success: #28a745;
    
    /* 自定义间距 */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    
    /* 自定义字体大小 */
    --font-size-xs: 0.75rem;
}

5. 使用示例

vue

<template>
  <div class="text-danger">Hello Vue</div>
  <button class="bg-primary text-white px-4 py-2 rounded">
    点击按钮
  </button>
</template>

普通 HTML 项目

方式一：使用 CDN（浏览器版）

直接在 HTML 中引入 Tailwind CSS 浏览器版本：

html

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Tailwind CSS 示例</title>
    
    <!-- 引入 Tailwind CSS -->
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    
    <!-- 自定义主题配置 -->
    <style type="text/tailwindcss">
        @theme {
            --color-danger: #dc3545;
            --color-primary: #007bff;
        }
    </style>
</head>
<body>
    <div class="container mx-auto px-4 py-8">
        <h1 class="text-3xl font-bold underline text-primary mb-4">
            Hello world!
        </h1>
        <button class="bg-danger text-white px-4 py-2 rounded hover:bg-red-600">
            点击我
        </button>
    </div>
</body>
</html>

方式二：使用 PostCSS（推荐用于生产环境）

对于生产环境，建议使用 PostCSS 方式，以获得更好的性能和优化。

bash

# 安装依赖
npm install -D tailwindcss postcss autoprefixer

# 初始化配置文件
npx tailwindcss init -p

在 tailwind.config.js 中配置：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./*.html', './src/**/*.{html,js}'],
  theme: {
    extend: {
      colors: {
        danger: '#dc3545',
        primary: '#007bff',
      },
    },
  },
  plugins: [],
}

在 CSS 文件中：

css

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

React 项目

使用 Create React App

bash

# 安装依赖
npm install -D tailwindcss postcss autoprefixer

# 初始化配置
npx tailwindcss init -p

在 tailwind.config.js 中配置内容路径：

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  // ... 其他配置
}

在 src/index.css 中引入：

css

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

Vue 项目（CLI 方式）

bash

# 安装依赖
npm install -D tailwindcss postcss autoprefixer

# 初始化配置
npx tailwindcss init -p

在 tailwind.config.js 中配置：

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  // ... 其他配置
}

在 src/style.css 中引入：

css

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

常用指令

@theme

创建自定义 CSS 变量，用于扩展 Tailwind 的主题配置。

css

@theme {
    /* 自定义颜色 */
    --color-danger: #dc3545;
    --color-primary: #007bff;
    --color-secondary: #6c757d;
    
    /* 自定义间距 */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    
    /* 自定义字体大小 */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    
    /* 自定义断点 */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
}

使用自定义变量：

html

<div class="text-danger bg-primary p-lg">
    使用自定义颜色和间距
</div>

theme()

在 CSS 中访问 Tailwind 配置的主题值。

css

.custom-button {
    background-color: theme('colors.blue.500');
    padding: theme('spacing.4') theme('spacing.8');
    border-radius: theme('borderRadius.lg');
    font-size: theme('fontSize.lg');
}

@apply

将多个 Tailwind CSS 工具类组合成一个可复用的组件类。适用于需要多次使用的样式组合。

css

/* 基础按钮样式 */
.btn-primary {
    @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg 
           shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 
           focus:ring-blue-400 focus:ring-opacity-75 transition-colors;
}

/* 不同尺寸的按钮 */
.btn-sm {
    @apply py-1 px-2 text-sm;
}

.btn-lg {
    @apply py-3 px-6 text-lg;
}

/* 不同颜色的按钮变体 */
.btn-danger {
    @apply bg-red-500 hover:bg-red-700 focus:ring-red-400;
}

.btn-success {
    @apply bg-green-500 hover:bg-green-700 focus:ring-green-400;
}

使用示例：

html

<button class="btn-primary">主要按钮</button>
<button class="btn-primary btn-sm">小按钮</button>
<button class="btn-primary btn-danger">危险按钮</button>

@layer

控制自定义样式在 Tailwind 的层叠顺序，确保样式优先级正确。

层名称	描述	优先级
base	用于定义基础样式，如字体、颜色、边框、阴影等。重置样式和基础元素样式	最低
components	用于定义组件样式，如按钮、导航栏、表单等。可复用的组件类	中等
utilities	用于定义工具类样式，如 margin、padding、border、background 等	最高

css

/* Base 层：重置和基础样式 */
@layer base {
    /* 全局样式重置 */
    * {
        @apply box-border;
    }
    
    body {
        @apply bg-gray-100 text-gray-900 font-sans antialiased;
    }
    
    /* 标题样式 */
    h1 {
        @apply text-3xl font-bold mb-4 text-gray-900;
    }
    
    h2 {
        @apply text-2xl font-semibold mb-3 text-gray-800;
    }
    
    h3 {
        @apply text-xl font-medium mb-2 text-gray-700;
    }
    
    /* 链接样式 */
    a {
        @apply text-blue-600 hover:text-blue-800 underline;
    }
    
    /* 输入框样式 */
    input, textarea {
        @apply border border-gray-300 rounded px-3 py-2 
               focus:outline-none focus:ring-2 focus:ring-blue-500;
    }
}

/* Components 层：组件样式 */
@layer components {
    /* 卡片组件 */
    .card {
        @apply bg-white rounded-lg shadow-md p-6 mb-4;
    }
    
    /* 导航栏 */
    .navbar {
        @apply bg-white shadow-sm py-4 px-6;
    }
    
    /* 表单组 */
    .form-group {
        @apply mb-4;
    }
    
    .form-label {
        @apply block text-sm font-medium text-gray-700 mb-1;
    }
}

/* Utilities 层：工具类 */
@layer utilities {
    /* 自定义工具类 */
    .text-balance {
        text-wrap: balance;
    }
    
    /* 滚动条样式 */
    .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    
    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }
}

@responsive

读取 Tailwind 配置的断点，为内部的每个类自动生成响应式变体。这是 Tailwind CSS v4 的新特性。

css

@layer components {
    @responsive {
        /* 响应式卡片组件 */
        .card {
            @apply bg-white rounded-lg shadow-md p-4;
        }
        
        /* 响应式按钮尺寸 */
        .btn-lg {
            @apply py-3 px-6 text-lg;
        }
        
        /* 响应式容器 */
        .container-responsive {
            @apply w-full mx-auto px-4;
        }
    }
}

使用时会自动生成响应式变体：

html

<!-- 默认样式 -->
<div class="card">基础卡片</div>

<!-- 响应式样式 -->
<div class="card sm:card md:card-lg">响应式卡片</div>

<!-- 按钮响应式 -->
<button class="btn-lg sm:btn-lg md:btn-lg">响应式按钮</button>

注意：@responsive 指令会自动为所有断点生成变体，包括 sm:、md:、lg:、xl:、2xl: 等。

@screen

创建针对特定断点的媒体查询。

css

@screen sm {
    .sidebar {
        width: 250px;
    }
}

@screen md {
    .sidebar {
        width: 300px;
    }
}

@screen lg {
    .sidebar {
        width: 350px;
    }
}

常用类名参考

布局相关

类名	描述	用法示例
`container`	容器	`container mx-auto`
`flex`	弹性布局	`flex flex-col`、`flex flex-row`
`grid`	网格布局	`grid grid-cols-2`、`grid grid-cols-3`
`hidden`	隐藏元素	`hidden`、`md:block`
`block`	块级显示	`block`
`inline`	行内显示	`inline`
`inline-block`	行内块显示	`inline-block`

尺寸相关

类名	描述	用法示例
`w-[size]`	宽度	`w-1/2`、`w-full`、`w-screen`、`w-[50%]`、`w-[100px]`
`h-[size]`	高度	`h-1/2`、`h-full`、`h-screen`、`h-[50%]`、`h-[100px]`
`max-w-[size]`	最大宽度	`max-w-7xl`、`max-w-screen-xl`
`min-h-[size]`	最小高度	`min-h-screen`

间距相关

类名	描述	用法示例
`p-[direction?]-[size]`	内边距	`p-4`、`px-4`、`py-2`、`pt-4`、`pb-4`、`pl-4`、`pr-4`
`m-[direction?]-[size]`	外边距	`m-4`、`mx-auto`、`my-4`、`mt-4`、`mb-4`、`ml-4`、`mr-4`
`gap-[size]`	网格/弹性布局间隔	`gap-4`、`gap-x-2`、`gap-y-4`

颜色相关

类名	描述	用法示例
`bg-[color]`	背景颜色	`bg-red-500`、`bg-blue-600`、`bg-[#ff0000]`
`text-[color]`	文本颜色	`text-white`、`text-gray-800`、`text-[#333]`
`border-[color]`	边框颜色	`border-red-500`、`border-gray-300`

Flexbox 对齐

类名	描述	用法示例
`items-[align]`	交叉轴对齐（垂直）	`items-start`、`items-center`、`items-end`、`items-stretch`
`justify-[align]`	主轴对齐（水平）	`justify-start`、`justify-center`、`justify-end`、`justify-between`、`justify-around`
`self-[align]`	自身对齐	`self-start`、`self-center`、`self-end`

边框和圆角

类名	描述	用法示例
`border`	边框	`border`、`border-2`、`border-4`
`border-[direction]`	方向边框	`border-t`、`border-b`、`border-l`、`border-r`
`rounded-[size]`	圆角	`rounded`、`rounded-lg`、`rounded-full`、`rounded-[16px]`

阴影和效果

类名	描述	用法示例
`shadow-[size]`	阴影	`shadow`、`shadow-md`、`shadow-lg`、`shadow-xl`
`opacity-[value]`	透明度	`opacity-50`、`opacity-75`、`opacity-100`

文本样式

类名	描述	用法示例
`text-[size]`	字体大小	`text-sm`、`text-base`、`text-lg`、`text-xl`、`text-2xl`
`font-[weight]`	字体粗细	`font-normal`、`font-bold`、`font-semibold`
`text-[align]`	文本对齐	`text-left`、`text-center`、`text-right`
`text-[decoration]`	文本装饰	`underline`、`line-through`、`no-underline`
`uppercase` / `lowercase` / `capitalize`	文本转换	`uppercase`、`lowercase`、`capitalize`

定位

类名	描述	用法示例
`relative` / `absolute` / `fixed` / `sticky`	定位类型	`relative`、`absolute top-0 left-0`
`top-[size]` / `right-[size]` / `bottom-[size]` / `left-[size]`	定位距离	`top-0`、`right-4`、`bottom-0`、`left-0`
`z-[index]`	层级	`z-10`、`z-50`、`z-9999`

伪类选择器和变体

状态变体

变体	描述	用法示例
`hover:`	鼠标悬停	`hover:bg-blue-600`、`hover:text-white`
`focus:`	获取焦点	`focus:outline-none`、`focus:ring-2`
`active:`	激活状态	`active:bg-blue-700`
`disabled:`	禁用状态	`disabled:opacity-50`、`disabled:cursor-not-allowed`
`checked:`	选中状态（复选框/单选）	`checked:bg-blue-500`
`group-hover:`	父元素悬停	`group-hover:bg-gray-100`（配合 `group` 类使用）
`group-focus:`	父元素聚焦	`group-focus:ring-2`

结构选择器

变体	描述	用法示例
`first:`	第一个子元素	`first:mt-0`、`first:pt-0`
`last:`	最后一个子元素	`last:mb-0`、`last:pb-0`
`odd:`	奇数子元素	`odd:bg-gray-50`
`even:`	偶数子元素	`even:bg-white`
`only:`	唯一子元素	`only:block`
`empty:`	空元素	`empty:hidden`

响应式断点

Tailwind 默认的响应式断点：

断点前缀	最小宽度	说明
`sm:`	640px	小屏幕（手机横屏）
`md:`	768px	中等屏幕（平板）
`lg:`	1024px	大屏幕（桌面）
`xl:`	1280px	超大屏幕
`2xl:`	1536px	2倍超大屏幕

使用示例：

html

<!-- 响应式布局 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <div class="bg-blue-500 p-4">卡片 1</div>
    <div class="bg-blue-500 p-4">卡片 2</div>
    <div class="bg-blue-500 p-4">卡片 3</div>
</div>

<!-- 响应式文本大小 -->
<h1 class="text-2xl md:text-3xl lg:text-4xl font-bold">
    响应式标题
</h1>

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

<div class="block md:hidden">
    仅在小屏幕显示
</div>

暗色模式

html

<!-- 启用暗色模式支持需要在配置中设置 darkMode: 'class' -->
<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white">
    支持暗色模式的容器
</div>

任意值支持

使用方括号语法可以添加任意值：

html

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

<!-- 任意尺寸 -->
<div class="w-[123px] h-[456px]">
    自定义尺寸
</div>

<!-- 任意间距 -->
<div class="p-[17px] m-[23px]">
    自定义间距
</div>

实用技巧

1. 组合类名

html

<!-- 按钮组合 -->
<button class="px-4 py-2 bg-blue-500 text-white rounded-lg 
               hover:bg-blue-600 focus:outline-none focus:ring-2 
               focus:ring-blue-500 transition-colors">
    按钮
</button>

2. 响应式设计模式

html

<!-- 移动优先设计 -->
<div class="
    w-full                    <!-- 移动端：全宽 -->
    sm:w-1/2                  <!-- sm+：一半宽度 -->
    md:w-1/3                  <!-- md+：三分之一宽度 -->
    lg:w-1/4                  <!-- lg+：四分之一宽度 -->
    p-4                       <!-- 基础内边距 -->
    md:p-6                    <!-- md+：更大内边距 -->
">
    响应式容器
</div>

3. 组件提取

使用 @apply 提取常用组件：

css

@layer components {
    .btn {
        @apply px-4 py-2 rounded-lg font-semibold 
               focus:outline-none focus:ring-2 
               transition-colors duration-200;
    }
    
    .btn-primary {
        @apply bg-blue-500 text-white hover:bg-blue-600 focus:ring-blue-500;
    }
    
    .card {
        @apply bg-white rounded-lg shadow-md p-6;
    }
}

4. 自定义配置

在 tailwind.config.js 中扩展配置：

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#f0f9ff',
          500: '#0ea5e9',
          900: '#0c4a6e',
        },
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
        mono: ['Fira Code', 'monospace'],
      },
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
    },
  },
}

动画和变换

Tailwind CSS 提供了丰富的动画和变换工具类，可以轻松实现元素的过渡效果和动画。

过渡效果（Transition）

使用 transition-* 类控制元素的过渡效果。

基本用法

html

<!-- 基础过渡 -->
<div class="transition">
    基础过渡效果
</div>

<!-- 指定过渡属性 -->
<div class="transition-colors">
    颜色过渡
</div>

<div class="transition-opacity">
    透明度过渡
</div>

<div class="transition-transform">
    变换过渡
</div>

<!-- 组合多个属性 -->
<div class="transition-all">
    所有属性过渡
</div>

过渡时长

html

<!-- 默认时长（150ms） -->
<div class="transition-colors">默认</div>

<!-- 指定时长 -->
<div class="transition-colors duration-75">75ms</div>
<div class="transition-colors duration-100">100ms</div>
<div class="transition-colors duration-150">150ms</div>
<div class="transition-colors duration-200">200ms</div>
<div class="transition-colors duration-300">300ms</div>
<div class="transition-colors duration-500">500ms</div>
<div class="transition-colors duration-700">700ms</div>
<div class="transition-colors duration-1000">1000ms</div>

过渡函数

html

<!-- 缓动函数 -->
<div class="transition ease-linear">线性</div>
<div class="transition ease-in">缓入</div>
<div class="transition ease-out">缓出</div>
<div class="transition ease-in-out">缓入缓出</div>

延迟

html

<div class="transition delay-75">延迟 75ms</div>
<div class="transition delay-100">延迟 100ms</div>
<div class="transition delay-150">延迟 150ms</div>
<div class="transition delay-200">延迟 200ms</div>
<div class="transition delay-300">延迟 300ms</div>

从顶部移入移出效果

基础从顶部移入移出

使用 transform 和 translate-y 实现从顶部移入移出：

html

<!-- 从顶部移入移出示例：0.3s 过渡 -->
<div class="-translate-y-4 transition-all duration-300 hover:translate-y-0">
    鼠标悬停时从顶部移入
</div>

<!-- 使用 Vue/React 控制显示隐藏 -->
<div :class="isVisible ? 'translate-y-0' : '-translate-y-4'" 
     class="transition-all duration-300">
    内容
</div>

完整的从顶部移入移出组件示例

vue

<template>
  <div>
    <!-- 从顶部移入移出容器 -->
    <div 
      :class="[
        'transition-all duration-300',
        show ? 'translate-y-0' : '-translate-y-4'
      ]"
      class="p-4 bg-blue-500 text-white rounded-lg"
    >
      <p>这是一个从顶部移入移出的元素</p>
    </div>
    
    <!-- 控制按钮 -->
    <button 
      @click="show = !show"
      class="mt-4 px-4 py-2 bg-gray-800 text-white rounded hover:bg-gray-700"
    >
      {{ show ? '移出' : '移入' }}
    </button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const show = ref(true)
</script>

从顶部移入移出 + 淡入淡出

结合 transform、translate-y 和 opacity 实现更丰富的效果：

html

<!-- 从顶部移入 + 淡入 -->
<div class="opacity-0 -translate-y-4 transition-all duration-300 
            hover:opacity-100 hover:translate-y-0">
    从顶部移入并淡入
</div>

<!-- 从下方移入 + 淡入 -->
<div class="opacity-0 translate-y-4 transition-all duration-300 
            hover:opacity-100 hover:translate-y-0">
    从下方移入并淡入
</div>

<!-- 从左侧移入 + 淡入 -->
<div class="opacity-0 -translate-x-4 transition-all duration-300 
            hover:opacity-100 hover:translate-x-0">
    从左侧移入并淡入
</div>

<!-- 从右侧移入 + 淡入 -->
<div class="opacity-0 translate-x-4 transition-all duration-300 
            hover:opacity-100 hover:translate-x-0">
    从右侧移入并淡入
</div>

使用 @apply 创建从顶部移入移出类

css

@layer components {
    /* 基础从顶部移入移出 */
    .slide-top-in-out {
        @apply transition-all duration-300;
    }
    
    .slide-top-in {
        @apply -translate-y-4 slide-top-in-out translate-y-0;
    }
    
    .slide-top-out {
        @apply translate-y-0 slide-top-in-out -translate-y-4;
    }
    
    /* 从顶部移入移出 + 淡入淡出 */
    .slide-top-fade {
        @apply opacity-0 -translate-y-4 transition-all duration-300;
    }
    
    .slide-top-fade.active {
        @apply opacity-100 translate-y-0;
    }
    
    /* 自定义时长 0.3s */
    .slide-top-300 {
        @apply transition-all duration-300;
    }
}

使用示例：

html

<!-- 使用自定义类：从顶部移入 -->
<div class="slide-top-in-out -translate-y-4 hover:translate-y-0">
    悬停时从顶部移入
</div>

<div class="slide-top-300 -translate-y-4 group-hover:translate-y-0">
    组悬停时从顶部移入（0.3s）
</div>

<!-- 从顶部移入 + 淡入 -->
<div class="slide-top-fade hover:opacity-100 hover:translate-y-0">
    悬停时从顶部移入并淡入
</div>

变换（Transform）

位移（Translate）

html

<!-- 水平位移 -->
<div class="translate-x-0">不位移</div>
<div class="translate-x-4">向右 1rem</div>
<div class="-translate-x-4">向左 1rem</div>

<!-- 垂直位移 -->
<div class="translate-y-0">不位移</div>
<div class="translate-y-4">向下 1rem</div>
<div class="-translate-y-4">向上 1rem</div>

<!-- 组合 -->
<div class="translate-x-4 translate-y-4">向右下位移</div>

旋转（Rotate）

html

<div class="rotate-0">0度</div>
<div class="rotate-45">45度</div>
<div class="rotate-90">90度</div>
<div class="rotate-180">180度</div>
<div class="-rotate-45">-45度</div>

<!-- 悬停旋转 -->
<div class="transition-transform duration-300 hover:rotate-180">
    悬停旋转
</div>

缩放（Scale）

html

<div class="scale-100">原始大小</div>
<div class="scale-50">缩小到 50%</div>
<div class="scale-75">缩小到 75%</div>
<div class="scale-125">放大到 125%</div>
<div class="scale-150">放大到 150%</div>

<!-- 悬停缩放 -->
<div class="transition-transform duration-300 hover:scale-110">
    悬停放大
</div>

倾斜（Skew）

html

<div class="skew-x-0">不倾斜</div>
<div class="skew-x-12">X轴倾斜 12度</div>
<div class="skew-y-12">Y轴倾斜 12度</div>
<div class="skew-x-12 skew-y-12">X和Y轴倾斜</div>

动画（Animation）

Tailwind 提供了一些内置动画：

html

<!-- 旋转动画 -->
<div class="animate-spin">旋转</div>

<!-- 脉冲动画 -->
<div class="animate-pulse">脉冲</div>

<!-- 弹跳动画 -->
<div class="animate-bounce">弹跳</div>

<!-- 渐隐渐显动画 -->
<div class="animate-ping">渐隐渐显</div>

自定义动画

在 tailwind.config.js 中定义自定义动画：

module.exports = {
  theme: {
    extend: {
      animation: {
        'slide-top-in': 'slideTopIn 0.3s ease-out',
        'slide-top-out': 'slideTopOut 0.3s ease-out',
        'slide-up': 'slideUp 0.3s ease-out',
        'slide-down': 'slideDown 0.3s ease-out',
      },
      keyframes: {
        slideTopIn: {
          '0%': { transform: 'translateY(-16px)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' },
        },
        slideTopOut: {
          '0%': { transform: 'translateY(0)', opacity: '1' },
          '100%': { transform: 'translateY(-16px)', opacity: '0' },
        },
        slideUp: {
          '0%': { transform: 'translateY(10px)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' },
        },
        slideDown: {
          '0%': { transform: 'translateY(-10px)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' },
        },
      },
    },
  },
}

使用自定义动画：

html

<!-- 从顶部移入动画（0.3s） -->
<div class="animate-slide-top-in">从顶部移入</div>

<!-- 从顶部移出动画（0.3s） -->
<div class="animate-slide-top-out">从顶部移出</div>

<!-- 其他动画 -->
<div class="animate-slide-up">向上滑入</div>
<div class="animate-slide-down">向下滑入</div>

完整示例：从顶部移入移出卡片

vue

<template>
  <div class="p-8">
    <!-- 从顶部移入移出卡片 -->
    <div 
      v-for="(item, index) in items" 
      :key="index"
      :class="[
        'mb-4 p-6 bg-white rounded-lg shadow-md',
        'transition-all duration-300',
        item.visible ? 'translate-y-0' : '-translate-y-4'
      ]"
    >
      <h3 class="text-xl font-bold mb-2">{{ item.title }}</h3>
      <p class="text-gray-600">{{ item.content }}</p>
    </div>
    
    <!-- 控制按钮 -->
    <button 
      @click="toggleAll"
      class="px-6 py-3 bg-blue-500 text-white rounded-lg 
             hover:bg-blue-600 transition-colors duration-300"
    >
      {{ allVisible ? '全部移出' : '全部移入' }}
    </button>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const items = ref([
  { title: '卡片 1', content: '这是第一个卡片', visible: true },
  { title: '卡片 2', content: '这是第二个卡片', visible: true },
  { title: '卡片 3', content: '这是第三个卡片', visible: true },
])

const allVisible = computed(() => {
  return items.value.every(item => item.visible)
})

const toggleAll = () => {
  const newState = !allVisible.value
  items.value.forEach(item => {
    item.visible = newState
  })
}
</script>

动画性能优化

使用 transform 和 opacity：这两个属性不会触发重排，性能最好
避免动画 width/height：使用 scale 代替
使用 will-change：提示浏览器优化

html

<!-- 性能优化示例 -->
<div class="transition-transform duration-300 will-change-transform 
            hover:scale-110">
    优化的缩放动画
</div>

性能优化

1. PurgeCSS 配置

确保 content 路径正确配置：

module.exports = {
  content: [
    './index.html',
    './src/**/*.{vue,js,ts,jsx,tsx}',
  ],
  // ...
}

2. JIT 模式

Tailwind CSS v3+ 默认启用 JIT（Just-In-Time）模式，只生成使用的样式。

3. 避免动态类名

html

<!-- ❌ 不推荐：类名是动态生成的 -->
<div :class="`text-${color}-500`"></div>

<!-- ✅ 推荐：使用完整类名 -->
<div :class="color === 'red' ? 'text-red-500' : 'text-blue-500'"></div>

<!-- ✅ 或者使用 safelist -->

在配置中添加 safelist：

module.exports = {
  safelist: [
    'text-red-500',
    'text-blue-500',
    'bg-red-500',
    'bg-blue-500',
  ],
}

最佳实践

移动优先：先写移动端样式，再逐步增强
组件提取：将重复的样式组合提取为组件类
合理使用响应式：不要过度使用响应式类名
语义化命名：使用有意义的组件类名
性能优化：正确配置 content 路径，启用 PurgeCSS

最后更新：2025年

Tailwind CSS 使用指南 ​

什么是 Tailwind CSS？ ​

核心特性 ​

安装和使用 ​

Vite 项目 ​

1. 安装依赖 ​

2. 配置 Vite ​

3. 在全局 CSS 中引入 ​

4. 配置自定义主题 ​

5. 使用示例 ​

普通 HTML 项目 ​

方式一：使用 CDN（浏览器版） ​

方式二：使用 PostCSS（推荐用于生产环境） ​

React 项目 ​

使用 Create React App ​

Vue 项目（CLI 方式） ​

常用指令 ​

@theme ​

theme() ​

@apply ​

@layer ​

@responsive ​

@screen ​

常用类名参考 ​

布局相关 ​

尺寸相关 ​

间距相关 ​

颜色相关 ​

Flexbox 对齐 ​

边框和圆角 ​

阴影和效果 ​

文本样式 ​

定位 ​

伪类选择器和变体 ​

状态变体 ​

结构选择器 ​

响应式断点 ​

暗色模式 ​

任意值支持 ​

实用技巧 ​

1. 组合类名 ​

2. 响应式设计模式 ​

3. 组件提取 ​

4. 自定义配置 ​

动画和变换 ​

过渡效果（Transition） ​

基本用法 ​

过渡时长 ​

过渡函数 ​

延迟 ​

从顶部移入移出效果 ​

基础从顶部移入移出 ​

完整的从顶部移入移出组件示例 ​

从顶部移入移出 + 淡入淡出 ​

使用 @apply 创建从顶部移入移出类 ​

变换（Transform） ​

位移（Translate） ​

旋转（Rotate） ​

缩放（Scale） ​

倾斜（Skew） ​

动画（Animation） ​

自定义动画 ​

完整示例：从顶部移入移出卡片 ​

动画性能优化 ​

性能优化 ​

1. PurgeCSS 配置 ​

2. JIT 模式 ​

3. 避免动态类名 ​

最佳实践 ​

Tailwind CSS 使用指南

什么是 Tailwind CSS？

核心特性

安装和使用

Vite 项目

1. 安装依赖

2. 配置 Vite

3. 在全局 CSS 中引入

4. 配置自定义主题

5. 使用示例

普通 HTML 项目

方式一：使用 CDN（浏览器版）

方式二：使用 PostCSS（推荐用于生产环境）

React 项目

使用 Create React App

Vue 项目（CLI 方式）

常用指令

@theme

theme()

@apply

@layer

@responsive

@screen

常用类名参考

布局相关

尺寸相关

间距相关

颜色相关

Flexbox 对齐

边框和圆角

阴影和效果

文本样式

定位

伪类选择器和变体

状态变体

结构选择器

响应式断点

暗色模式

任意值支持

实用技巧

1. 组合类名

2. 响应式设计模式

3. 组件提取

4. 自定义配置

动画和变换

过渡效果（Transition）

基本用法

过渡时长

过渡函数

延迟

从顶部移入移出效果

基础从顶部移入移出

完整的从顶部移入移出组件示例

从顶部移入移出 + 淡入淡出

使用 @apply 创建从顶部移入移出类

变换（Transform）

位移（Translate）

旋转（Rotate）

缩放（Scale）

倾斜（Skew）

动画（Animation）

自定义动画

完整示例：从顶部移入移出卡片

动画性能优化

性能优化

1. PurgeCSS 配置

2. JIT 模式

3. 避免动态类名

最佳实践