@include('layouts.partials.header')
Tailwind CSS 速查表（新手友好版）
tags：Tailwind,CSS
时间：2026-03-17
阅读：22
Tailwind CSS 是原子化 CSS 框架，通过预定义的类名快速构建界面，无需手写 CSS。以下是高频常用的类名速查，覆盖日常开发 90% 以上的场景，新手可直接复制使用。
一、核心基础
1. 响应式前缀（移动端优先）
| 前缀 | 断点 | 说明 | 示例 |
|---|---|---|---|
| 无 | <640px | 移动端默认 | text-red-500 |
sm: | ≥640px | 小屏幕（手机横屏） | sm:text-blue-500 |
md: | ≥768px | 中等屏幕（平板） | md:w-1/2 |
lg: | ≥1024px | 大屏幕（笔记本） | lg:flex |
xl: | ≥1280px | 超大屏（桌面） | xl:mx-auto |
2xl: | ≥1536px | 极大屏 | 2xl:py-8 |
2. 自定义值（万能用法）
所有类名都支持通过 [] 传入自定义值，适配特殊场景：
<!-- 自定义宽度、间距、颜色 --><div class="w-[280px] m-[15px] bg-[#f5f5f5]"></div><!-- 自定义字体大小、行高 --><p class="text-[18px] leading-[1.8]"></p>
二、高频常用类
1. 布局 & 显示
| 类名 | 说明 | 示例 |
|---|---|---|
block | 块级显示 | <div> |
inline | 行内显示 | <span> |
inline-block | 行内块显示 | <button> |
flex | 弹性布局 | <div> |
grid | 网格布局 | <div> |
hidden | 隐藏元素（不占空间） | <div> |
w-full | 宽度100% | <div> |
w-auto | 宽度自适应 | <div> |
h-full | 高度100% | <div> |
h-screen | 高度占满屏幕 | <div> |
overflow-hidden | 隐藏溢出内容 | <div> |
overflow-auto | 溢出时显示滚动条 | <div> |
relative | 相对定位 | <div> |
absolute | 绝对定位（需父级relative） | <div> |
fixed | 固定定位 | <div> |
sticky | 粘性定位 | <div> |
2. 间距（Padding/Margin）
间距单位默认是 rem（1rem=16px），支持 0-96 的数值，也可自定义：
| 类名 | 说明 | 示例 |
|———————-|———————————-|——————————-|
| p-4 | 上下左右内边距1rem | <div> |
| px-6 | 左右内边距1.5rem | <div> |
| py-8 | 上下内边距2rem | <div> |
| pt-2 | 顶部内边距0.5rem | <div> |
| mb-4 | 底部外边距1rem | <div> |
| mx-auto | 左右外边距自动（居中）| <div> |
| m-0 | 清除所有外边距 | <div> |
3. 排版
| 类名 | 说明 | 示例 |
|---|---|---|
text-xs | 字体超小（12px） | <p> |
text-sm | 字体小（14px） | <p> |
text-base | 字体默认（16px） | <p> |
text-lg | 字体大（18px） | <p> |
text-xl | 字体超大（20px） | <h3> |
font-light | 字体细 | <p> |
font-normal | 字体常规 | <p> |
font-medium | 字体中等加粗 | <p> |
font-bold | 字体加粗 | <h2> |
text-left | 文本左对齐 | <p> |
text-center | 文本居中 | <h1> |
text-right | 文本右对齐 | <p> |
leading-tight | 行高紧凑 | <p> |
leading-normal | 行高默认 | <p> |
leading-loose | 行高宽松 | <p> |
text-white | 文本白色 | <span> |
text-gray-500 | 文本灰色（500是色阶） | <span> |
4. 颜色（背景/文本/边框）
Tailwind 内置10+色系，每个色系分10个色阶（100-900，数值越大颜色越深）：
| 类型 | 示例类名 | 说明 |
|——————|—————————————-|——————————-|
| 文本颜色 | text-red-500 text-blue-600 | 红色文本、蓝色文本 |
| 背景颜色 | bg-gray-100 bg-green-800 | 浅灰背景、深绿背景 |
| 边框颜色 | border-yellow-400 | 黄色边框 |
| 透明色 | text-transparent bg-transparent | 透明文本/背景 |
5. 边框 & 圆角
| 类名 | 说明 | 示例 |
|---|---|---|
border | 1px 边框（默认灰色） | <div> |
border-2 | 2px 边框 | <div> |
border-t | 仅顶部边框 | <div> |
border-b-0 | 清除底部边框 | <div> |
rounded | 轻微圆角（4px） | <button> |
rounded-md | 中等圆角（6px） | <div> |
rounded-lg | 大圆角（8px） | <div> |
rounded-full | 圆形（50%圆角） | <div> |
rounded-none | 无圆角 | <div> |
6. 阴影
| 类名 | 说明 | 示例 |
|---|---|---|
shadow-sm | 轻微阴影 | <div> |
shadow | 默认阴影 | <div> |
shadow-lg | 大阴影 | <div> |
shadow-none | 无阴影 | <div> |
7. Flex 布局（高频）
| 类名 | 说明 | 示例 |
|---|---|---|
flex | 启用Flex | <div> |
flex-row | 横向排列（默认） | <div> |
flex-col | 纵向排列 | <div> |
justify-center | 主轴居中 | <div> |
justify-between | 主轴两端对齐 | <div> |
items-center | 交叉轴居中 | <div> |
items-start | 交叉轴顶部对齐 | <div> |
flex-wrap | 自动换行 | <div> |
gap-4 | 子元素间距1rem | <div> |
8. 交互
| 类名 | 说明 | 示例 |
|---|---|---|
cursor-pointer | 鼠标悬停变手型 | <button> |
hover:bg-blue-500 | 悬停时背景变蓝 | <button> |
active:bg-blue-600 | 点击时背景变深蓝 | <button> |
disabled:opacity-50 | 禁用时透明度50% | <button> |
focus:outline-none | 聚焦时清除轮廓 | <input> |
三、实战示例（快速套用）
<!-- 一个居中的按钮 --><button class="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 active:bg-blue-700 cursor-pointer"> 点击我</button><!-- 响应式卡片布局 --><div class="max-w-7xl mx-auto p-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <!-- 卡片 --> <div class="border rounded-lg p-5 shadow-sm hover:shadow-lg transition-shadow"> <h3 class="text-xl font-bold mb-2">卡片标题</h3> <p class="text-gray-600">卡片内容...</p> </div></div>
总结
Tailwind 核心是原子化类名，直接组合类名即可实现样式，无需写 CSS；
响应式通过
sm:/md:/lg:前缀实现，遵循「移动端优先」原则；所有类名都支持
[]自定义值，适配特殊尺寸/颜色需求。
需要任何帮助联系我们