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

相关推荐
wgb04096 小时前
vxe table 升级之后页面数据不显示解决方法
java·前端·javascript
不如摸鱼去7 小时前
从 Wot UI 出发谈 VSCode 插件的自动化发布
前端·vscode·开源·自动化
IT_陈寒8 小时前
Python开发者必看：这5个鲜为人知的Pandas技巧让你的数据处理效率提升50%
前端·人工智能·后端
豆苗学前端8 小时前
写给女朋友的第一封信，测试方法概论
前端·后端·设计模式
半桶水专家8 小时前
Vue 3 插槽(Slot)详解
前端·javascript·vue.js
袁煦丞8 小时前
本地AI绘画神器+全局访问——Stable Diffusion WebUI 成功突破：cpolar内网穿透实验室第462个成功挑战
前端·程序员·远程工作
一枚前端小能手8 小时前
🏗️ JavaScript类深度解析 - 从构造函数到现代特性的完整指南
前端·javascript
袁煦丞8 小时前
家用NAS+云盘自由NanoPi R4S+iStoreOS：cpolar内网穿透实验室第460个成功挑战
前端·程序员·远程工作
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03BongoCat - 跨平台键盘猫动画工具04GitLab 零基础入门指南：从安装到项目管理全流程05Linux下V2Ray安装配置指南06NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南07Labelme从安装到标注：零基础完整指南08安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）09在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）10jdk21下载、安装（Windows、Linux、macOS）