Tailwind CSS 使用指南

辣辣y2025-10-31 13:54

一、什么是 Tailwind CSS

Tailwind CSS 是一个实用优先的 CSS 框架，与 Bootstrap 等组件库不同，它不提供预定义的组件，而是提供低级别的实用类，让您能够快速构建完全自定义的设计。

主要特点：

  • 实用优先：通过组合简单类名构建复杂界面

  • 响应式设计：内置响应式前缀系统

  • 高度可定制：可完全自定义设计系统

  • 生产优化：自动移除未使用的 CSS

二、安装与配置

1.通过 CDN 使用（简单但有限制）

复制代码 
html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <!-- 您的 HTML 内容 -->
</body>
</html>

2.通过 npm 安装（推荐方式）

复制代码 
bash

npm install -D tailwindcss
npx tailwindcss init

配置 tailwind.config.js：

复制代码 
javascript

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

创建 CSS 文件（如 src/input.css）：

复制代码 
css

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

构建 CSS：

复制代码 
bash

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

三、核心概念

1.断点前缀：

断点前缀 最小宽度 典型设备 使用场景
sm: 640px 小屏手机（横屏） 小型平板、大屏手机
md: 768px 平板（竖屏） 小型笔记本、平板
lg: 1024px 平板（横屏）、笔记本 桌面端设计
xl: 1280px 台式机、大屏笔记本 大屏桌面端
2xl: 1536px 大屏显示器 超大屏幕

2.状态前缀：

2.1交互状态
状态前缀 触发条件 使用示例
hover: 鼠标悬停 hover:bg-blue-600
focus: 获取焦点 focus:ring-2 focus:ring-blue-500
active: 激活状态（点击时） active:scale-95
visited: 访问过的链接 visited:text-purple-600
2.2表单状态
状态前缀 触发条件 使用示例
checked: 复选框/单选选中 checked:bg-blue-500
disabled: 禁用状态 disabled:opacity-50
required: 必填字段 required:border-red-500
invalid: 输入无效 invalid:border-red-500
valid: 输入有效 valid:border-green-500
placeholder: 占位符文本 placeholder:text-gray-400
2.3分组状态
状态前缀 触发条件 使用示例
group-hover: 父级悬停时 group-hover:opacity-100
group-focus: 父级聚焦时 group-focus:visible
group-active: 父级激活时 group-active:block
2.4兄弟状态
状态前缀 触发条件 使用示例
peer-hover: 前一个兄弟悬停 peer-hover:bg-gray-100
peer-focus: 前一个兄弟聚焦 peer-focus:border-blue-500
peer-checked: 前一个兄弟选中 peer-checked:bg-blue-500
2.5结构选择器
状态前缀 触发条件 使用示例
first: 第一个子元素 first:rounded-t
last: 最后一个子元素 last:rounded-b
odd: 奇数子元素 odd:bg-gray-50
even: 偶数子元素 even:bg-white
only: 唯一子元素 only:block
empty: 空元素 empty:hidden
2.6媒体查询状态
状态前缀 触发条件 使用示例
motion-safe: 用户不偏好减少动画 motion-safe:animate-spin
motion-reduce: 用户偏好减少动画 motion-reduce:animate-none
dark: 深色模式 dark:bg-gray-800
print: 打印样式 print:text-black

3. 间距系统

Tailwind 使用基于 4px 的缩放系统：

3.1百分比宽度
类名 宽度 等价 CSS
w-1/2 50% width: 50%;
w-1/3 33.333% width: 33.333%;
w-2/3 66.666% width: 66.666%;
w-1/4 25% width: 25%;
w-2/4 50% width: 50%;
w-3/4 75% width: 75%;
w-full 100% width: 100%;
w-screen 100vw width: 100vw;
3.2固定宽度（基于 rem）
类名 宽度 像素值
w-0 0rem 0px
w-1 0.25rem 4px
w-2 0.5rem 8px
w-4 1rem 16px
w-8 2rem 32px
w-16 4rem 64px
w-32 8rem 128px
w-64 16rem 256px
3.3内边距 (Padding)
类名 作用方向 等价 CSS
p-4 所有方向 padding: 1rem;
px-4 水平方向 padding-left: 1rem; padding-right: 1rem;
py-4 垂直方向 padding-top: 1rem; padding-bottom: 1rem;
pt-4 顶部 padding-top: 1rem;
pb-4 底部 padding-bottom: 1rem;
pl-4 左侧 padding-left: 1rem;
pr-4 右侧 padding-right: 1rem;
3.4外边距 (Margin)
类名 作用方向 等价 CSS
m-4 所有方向 margin: 1rem;
mx-4 水平方向 margin-left: 1rem; margin-right: 1rem;
my-4 垂直方向 margin-top: 1rem; margin-bottom: 1rem;
mt-4 顶部 margin-top: 1rem;
mb-4 底部 margin-bottom: 1rem;
ml-4 左侧 margin-left: 1rem;
mr-4 右侧 margin-right: 1rem;

