TailwindCSS：高效构建现代化UI

目录

[什么是 Tailwind CSS](#什么是 Tailwind CSS)

核心优势

安装与配置

[1. 安装 Tailwind CSS](#1. 安装 Tailwind CSS)

[2. 配置文件](#2. 配置文件)

[Tailwind CSS v4 配置（本项目使用）](#Tailwind CSS v4 配置（本项目使用）)

[3. 引入 Tailwind CSS](#3. 引入 Tailwind CSS)

核心概念

[1. 实用优先（Utility-First）](#1. 实用优先（Utility-First）)

[2. 类名组合](#2. 类名组合)

基础工具类

[1. 布局（Layout）](#1. 布局（Layout）)

显示（Display）

Flexbox

Grid

定位（Position）

尺寸（Sizing）

间距（Spacing）

[2. 排版（Typography）](#2. 排版（Typography）)

[3. 颜色（Colors）](#3. 颜色（Colors）)

[4. 边框（Borders）](#4. 边框（Borders）)

[5. 阴影（Shadows）](#5. 阴影（Shadows）)

[6. 透明度（Opacity）](#6. 透明度（Opacity）)

[7. 变换（Transforms）](#7. 变换（Transforms）)

[8. 过渡与动画（Transitions & Animations）](#8. 过渡与动画（Transitions & Animations）)

[9. 溢出（Overflow）](#9. 溢出（Overflow）)

[10. Z-index](#10. Z-index)

响应式设计

断点（Breakpoints）

响应式前缀

自定义断点

状态变体

[1. 悬停（Hover）](#1. 悬停（Hover）)

[2. 焦点（Focus）](#2. 焦点（Focus）)

[3. 激活（Active）](#3. 激活（Active）)

[4. 禁用（Disabled）](#4. 禁用（Disabled）)

[5. 选中（Checked）](#5. 选中（Checked）)

[6. 第一个/最后一个子元素](#6. 第一个/最后一个子元素)

[7. 奇数/偶数子元素](#7. 奇数/偶数子元素)

[8. 组（Group）](#8. 组（Group）)

[9. 同级（Peer）](#9. 同级（Peer）)

[10. 暗色模式（Dark Mode）](#10. 暗色模式（Dark Mode）)

[11. 打印样式（Print）](#11. 打印样式（Print）)

自定义配置

[1. 扩展主题](#1. 扩展主题)

[2. 覆盖默认主题](#2. 覆盖默认主题)

[3. 自定义工具类](#3. 自定义工具类)

[4. 使用 @apply](#4. 使用 @apply)

[5. 安全列表（Safelist）](#5. 安全列表（Safelist）)

最佳实践

[1. 组件提取](#1. 组件提取)

[2. 使用 @layer](#2. 使用 @layer)

[3. 保持类名可读性](#3. 保持类名可读性)

[4. 使用 CSS 变量](#4. 使用 CSS 变量)

[5. 避免过度使用工具类](#5. 避免过度使用工具类)

高级技巧

[1. 任意值（Arbitrary Values）](#1. 任意值（Arbitrary Values）)

[2. 任意属性（Arbitrary Properties）](#2. 任意属性（Arbitrary Properties）)

[3. 容器查询（Container Queries）](#3. 容器查询（Container Queries）)

[5. 重要修饰符](#5. 重要修饰符)

[6. 变体修饰符](#6. 变体修饰符)

[7. 响应式容器](#7. 响应式容器)

[8. 网格自动填充](#8. 网格自动填充)

[9. 渐变背景](#9. 渐变背景)

[10. 背景混合模式](#10. 背景混合模式)

常见问题与解决方案

[1. 样式不生效](#1. 样式不生效)

[2. 生产环境样式丢失](#2. 生产环境样式丢失)

[3. 自定义颜色不生效](#3. 自定义颜色不生效)

[4. 响应式断点不工作](#4. 响应式断点不工作)

[5. 暗色模式不工作](#5. 暗色模式不工作)

[6. 自定义工具类冲突](#6. 自定义工具类冲突)

[7. 性能优化](#7. 性能优化)

[8. 与第三方库冲突](#8. 与第三方库冲突)

实用示例

[1. 卡片组件](#1. 卡片组件)

[2. 导航栏](#2. 导航栏)

[3. 按钮组件](#3. 按钮组件)

[4. 表单输入](#4. 表单输入)

[5. 模态框](#5. 模态框)

[6. 加载动画](#6. 加载动画)

[7. 响应式网格](#7. 响应式网格)

总结

下一步学习建议

有用的资源

---

什么是 Tailwind CSS

Tailwind CSS 是一个**实用优先（Utility-First）**的 CSS 框架，它提供了大量低级别的工具类，让你可以直接在 HTML 中快速构建自定义设计，而无需编写自定义 CSS。

核心优势

• ✅ 快速开发：无需离开 HTML 就能构建界面

• ✅ 高度可定制：通过配置文件轻松定制设计系统

• ✅ 响应式设计：内置响应式工具类

• ✅ 生产优化：自动移除未使用的 CSS，减小文件体积

• ✅一致性：使用设计令牌确保设计一致性

安装与配置

1. 安装 Tailwind CSS

使用 npm/yarn/pnpm

# npm

npm install -D tailwindcss postcss autoprefixer

# yarn

yarn add -D tailwindcss postcss autoprefixer

# pnpm

pnpm add -D tailwindcss postcss autoprefixer

使用 Vite（如本项目）

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

2. 配置文件

tailwind.config.js（Tailwind CSS v3）

/** @type {import('tailwindcss').Config} */

export default {

  content: [

    "./index.html",

    "./src/**/*.{vue,js,ts,jsx,tsx}"

  ],

  theme: {

    extend: {

      // 自定义配置

    },

  },

  plugins: [],

}

postcss.config.js

export default {

  plugins: {

    tailwindcss: {},

    autoprefixer: {},

  },

}

Tailwind CSS v4 配置（本项目使用）

// postcss.config.js

import tailwindcss from "@tailwindcss/postcss";

import autoprefixer from "autoprefixer";



export default {

  plugins: [tailwindcss(), autoprefixer()],

};

// tailwind.config.js

/** @type {import('tailwindcss').Config} */

export default {

  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],

  theme: {

    extend: {

      fontFamily: {

        sans: ['"Noto Sans SC"', 'sans-serif'],

      },

    },

  },

  plugins: [],

};

3. 引入 Tailwind CSS

在你的主 CSS 文件中引入：

/* src/style.css 或 main.css */

@tailwind base;

@tailwind components;

@tailwind utilities;

核心概念

1. 实用优先（Utility-First）

Tailwind CSS 使用工具类而不是预定义的组件：

<!-- ❌ 传统方式 -->

<div class="card">

  <h2 class="card-title">标题</h2>

</div>



<!-- ✅ Tailwind 方式 -->

<div class="bg-white rounded-lg shadow-md p-6">

  <h2 class="text-2xl font-bold text-gray-800">标题</h2>

</div>

2. 类名组合

通过组合多个工具类来创建复杂的设计：

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  按钮
</button>

基础工具类

1. 布局（Layout）

显示（Display）

<div class="block">块级元素</div>

<div class="inline">行内元素</div>

<div class="flex">弹性布局</div>

<div class="grid">网格布局</div>

<div class="hidden">隐藏</div>

<div class="inline-block">行内块</div>

<div class="inline-flex">行内弹性</div>

Flexbox

<!-- 容器 -->

<div class="flex flex-row">水平排列</div>

<div class="flex flex-col">垂直排列</div>

<div class="flex justify-center">水平居中</div>

<div class="flex items-center">垂直居中</div>

<div class="flex justify-between">两端对齐</div>

<div class="flex justify-around">环绕分布</div>

<div class="flex justify-evenly">均匀分布</div>

<div class="flex-wrap">允许换行</div>

<div class="flex-nowrap">不换行</div>


<!-- 子元素 -->

<div class="flex-1">占据剩余空间</div>

<div class="flex-auto">自动调整</div>

<div class="flex-none">不伸缩</div>

<div class="flex-grow">允许放大</div>

<div class="flex-shrink">允许缩小</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-3">

  <!-- 移动端1列，中等屏幕2列，大屏幕3列 -->

</div>



<!-- 网格模板区域 -->

<div class="grid grid-cols-4 gap-4">

  <div class="col-span-2">占据2列</div>

  <div class="col-span-1">占据1列</div>

  <div class="col-span-1">占据1列</div>

</div>

定位（Position）

<div class="relative">相对定位</div>

<div class="absolute">绝对定位</div>

<div class="fixed">固定定位</div>

<div class="sticky">粘性定位</div>

<div class="static">静态定位</div>


<!-- 位置 -->

<div class="top-0 left-0">左上角</div>

<div class="top-0 right-0">右上角</div>

<div class="bottom-0 left-0">左下角</div>

<div class="bottom-0 right-0">右下角</div>

<div class="inset-0">全屏覆盖（top-0 right-0 bottom-0 left-0）</div>

尺寸（Sizing）

<!-- 宽度 -->

<div class="w-full">100% 宽度</div>

<div class="w-screen">100vw 宽度</div>

<div class="w-1/2">50% 宽度</div>

<div class="w-1/3">33.333% 宽度</div>

<div class="w-1/4">25% 宽度</div>

<div class="w-64">16rem (256px)</div>

<div class="w-auto">自动宽度</div>

<div class="w-fit">适应内容</div>

<div class="w-max">最大内容宽度</div>

<div class="w-min">最小内容宽度</div>

<!-- 高度 -->

<div class="h-full">100% 高度</div>

<div class="h-screen">100vh 高度</div>

<div class="h-64">16rem (256px)</div>

<div class="h-auto">自动高度</div>

<div class="min-h-screen">最小高度100vh</div>

<div class="max-h-screen">最大高度100vh</div>

间距（Spacing）

<!-- Padding（内边距） -->

<div class="p-4">所有方向 1rem</div>

<div class="px-4">水平方向 1rem</div>

<div class="py-4">垂直方向 1rem</div>

<div class="pt-4">上 1rem</div>

<div class="pr-4">右 1rem</div>

<div class="pb-4">下 1rem</div>

<div class="pl-4">左 1rem</div>

<!-- Margin（外边距） -->

<div class="m-4">所有方向 1rem</div>

<div class="mx-4">水平方向 1rem</div>

<div class="my-4">垂直方向 1rem</div>

<div class="mt-4">上 1rem</div>

<div class="mr-4">右 1rem</div>

<div class="mb-4">下 1rem</div>

<div class="ml-4">左 1rem</div>

<div class="mx-auto">水平居中</div>

<!-- 间距值 -->

<!-- 0, 0.5 (0.125rem), 1 (0.25rem), 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96 -->

2. 排版（Typography）

<!-- 字体大小 -->
<h1 class="text-xs">超小 (0.75rem)</h1>

<h1 class="text-sm">小 (0.875rem)</h1>

<h1 class="text-base">基础 (1rem)</h1>

<h1 class="text-lg">大 (1.125rem)</h1>

<h1 class="text-xl">超大 (1.25rem)</h1>

<h1 class="text-2xl">2xl (1.5rem)</h1>

<h1 class="text-3xl">3xl (1.875rem)</h1>

<h1 class="text-4xl">4xl (2.25rem)</h1>

<h1 class="text-5xl">5xl (3rem)</h1>

<h1 class="text-6xl">6xl (3.75rem)</h1>

<h1 class="text-7xl">7xl (4.5rem)</h1>

<h1 class="text-8xl">8xl (6rem)</h1>

<h1 class="text-9xl">9xl (8rem)</h1>

<!-- 字体粗细 -->

<p class="font-thin">100</p>

<p class="font-extralight">200</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="font-extrabold">800</p>

<p class="font-black">900</p>

<!-- 文本对齐 -->

<p class="text-left">左对齐</p>

<p class="text-center">居中</p>

<p class="text-right">右对齐</p>

<p class="text-justify">两端对齐</p>

<!-- 文本装饰 -->

<p class="underline">下划线</p>

<p class="line-through">删除线</p>

<p class="no-underline">无装饰</p>

<p class="overline">上划线</p>


<!-- 文本转换 -->

<p class="uppercase">大写</p>

<p class="lowercase">小写</p>

<p class="capitalize">首字母大写</p>

<p class="normal-case">正常大小写</p>

<!-- 行高 -->

<p class="leading-none">1</p>

<p class="leading-tight">1.25</p>

<p class="leading-snug">1.375</p>

<p class="leading-normal">1.5</p>

<p class="leading-relaxed">1.625</p>

<p class="leading-loose">2</p>


<!-- 字间距 -->

<p class="tracking-tighter">-0.05em</p>

<p class="tracking-tight">-0.025em</p>

<p class="tracking-normal">0</p>

<p class="tracking-wide">0.025em</p>

<p class="tracking-wider">0.05em</p>

<p class="tracking-widest">0.1em</p>


<!-- 文本溢出 -->

<p class="truncate">单行截断（省略号）</p>

<p class="overflow-hidden text-ellipsis line-clamp-2">多行截断（2行）</p>

3. 颜色（Colors）

<!-- 文本颜色 -->

<p class="text-gray-500">灰色文本</p>

<p class="text-blue-500">蓝色文本</p>

<p class="text-red-500">红色文本</p>

<p class="text-green-500">绿色文本</p>

<p class="text-yellow-500">黄色文本</p>

<p class="text-purple-500">紫色文本</p>

<p class="text-pink-500">粉色文本</p>

<p class="text-indigo-500">靛蓝色文本</p>

<p class="text-white">白色文本</p>

<p class="text-black">黑色文本</p>

<!-- 背景颜色 -->

<div class="bg-gray-100">灰色背景</div>

<div class="bg-blue-500">蓝色背景</div>

<div class="bg-red-500">红色背景</div>

<div class="bg-green-500">绿色背景</div>

<div class="bg-gradient-to-r from-blue-500 to-purple-500">渐变背景</div>



<!-- 边框颜色 -->

<div class="border border-gray-300">灰色边框</div>

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

<!-- 颜色透明度 -->

<div class="bg-blue-500/50">50% 透明度</div>

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

<div class="text-gray-500/50">50% 透明文本</div>



<!-- 颜色值范围 -->

<!-- 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 -->

<!-- 例如：bg-blue-50 到 bg-blue-950 -->

4. 边框（Borders）

<!-- 边框宽度 -->

<div class="border">1px 边框</div>

<div class="border-0">无边框</div>

<div class="border-2">2px 边框</div>

<div class="border-4">4px 边框</div>

<div class="border-8">8px 边框</div>

<!-- 边框方向 -->

<div class="border-t">上边框</div>

<div class="border-r">右边框</div>

<div class="border-b">下边框</div>

<div class="border-l">左边框</div>



<!-- 边框样式 -->

<div class="border-solid">实线</div>

<div class="border-dashed">虚线</div>

<div class="border-dotted">点线</div>

<div class="border-double">双线</div>

<div class="border-none">无边框</div>



<!-- 圆角 -->

<div class="rounded-none">无圆角</div>

<div class="rounded-sm">小圆角 (0.125rem)</div>

<div class="rounded">默认圆角 (0.25rem)</div>

<div class="rounded-md">中等圆角 (0.375rem)</div>

<div class="rounded-lg">大圆角 (0.5rem)</div>

<div class="rounded-xl">超大圆角 (0.75rem)</div>

<div class="rounded-2xl">2xl 圆角 (1rem)</div>

<div class="rounded-3xl">3xl 圆角 (1.5rem)</div>

<div class="rounded-full">完全圆形</div>



<!-- 单独圆角 -->

<div class="rounded-t-lg">上圆角</div>

<div class="rounded-r-lg">右圆角</div>

<div class="rounded-b-lg">下圆角</div>

<div class="rounded-l-lg">左圆角</div>

<div class="rounded-tl-lg">左上圆角</div>

<div class="rounded-tr-lg">右上圆角</div>

<div class="rounded-bl-lg">左下圆角</div>

<div class="rounded-br-lg">右下圆角</div>

5. 阴影（Shadows）

<!-- 阴影 -->

<div class="shadow-sm">小阴影</div>

<div class="shadow">默认阴影</div>

<div class="shadow-md">中等阴影</div>

<div class="shadow-lg">大阴影</div>

<div class="shadow-xl">超大阴影</div>

<div class="shadow-2xl">2xl 阴影</div>

<div class="shadow-inner">内阴影</div>

<div class="shadow-none">无阴影</div>



<!-- 彩色阴影 -->

<div class="shadow-blue-500/50">蓝色阴影</div>

<div class="shadow-red-500/50">红色阴影</div>

6. 透明度（Opacity）

<div class="opacity-0">完全透明</div>

<div class="opacity-25">25% 不透明</div>

<div class="opacity-50">50% 不透明</div>

<div class="opacity-75">75% 不透明</div>

<div class="opacity-100">完全不透明</div>

7. 变换（Transforms）

<!-- 旋转 -->

<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="scale-0">0倍</div>

<div class="scale-50">0.5倍</div>

<div class="scale-75">0.75倍</div>

<div class="scale-100">1倍</div>

<div class="scale-110">1.1倍</div>

<div class="scale-125">1.25倍</div>

<div class="scale-150">1.5倍</div>


<!-- 平移 -->

<div class="translate-x-0">X轴 0</div>

<div class="translate-x-4">X轴 1rem</div>

<div class="translate-y-4">Y轴 1rem</div>

<div class="-translate-x-4">X轴 -1rem</div>

<div class="-translate-y-4">Y轴 -1rem</div>


<!-- 倾斜 -->

<div class="skew-x-0">X轴倾斜 0</div>

<div class="skew-x-12">X轴倾斜 12度</div>

<div class="skew-y-12">Y轴倾斜 12度</div>

8. 过渡与动画（Transitions & Animations）

<!-- 过渡 -->

<div class="transition">基础过渡</div>

<div class="transition-all">所有属性过渡</div>

<div class="transition-colors">颜色过渡</div>

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

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



<!-- 持续时间 -->

<div class="duration-75">75ms</div>

<div class="duration-100">100ms</div>

<div class="duration-150">150ms</div>

<div class="duration-200">200ms</div>

<div class="duration-300">300ms</div>

<div class="duration-500">500ms</div>

<div class="duration-700">700ms</div>

<div class="duration-1000">1000ms</div>



<!-- 缓动函数 -->

<div class="ease-linear">线性</div>

<div class="ease-in">缓入</div>

<div class="ease-out">缓出</div>

<div class="ease-in-out">缓入缓出</div>



<!-- 延迟 -->

<div class="delay-75">75ms 延迟</div>

<div class="delay-100">100ms 延迟</div>

<div class="delay-150">150ms 延迟</div>

<div class="delay-300">300ms 延迟</div>



<!-- 动画 -->

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

<div class="animate-ping">ping 动画</div>

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

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

9. 溢出（Overflow）

<div class="overflow-auto">自动滚动</div>

<div class="overflow-hidden">隐藏溢出</div>

<div class="overflow-visible">显示溢出</div>

<div class="overflow-scroll">强制滚动</div>

<div class="overflow-x-auto">水平滚动</div>

<div class="overflow-y-auto">垂直滚动</div>

10. Z-index

<div class="z-0">z-index: 0</div>

<div class="z-10">z-index: 10</div>

<div class="z-20">z-index: 20</div>

<div class="z-30">z-index: 30</div>

<div class="z-40">z-index: 40</div>

<div class="z-50">z-index: 50</div>

<div class="z-auto">z-index: auto</div>

响应式设计

Tailwind CSS 使用移动优先的响应式设计方法。

断点（Breakpoints）

// 默认断点

sm: '640px',   // 小屏幕（手机横屏）

md: '768px',   // 中等屏幕（平板）

lg: '1024px',  // 大屏幕（笔记本）

xl: '1280px',  // 超大屏幕（桌面）

2xl: '1536px', // 2倍超大屏幕（大桌面）

响应式前缀

<!-- 基础样式（移动端） -->

<div class="text-sm md:text-base lg:text-lg xl:text-xl">

  <!-- 移动端：小号，平板：基础，笔记本：大号，桌面：超大 -->

</div>



<!-- 响应式布局 -->

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">

  <!-- 移动端1列，平板2列，笔记本3列，桌面4列 -->

</div>



<!-- 响应式显示 -->

<div class="hidden md:block">

  <!-- 移动端隐藏，中等屏幕及以上显示 -->

</div>


<div class="block md:hidden">

  <!-- 移动端显示，中等屏幕及以上隐藏 -->

</div>


<!-- 响应式间距 -->

<div class="p-4 md:p-6 lg:p-8">

  <!-- 移动端：1rem，平板：1.5rem，笔记本：2rem -->

</div>


<!-- 响应式 Flexbox -->

<div class="flex flex-col md:flex-row">

  <!-- 移动端垂直排列，平板及以上水平排列 -->

</div>

自定义断点

在 `tailwind.config.js` 中：

export default {

  theme: {

    extend: {

      screens: {

        'xs': '475px',

        '3xl': '1920px',

      },

    },

  },

}

状态变体

1. 悬停（Hover）

<button class="bg-blue-500 hover:bg-blue-700">

  悬停变深蓝色

</button>


<div class="text-gray-600 hover:text-blue-600">

  悬停变蓝色

</div>


<div class="opacity-50 hover:opacity-100">

  悬停变不透明

</div>

2. 焦点（Focus）

<input class="border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-500">

<!-- 聚焦时边框和环变蓝色 -->


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

  聚焦按钮

</button>

3. 激活（Active）

<button class="bg-blue-500 active:bg-blue-800">

  点击时变深蓝色

</button>

4. 禁用（Disabled）

<button class="bg-gray-400 disabled:bg-gray-300 disabled:cursor-not-allowed" disabled>

  禁用按钮

</button>

5. 选中（Checked）

<input type="checkbox" class="checked:bg-blue-500">

6. 第一个/最后一个子元素

<div class="space-y-2">

  <div class="first:pt-0">第一个元素</div>

  <div>中间元素</div>

  <div class="last:pb-0">最后一个元素</div>

</div>

7. 奇数/偶数子元素

<div class="space-y-2">

  <div class="odd:bg-gray-100">奇数行</div>

  <div class="even:bg-white">偶数行</div>

</div>

8. 组（Group）

<div class="group">

  <div class="text-gray-600 group-hover:text-blue-600">

    悬停父元素时变蓝色

  </div>

</div>

9. 同级（Peer）

<div class="peer">

  <input type="checkbox" class="peer">

  <div class="hidden peer-checked:block">

    选中时显示

  </div>

</div>

10. 暗色模式（Dark Mode）

<!-- 配置 darkMode: 'class' -->

<div class="bg-white dark:bg-gray-800">

  <p class="text-gray-900 dark:text-white">

    暗色模式文本

  </p>

</div>

配置：

export default {

  darkMode: 'class', // 或 'media'

  // ...

}

11. 打印样式（Print）

div class="hidden print:block">

  打印时显示

</div>

自定义配置

1. 扩展主题

// tailwind.config.js

export default {

  theme: {

    extend: {

      // 自定义颜色

      colors: {

        'brand-blue': '#1e40af',

        'brand-red': '#dc2626',

      },

     

      // 自定义字体

      fontFamily: {

        sans: ['Inter', 'sans-serif'],

        mono: ['Fira Code', 'monospace'],

      },

     

      // 自定义间距

      spacing: {

        '128': '32rem',

        '144': '36rem',

      },

     

      // 自定义断点

      screens: {

        'xs': '475px',

        '3xl': '1920px',

      },

     

      // 自定义圆角

      borderRadius: {

        '4xl': '2rem',

      },

     

      // 自定义阴影

      boxShadow: {

        'inner-lg': 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.1)',

      },

    },

  },

}

2. 覆盖默认主题

export default {

  theme: {

    // 完全替换默认值

    colors: {

      // 这会覆盖所有默认颜色

      primary: '#1e40af',

      secondary: '#dc2626',

    },

  },

}

3. 自定义工具类

在 CSS 文件中：

@layer components {

  .btn-primary {

    @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;

  }

  .btn-primary:hover {

    @apply bg-blue-700;

  }


  .card {

    @apply bg-white rounded-lg shadow-md p-6;

  }

}

4. 使用 @apply

@layer components {

  .btn {

    @apply px-4 py-2 rounded font-semibold;

  }


  .btn-blue {

    @apply bg-blue-500 text-white;

  }


  .btn-blue:hover {

    @apply bg-blue-700;

  }

}

5. 安全列表（Safelist）

用于确保动态生成的类名不被清除：

export default {

  safelist: [

    'bg-blue-500',

    'text-white',

    {

      pattern: /bg-(red|green|blue)-(100|200|300)/,

    },

  ],

}

最佳实践

1. 组件提取

```vue

<!-- ❌ 重复的工具类 -->

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">

  按钮1

</button>

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">

  按钮2

</button>



<!-- ✅ 提取为组件 -->

<template>

  <button class="btn-primary">

    <slot></slot>

  </button>

</template>



<style scoped>

.btn-primary {

  @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;

}

</style>

2. 使用 @layer

@layer components {

  /* 组件样式 */

  .btn { /* ... */ }

}


@layer utilities {

  /* 自定义工具类 */

  .scrollbar-hide { /* ... */ }

}

3. 保持类名可读性

<!-- ❌ 难以阅读 -->

<div class="flex items-center justify-between p-4 bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow">



<!-- ✅ 分行组织 -->

<div class="

  flex items-center justify-between

  p-4

  bg-white rounded-lg

  shadow-md hover:shadow-lg

  transition-shadow

">

4. 使用 CSS 变量

:root {

  --color-primary: #1e40af;

}

/* tailwind.config.js */

export default {

  theme: {

    extend: {

      colors: {

        primary: 'var(--color-primary)',

      },

    },

  },

}

5. 避免过度使用工具类

<!-- ❌ 过度使用 -->

<div class="w-full h-full flex flex-col items-center justify-center bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500 p-8 rounded-2xl shadow-2xl">


<!-- ✅ 适度使用，复杂样式用 CSS -->

<div class="hero-container">

  <!-- 复杂样式在 CSS 中定义 -->

</div>

高级技巧

1. 任意值（Arbitrary Values）

<!-- 任意宽度 -->

<div class="w-[500px]">500px 宽度</div>


<!-- 任意颜色 -->

<div class="bg-[#1da1f2]">Twitter 蓝色</div>


<!-- 任意间距 -->

<div class="p-[17px]">17px 内边距</div>


<!-- 任意透明度 -->

<div class="bg-blue-500/[0.15]">15% 透明度</div>


<!-- 任意变换 -->

<div class="rotate-[17deg]">17度旋转</div>

2. 任意属性（Arbitrary Properties）

div class="[mask-image:url(mask.svg)]">

  使用任意 CSS 属性

</div>


<div class="[--my-var:value]">

  使用 CSS 变量

</div>

3. 容器查询（Container Queries）

<div class="@container">

  <div class="@lg:flex">

    容器查询示例

  </div>

</div>

4. 修饰符组合

<div class="hover:focus:bg-blue-500">

  悬停且聚焦时变蓝色

</div>

<div class="dark:md:hover:bg-gray-800">

  暗色模式 + 中等屏幕 + 悬停

</div>

5. 重要修饰符

<div class="!bg-blue-500">

  强制应用样式（!important）

</div>

6. 变体修饰符

<!-- 自定义变体 -->

<div class="before:content-[''] before:block">

  使用 before 伪元素

</div>

<div class="after:content-['→']">

  使用 after 伪元素

</div>

7. 响应式容器

<div class="container mx-auto px-4">

  <!-- 响应式容器，自动居中，带内边距 -->

</div>

8. 网格自动填充

<div class="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-4">

  <!-- 自动适应列数 -->

</div>

9. 渐变背景

<!-- 线性渐变 -->

<div class="bg-gradient-to-r from-blue-500 to-purple-500">

  从左到右

</div>

<div class="bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500">

  对角线渐变

</div>


<!-- 径向渐变 -->

<div class="bg-gradient-radial from-blue-500 to-purple-500">

  径向渐变

</div>

10. 背景混合模式

<div class="bg-blue-500 mix-blend-multiply">

  混合模式

</div>

常见问题与解决方案

1. 样式不生效

问题：添加了 Tailwind 类但样式不显示

解决方案：

• 检查 content 配置是否包含你的文件路径

• 确保 CSS 文件正确引入了 Tailwind 指令

• 重启开发服务器

• 检查是否有其他 CSS 覆盖了样式

2. 生产环境样式丢失

问题：开发环境正常，生产环境样式丢失

解决方案：

• 确保构建过程包含 Tailwind 处理

• 检查 content 配置是否正确

• 使用 safelist 确保动态类名被包含

3. 自定义颜色不生效

问题：在配置中添加了自定义颜色但无法使用

解决方案：

// ✅ 正确：使用 extend

theme: {

  extend: {

    colors: {

      'custom': '#123456',

    },

  },

}


// ❌ 错误：直接覆盖 theme

theme: {

  colors: {

    'custom': '#123456', // 这会覆盖所有默认颜色

  },

}

4. 响应式断点不工作

问题：响应式类名不生效

解决方案：

• 检查断点配置

• 确保使用正确的断点前缀（sm, md, lg, xl, 2xl）

• 检查视口元标签：`<meta name="viewport" content="width=device-width, initial-scale=1">`

5. 暗色模式不工作

问题：暗色模式样式不生效

解决方案：

// tailwind.config.js

export default {

  darkMode: 'class', // 使用类名切换

  // 或

  darkMode: 'media', // 使用媒体查询

}

<!-- 使用类名切换时，需要手动添加 dark 类 -->

<html class="dark">

6. 自定义工具类冲突

问题：自定义工具类与 Tailwind 类冲突

**解决方案**：

@layer utilities {

  /* 自定义工具类放在 utilities 层 */

  .my-custom-class {

    /* ... */

  }

}

7. 性能优化

问题：CSS 文件过大

解决方案：

• 确保使用生产构建（Tailwind 会自动移除未使用的样式）

• 检查 `content` 配置，避免扫描不必要的文件

• 使用 `purge` 或 `content` 配置优化

8. 与第三方库冲突

问题：Tailwind 样式与第三方库冲突

解决方案：

// tailwind.config.js

export default {

  corePlugins: {

    // 禁用冲突的插件

    preflight: false, // 禁用基础样式重置

  },

}

实用示例

1. 卡片组件

<div class="max-w-sm rounded-lg overflow-hidden shadow-lg bg-white">

  <img class="w-full" src="image.jpg" alt="Card">

  <div class="px-6 py-4">

    <div class="font-bold text-xl mb-2">卡片标题</div>

    <p class="text-gray-700 text-base">

      卡片内容描述

    </p>

  </div>

  <div class="px-6 pt-4 pb-2">

    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">

      #标签

    </span>

  </div>

</div>

2. 导航栏

<nav class="bg-white shadow-lg">

  <div class="max-w-7xl mx-auto px-4">

    <div class="flex justify-between h-16">

      <div class="flex items-center">

        <a href="#" class="text-xl font-bold text-gray-800">Logo</a>

      </div>

      <div class="flex items-center 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>

    </div>

  </div>

</nav>

3. 按钮组件

<!-- 基础按钮 -->

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">

  按钮

</button>



<!-- 不同尺寸 -->

<button class="bg-blue-500 text-white py-1 px-2 text-sm rounded">小</button>

<button class="bg-blue-500 text-white py-2 px-4 rounded">中</button>

<button class="bg-blue-500 text-white py-3 px-6 text-lg rounded">大</button>



<!-- 不同样式 -->

<button class="bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded">实心</button>

<button class="border-2 border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white py-2 px-4 rounded">边框</button>

<button class="bg-transparent hover:bg-blue-500 text-blue-500 hover:text-white py-2 px-4 rounded">透明</button>

4. 表单输入

<div class="mb-4">

  <label class="block text-gray-700 text-sm font-bold mb-2">

    用户名

  </label>

  <input

    class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline focus:border-blue-500"

    type="text"

    placeholder="请输入用户名"

  >

</div>

5. 模态框

<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">

  <div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">

    <div class="p-6">

      <h2 class="text-2xl font-bold mb-4">模态框标题</h2>

      <p class="text-gray-700 mb-6">模态框内容</p>

      <div class="flex justify-end space-x-2">

        <button class="px-4 py-2 bg-gray-200 rounded hover:bg-gray-300">取消</button>

        <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700">确认</button>

      </div>

    </div>

  </div>

</div>

6. 加载动画

<div class="flex items-center justify-center">

  <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>

</div>

7. 响应式网格

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">

  <div class="bg-gray-200 p-4 rounded">项目 1</div>

  <div class="bg-gray-200 p-4 rounded">项目 2</div>

  <div class="bg-gray-200 p-4 rounded">项目 3</div>

  <div class="bg-gray-200 p-4 rounded">项目 4</div>

</div>

总结

Tailwind CSS 是一个强大的实用优先 CSS 框架，通过本教程你应该掌握了：

1. ✅ 安装与配置：如何在不同项目中安装和配置 Tailwind CSS

2. ✅ 基础工具类：布局、排版、颜色、边框等常用工具类

3. ✅ 响应式设计：如何使用断点和响应式前缀

4. ✅ 状态变体：悬停、聚焦、暗色模式等状态处理

5. ✅ 自定义配置：如何扩展和自定义主题

6. ✅ 最佳实践：组件提取、代码组织等

7. ✅ 高级技巧：任意值、容器查询等高级功能

8. ✅ 问题解决：常见问题的解决方案

下一步学习建议

• 📚 阅读 [Tailwind CSS 官方文档](https://tailwindcss.com/docs)

• 🎨 探索 [Tailwind UI](https://tailwindui.com/) 组件库

• 🛠️ 学习使用 [Headless UI](https://headlessui.com/) 构建无障碍组件

• 🎯 实践构建完整的项目，加深理解

有用的资源

• 官方文档 ：https://tailwindcss.com/docs

• Playground ：https://play.tailwindcss.com/

• 组件示例 ：https://tailwindui.com/components

• 颜色工具 ：https://tailwindcss.com/docs/customizing-colors

• 插件库 ：https://github.com/aniftyco/awesome-tailwindcss