Tailwind CSS 日常使用

本文为 Tailwind CSS 的全面使用文档，涵盖核心概念、常用类名、高级技巧及最佳实践，助您高效开发。

一、Tailwind CSS 简介

Tailwind CSS 是一个 实用优先（utility-first） 的 CSS 框架，通过组合低级的原子化类名来构建自定义设计。与传统框架（如 Bootstrap）不同，Tailwind 不提供预定义的组件，而是提供基础工具类。

核心优势：

1. 高度可定制：通过配置文件轻松修改设计系统
2. 响应式设计：内置移动优先的响应式工具
3. JIT 模式：即时生成所需样式，显著减小文件体积
4. 开发效率：减少在 CSS 文件和 HTML 之间切换的时间

二、安装与配置

1. 快速安装（Vite 项目）

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',
        secondary: '#10B981',
      },
      spacing: {
        '128': '32rem',
      }
    },
  },
  plugins: [],
}

3. 引入 Tailwind

在 CSS 文件中添加：

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

三、核心概念与语法

1. 响应式设计

使用前缀指定不同断点的样式：

<div class="text-sm md:text-base lg:text-lg">
  <!-- 移动端: 小号字, 平板: 基础字号, 桌面: 大号字 -->
</div>

断点对应关系：

前缀	屏幕宽度	CSS 媒体查询
sm	≥640px	@media (min-width: 640px)
md	≥768px	@media (min-width: 768px)
lg	≥1024px	@media (min-width: 1024px)
xl	≥1280px	@media (min-width: 1280px)
2xl	≥1536px	@media (min-width: 1536px)

2. 状态变体

使用前缀添加交互状态：

<button class="bg-blue-500 hover:bg-blue-700 focus:ring-2">
  悬停变深蓝，聚焦有光环
</button>

常用状态前缀：

• hover: 鼠标悬停
• focus: 获得焦点
• active: 激活状态
• disabled: 禁用状态
• group-hover: 父元素悬停
• dark: 暗黑模式

3. 暗黑模式

在 tailwind.config.js 中启用：

module.exports = {
  darkMode: 'class', // 或 'media'
  // ...
}

使用示例：

<div class="bg-white dark:bg-gray-800">
  <h1 class="text-gray-900 dark:text-white">暗黑模式标题</h1>
</div>

四、常用工具类速查表

1. 布局与容器

功能	类名示例	说明
容器	container mx-auto	居中容器
块级显示	block	块级元素
内联块	inline-block	内联块元素
Flex 容器	flex	创建 flex 容器
Flex 方向	flex-row, flex-col	主轴方向
内容对齐	justify-center	主轴居中
项目对齐	items-center	交叉轴居中
Grid 布局	grid grid-cols-3	创建 3 列网格

2. 间距系统

Tailwind 使用基于 rem 的间距比例系统（1单位 = 0.25rem = 4px）

方向	类名模式	示例
所有	m-{size}	m-4 (16px外边距)
水平	mx-{size}	mx-auto (水平居中)
垂直	my-{size}	my-2 (上下8px)
上	mt-{size}	mt-8 (上边距32px)
右	mr-{size}	mr-4 (右边距16px)
下	mb-{size}	mb-0 (无下边距)
左	ml-{size}	ml-2 (左边距8px)
内边距	p-{size}	p-6 (内边距24px)

常用尺寸：

• 0: 0
• 0.5: 0.125rem (2px)
• 1: 0.25rem (4px)
• 2: 0.5rem (8px)
• 3: 0.75rem (12px)
• 4: 1rem (16px)
• 5: 1.25rem (20px)
• 6: 1.5rem (24px)
• 8: 2rem (32px)
• 10: 2.5rem (40px)
• 12: 3rem (48px)

3. 尺寸控制

功能	类名模式	示例
宽度	w-{size}	w-64 (宽度16rem)
高度	h-{size}	h-screen (100vh)
最大宽度	max-w-{size}	max-w-md (最大宽度28rem)
最小高度	min-h-{size}	min-h-screen (最小高度100vh)
全尺寸	w-full h-full	100%宽高

4. 排版系统

功能	类名示例	说明
字体大小	text-xs 到 text-6xl	12级字号
字体粗细	font-thin 到 font-black	9级字重
文本对齐	text-left/center/right	文本对齐
文本颜色	text-{color}-{shade}	text-blue-600
行高	leading-{size}	leading-relaxed
字母间距	tracking-{size}	tracking-wide
文本装饰	underline line-through	下划线/删除线