| 类名 | 效果 | 等价 CSS |
| mx-auto | 水平方向自动外边距 | margin-left: auto; margin-right: auto; |
| my-auto | 垂直方向自动外边距 | margin-top: auto; margin-bottom: auto; |
| m-auto | 所有方向自动外边距 | margin: auto; |
| ml-auto | 左侧自动外边距 | margin-left: auto; |

mr-auto 右侧自动外边距 margin-right: auto;
3.5最大宽度系统：
固定宽度值
类名 最大宽度 像素值 使用场景
max-w-0 0rem 0px 完全收起
max-w-none none 无限制 移除最大宽度
max-w-xs 20rem 320px 超小内容
max-w-sm 24rem 384px 小内容块
max-w-md 28rem 448px 中等内容
max-w-lg 32rem 512px 大内容块
max-w-xl 36rem 576px 超大内容
max-w-2xl 42rem 672px 2倍大内容
max-w-3xl 48rem 768px 3倍大内容
max-w-4xl 56rem 896px 4倍大内容
max-w-5xl 64rem 1024px 5倍大内容
max-w-6xl 72rem 1152px 6倍大内容
max-w-7xl 80rem 1280px 7倍大内容
其他宽度类型
类名 效果 使用场景
max-w-full 100% 不超过父容器宽度
max-w-min min-content 最小内容宽度
max-w-max max-content 最大内容宽度
max-w-fit fit-content 适合内容宽度
max-w-prose 65ch 理想阅读宽度
max-w-screen-sm 640px 小屏幕断点
max-w-screen-md 768px 中等屏幕断点
max-w-screen-lg 1024px 大屏幕断点

4. 颜色系统

4.1最常用的颜色属性：
类别 常用类 用途
文本 text-gray-900, text-gray-600, text-blue-600 内容层次
背景 bg-white, bg-gray-100, bg-blue-500 容器背景
边框 border-gray-300, border-blue-500 边框线条
状态 bg-green-100, bg-red-100, bg-yellow-100 状态提示
4.2数字越大 = 颜色越深
复制代码 
50 → 100 → 200 → 300 → 400 → 500 → 600 → 700 → 800 → 900
最浅 ←─────────────────────────────────────────────→ 最深
4.3常用搭配

  • 50-100：背景色、悬停状态

  • 200-400：边框、分隔线

  • 500-600：主要品牌色、按钮

  • 700-900：深色文本、重要内容

5.字体排版

5.1字体大小 (Font Size)
类名 字体大小 行高 使用场景
text-xs 0.75rem 1rem 辅助文字、标签
text-sm 0.875rem 1.25rem 正文小字、描述
text-base 1rem 1.5rem 默认正文大小
text-lg 1.125rem 1.75rem 大正文、次要标题
text-xl 1.25rem 1.75rem 小标题
text-2xl 1.5rem 2rem 中等标题
text-3xl 1.875rem 2.25rem 大标题
text-4xl 2.25rem 2.5rem 超大标题
text-5xl 3rem 1 页面主标题
text-6xl 3.75rem 1 展示标题
text-7xl 4.5rem 1 特大标题
text-8xl 6rem 1 巨幅标题
text-9xl 8rem 1 最大标题
5.2字体粗细 (Font Weight)
类名 粗细值 使用场景
font-thin 100 极细字体
font-extralight 200 超细字体
font-light 300 细字体
font-normal 400 正常字体（默认）
font-medium 500 中等粗细
font-semibold 600 半粗体
font-bold 700 粗体
font-extrabold 800 超粗体
font-black 900 最粗体
5.3文本对齐 (Text Alignment)
类名 对齐方式 使用场景
text-left 左对齐 默认对齐方式
text-center 居中对齐 标题、按钮文字
text-right 右对齐 数字、时间
text-justify 两端对齐 长篇文章
5.4行高 (Line Height)
类名 行高值 使用场景
leading-3 0.75rem 紧凑行高
leading-4 1rem 紧密行高
leading-5 1.25rem 默认行高
leading-6 1.5rem 舒适行高
leading-7 1.75rem 宽松行高
leading-8 2rem 大段文本
leading-9 2.25rem 标题行高
leading-10 2.5rem 展示文本
leading-none 1 无行高
leading-tight 1.25 紧凑
leading-snug 1.375 较紧凑
leading-normal 1.5 正常
leading-relaxed 1.625 宽松
leading-loose 2 很宽松
5.5字母间距 (Letter Spacing)
类名 间距值 使用场景
tracking-tighter -0.05em 更紧凑
tracking-tight -0.025em 紧凑
tracking-normal 0em 正常（默认）
tracking-wide 0.025em 宽松
tracking-wider 0.05em 更宽松
tracking-widest 0.1em 最宽松
5.6文本装饰 (Text Decoration)
类名 效果 使用场景
underline 下划线 链接、重点
line-through 删除线 原价、已取消
no-underline 无装饰 移除默认下划线
overline 上划线 特殊标注
5.7文本变形 (Text Transform)
类名 效果 使用场景
uppercase 全部大写 标签、导航项
lowercase 全部小写 特殊风格
capitalize 首字母大写 标题、名称
normal-case 正常大小写 恢复默认
5.8文本溢出 (Text Overflow)
类名 效果 使用场景
truncate 单行截断 标题、列表项
overflow-ellipsis 显示省略号 文本截断
overflow-clip 直接裁剪 严格截断
5.9字体样式 (Font Style)
类名 效果 使用场景
italic 斜体 引用、强调
not-italic 非斜体 恢复正常
5.10垂直对齐 (Vertical Align)
类名 效果 使用场景
align-baseline 基线对齐 默认对齐
align-top 顶部对齐 图标对齐
align-middle 居中对齐 表格单元格
align-bottom 底部对齐 底部对齐
align-text-top 文本顶部 文本对齐
align-text-bottom 文本底部 文本对齐
5.11空白处理 (Whitespace)
类名 效果 使用场景
whitespace-normal 正常空白 默认处理
whitespace-nowrap 不换行 单行文本
whitespace-pre 保留空白 代码显示
whitespace-pre-line 保留换行 诗歌、地址
whitespace-pre-wrap 保留空白和换行 代码块
5.12文字换行 (Word Break)
类名 效果 使用场景
break-normal 正常换行 默认行为
break-words 单词内换行 长单词处理
break-all 任意位置换行 无空格文本

6.圆角相关属性：

6.1基础圆角类
类名 圆角值 效果 使用场景
rounded-none 0px 无圆角 直角设计
rounded-sm 0.125rem 小圆角 轻微圆润
rounded 0.25rem 默认圆角 标准按钮、卡片
rounded-md 0.375rem 中等圆角 常用圆角
rounded-lg 0.5rem 大圆角 明显圆角效果
rounded-xl 0.75rem 超大圆角 突出圆角
rounded-2xl 1rem 2倍大圆角 显著圆角
rounded-3xl 1.5rem 3倍大圆角 非常圆润
rounded-full 9999px 完全圆角 圆形、药丸形状
6.2方向性圆角
类名 作用位置 效果
rounded-t 顶部 上边两个角
rounded-r 右侧 右边两个角
rounded-b 底部 下边两个角
rounded-l 左侧 左边两个角
6.3单个角圆角
类名 作用位置 效果
rounded-tl 左上角 左上角圆角
rounded-tr 右上角 右上角圆角
rounded-br 右下角 右下角圆角
rounded-bl 左下角 左下角圆角
7.常用图标
7.1界面图标 (UI Icons)
图标类名 说明 用途
fa-home 首页 导航、主页
fa-user 用户 用户管理、个人中心
fa-cog 齿轮 设置、配置
fa-bell 铃铛 通知、提醒
fa-search 搜索 搜索功能
fa-bars 汉堡菜单 移动端导航
fa-times 关闭 关闭、取消
fa-edit 编辑 编辑操作
fa-trash 删除 删除操作
fa-plus 加号 添加、新建
fa-minus 减号 减少、收缩
7.2文件操作
图标类名 说明 用途
fa-file 文件 文档、文件
fa-folder 文件夹 目录、分类
fa-save 保存 保存操作
fa-download 下载 下载文件
fa-upload 上传 上传文件
7.3箭头方向
图标类名 说明 用途
fa-arrow-left 左箭头 返回、后退
fa-arrow-right 右箭头 前进、下一步
fa-arrow-up 上箭头 向上、顶部
fa-arrow-down 下箭头 向下、展开
fa-chevron-left 左三角箭头 折叠、收起
fa-chevron-right 右三角箭头 展开、更多
7.4状态指示
图标类名 说明 用途
fa-check 对勾 完成、正确
fa-exclamation 感叹号 警告、注意
fa-info 信息 提示信息
fa-question 问号 帮助、疑问
8.网格列数
类名 列数 等效 CSS
grid-cols-1 1 列 grid-template-columns: repeat(1, minmax(0, 1fr))
grid-cols-2 2 列 grid-template-columns: repeat(2, minmax(0, 1fr))
grid-cols-3 3 列 grid-template-columns: repeat(3, minmax(0, 1fr))
grid-cols-4 4 列 grid-template-columns: repeat(4, minmax(0, 1fr))
grid-cols-6 6 列 grid-template-columns: repeat(6, minmax(0, 1fr))
grid-cols-12 12 列 grid-template-columns: repeat(12, minmax(0, 1fr))
9.分割线类：
9.1分隔线类
类名 方向 等效 CSS
divide-y 垂直分隔 > * + * { border-top: 1px solid }
divide-x 水平分隔 > * + * { border-left: 1px solid }
divide-y-0 移除垂直分隔 > * + * { border-top: 0 }
divide-x-0 移除水平分隔 > * + * { border-left: 0 }
9.2颜色变体
类名 颜色值 颜色
divide-gray-100 #f3f4f6 很浅的灰色
divide-gray-200 #e5e7eb 浅灰色
divide-gray-300 #d1d5db 中等灰色
divide-blue-200 #bfdbfe 浅蓝色
divide-red-200 #fecaca 浅红色
10.其他属性