5. 颜色系统

Tailwind 提供丰富的调色板，格式为 {属性}-{颜色}-{深浅}

常用颜色：

• slate, gray, zinc, neutral, stone
• red, orange, amber, yellow
• lime, green, emerald, teal
• cyan, sky, blue, indigo
• violet, purple, fuchsia, pink, rose

示例：

<div class="bg-blue-500 text-white border-2 border-red-300">
  蓝色背景，白色文字，红色边框
</div>

6. 边框与圆角

功能	类名示例	说明
边框宽度	border, border-2	边框粗细
边框颜色	border-{color}	border-blue-500
圆角	rounded, rounded-lg	圆角大小
单独圆角	rounded-t-lg	顶部圆角
边框样式	border-dashed	虚线边框

7. 背景与渐变

功能	类名示例	说明
背景颜色	bg-{color}	bg-indigo-600
背景渐变	bg-gradient-to-r	从左到右渐变
渐变起点	from-{color}, to-{color}	from-blue-400 to-purple-500
背景图片	bg-cover bg-center	背景图覆盖并居中

8. 特效与动画

功能	类名示例	说明
阴影	shadow, shadow-lg	盒子阴影
透明度	opacity-{value}	opacity-75
过渡	transition duration-300	300ms过渡动画
变换	transform rotate-45	旋转45度
动画	animate-bounce	内置弹跳动画

五、高级技巧

1. 自定义类

在 CSS 文件中使用 @apply 组合工具类：

.btn {
  @apply px-4 py-2 rounded font-semibold;
}

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

2. 使用任意值

对于特殊需求，可使用方括号语法：

<div class="top-[117px] w-[calc(100%-2rem)] bg-[#1da1f2]">
  <!-- 自定义定位、计算宽度和特定颜色 -->
</div>

3. 伪元素与自定义内容

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

4. 插件扩展

安装官方插件：

npm install @tailwindcss/forms @tailwindcss/typography

配置 tailwind.config.js：

module.exports = {
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
  ]
}

六、最佳实践

1. 类名排序建议

按功能分组排序，提高可读性：

<!-- 布局 → 尺寸 → 间距 → 排版 → 边框 → 背景 → 特效 → 交互 -->
<button 
  class="
    inline-flex items-center 
    w-full md:w-auto 
    px-4 py-2 
    text-base font-medium 
    border border-transparent rounded-md 
    bg-indigo-600 
    shadow-sm 
    hover:bg-indigo-700 focus:outline-none
  "
>
  示例按钮
</button>

2. 提取组件

对于重复使用的UI，提取为Vue/React组件：

<template>
  <button :class="buttonClasses">
    <slot></slot>
  </button>
</template>

<script setup>
const props = defineProps({
  variant: {
    type: String,
    default: 'primary'
  }
})

const buttonClasses = computed(() => {
  const base = "px-4 py-2 rounded font-medium transition"
  
  return {
    'primary': `${base} bg-blue-600 text-white hover:bg-blue-700`,
    'secondary': `${base} bg-gray-200 text-gray-800 hover:bg-gray-300`,
  }[props.variant]
})
</script>

3. 性能优化

1. 启用JIT模式（Tailwind v2.1+ 默认启用）
2. 清除未使用样式：

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.html',
    './src/**/*.vue',
    './src/**/*.jsx',
  ],
}

3. 压缩生产环境CSS

七、常见问题解决方案

1. 样式不生效？

• 检查 content 配置是否包含相应文件
• 确认类名拼写正确
• 确保构建过程包含 Tailwind

2. 如何覆盖组件库样式？

<div class="[&>.el-button]:bg-red-500">
  <!-- 内部所有.el-button背景变红 -->
</div>

3. 如何扩展主题？

在 tailwind.config.js 中扩展：

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          light: '#85d7ff',
          DEFAULT: '#1fb6ff',
          dark: '#009eeb',
        }
      }
    }
  }
}

八、资源推荐

1. 官方文档 - 最全面的参考资料
2. Tailwind Play - 在线沙盒环境
3. Tailwind UI - 官方UI组件库
4. Headless UI - 无样式交互组件

通过掌握这些核心概念和技巧，您将能够高效利用 Tailwind CSS 构建美观且一致的界面。本指南可作为日常开发的速查手册，助您提升开发效率！