| 类名 | 效果 |

inset-y-0 在垂直方向上拉伸元素，使其顶部和底部都紧贴容器边缘

四、自定义配置

1.扩展主题

在 tailwind.config.js 中：

复制代码 
javascript

module.exports = {
  theme: {
    extend: {
      colors: {
        'brand': {
          100: '#f0f9ff',
          500: '#0ea5e9',
          900: '#0c4a6e',
        }
      },
      spacing: {
        '128': '32rem',
      }
    },
  },
}

2.添加自定义类

在 CSS 文件中：

复制代码 
css

@layer components {
  .btn-primary {
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
  }
  
  .card {
    @apply bg-white rounded-lg shadow-md p-6;
  }
}

五、最佳实践

1. 保持 HTML 整洁

复制代码 
html

<!-- 推荐：使用有意义的类组合 -->
<button class="btn-primary">主要按钮</button>

<!-- 不推荐：类名过长 -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">主要按钮</button>

2. 使用 @apply 提取重复样式

复制代码 
css

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

3. 利用 IDE 插件

安装 Tailwind CSS IntelliSense 插件，获得自动完成和语法高亮。

4. 优化生产构建

确保在生产环境中使用 PurgeCSS 移除未使用的样式：

复制代码 
javascript

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.html',
    './src/**/*.js',
    // 添加所有使用 Tailwind 的文件
  ],
}

六、实用示例

1.卡片组件

复制代码 
html

<div class="max-w-sm rounded overflow-hidden shadow-lg">
  <img class="w-full" src="/img/card-top.jpg" alt="Sunset in the mountains">
  <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">#标签1</span>
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#标签2</span>
  </div>
</div>

2.导航栏

复制代码 
html

<nav class="bg-gray-800">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">
      <div class="flex items-center">
        <div class="flex-shrink-0">
          <span class="text-white font-bold text-xl">Logo</span>
        </div>
        <div class="hidden md:block">
          <div class="ml-10 flex items-baseline space-x-4">
            <a href="#" class="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium">首页</a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">关于</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</nav>

七、总结

Tailwind CSS 通过实用优先的方法提供了极大的灵活性和定制能力。通过掌握核心概念、响应式设计和状态变体，您可以快速构建现代化、响应式的用户界面。记住合理提取重复样式、利用配置扩展主题，并遵循最佳实践来保持代码的可维护性。

相关推荐
摸鱼的春哥3 小时前
春哥的Agent通关秘籍07：5分钟实现文件归类助手【实战】
前端·javascript·后端
念念不忘 必有回响3 小时前
viepress:vue组件展示和源码功能
前端·javascript·vue.js
C澒3 小时前
多场景多角色前端架构方案：基于页面协议化与模块标准化的通用能力沉淀
前端·架构·系统架构·前端框架
崔庆才丨静觅3 小时前
稳定好用的 ADSL 拨号代理，就这家了！
前端
江湖有缘3 小时前
Docker部署music-tag-web音乐标签编辑器
前端·docker·编辑器
恋猫de小郭4 小时前
Flutter Zero 是什么？它的出现有什么意义？为什么你需要了解下？
android·前端·flutter
崔庆才丨静觅11 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby606112 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了12 小时前
「2025 年终总结」在所有失去的人中，我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅12 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03UV安装并设置国内源04openclaw配置教程（linux+局域网ollama）05OpenClaw Chrome扩展使用教程 - 浏览器中继控制06Linux下V2Ray安装配置指南07Claude Code Skills 实用使用手册08AI 规范驱动开发“三剑客”深度对比：Spec-Kit、Kiro 与 OpenSpec 实战指南09Vue-skills的中文文档10openclaw使用nginx反代部署过程 与disconnected (1008): pairing required解决