Tailwind CSS 使用指南
0x01 概述
（1）简介
• Tailwind CSS 官网：https://www.tailwindcss.cn/
• Tailwind CSS 是一个 CSS 框架，使用初级“工具”类创建布局
• 如 Bootstrap 等传统 CSS 框架，其使用的类通常与组件直接相关；然而，Tailwind 则采用了不同的方法，它将类作为工具集合，让用户能够自由组合这些工具来构建个性化的自定义组件
• 工具类是简单的 HTML 类，其作用域通常为单个和特定 CSS 属性，具有以下优势
• 根据目的命名
• 易于理解和记忆
• 作用浅显易懂
• 不存在命名不一致
• 支持快速布局创建和测试
• Tailwind 有一个条件类，用于为断点、响应状态等命名
（2）基本环境配置
• 代码文本编辑工具：VSCode 或其他
• 推荐插件：
• 标签重命名：Auto Rename Tag
• 实时加载：Live Server
• PostCSS 语法支持：PostCSS Language Support
• 代码格式化：Prettier
• Tailwind 官方补全：Tailwind CSS IntelliSense
• 包管理器：Node.js 或其他
• （可选）版本控制：Git
（3）创建项目
- 在任意位置新建一个 index.html
- 使用 CDN 引入 Tailwind：https://cdn.tailwindcss.com/
1
<!DOCTYPE html>
2 Document
11
0x02 基本功能
（1）使用颜色
• 默认包含的颜色：
black000000
white
FFFFFF
red
EF4444
green
22C55E
blue
3B82F6
orange
F97316
yellow
EAB308
purple
A855F7
lime
84CC16
emerald
10B981
teal
14B8A6
cyan
06B6D4
indigo
6366F1
violet
8B5CF6
fuchsia
D946EF
pink
EC4899
rose
F43F5E
sky
0EA5E9
gray
6B7280
slate
64748B
zinc
71717A
neutral
737373
stone
78716C
amber
F59E0B
• 文本颜色：text-[color]-[shade]
• color：颜色名称
• shade：色度，取值范围为 100~900，不可对黑色或白色使用
1Color Black
2
Color White
3
Color Red 500
4
Color Blue 500
5
Color Gray 500
6
Color Green 500
• 背景颜色：bg-[color]-[shade]
1BgColor White
2
BgColor Red 500
3
BgColor Black
• 下划线颜色：underline decoration-[color]-[shade]
• underline：添加下划线
1UlColor Default
2
UlColor Red 500
3
UlColor Green 500
• 边框颜色：border border-[color]-[shade]
• border：添加边框
1
2
3
• 间隔颜色：divide-[direct] divide-[color]-[shade]
• divide-[direct]：添加分隔，direct 表示分隔方向，取值 x-横向、y-纵向
1Item 1Item 2Item 35
• 轮廓线颜色：outline outline-[color]-[shade]
• outline：添加轮廓线
1
2
3
• 盒子阴影颜色：shadow-[container] shadow-[color]-[shade(/opacity)]
• shadow-[container]：添加阴影，container 表示阴影最大宽度，取值如下
container
width
sm
640px
md
768px
lg
1024px
xl
1280px
2xl
1536px
• (/opacity)：透明度，默认 100，取值 0~100
1SdColor Red 5002
SdColor Red 5003
SdColor Red 500• 强调颜色：accent-[color]-[shade]
1
2
3
• 自定义颜色：-[(#xxxxx|rgb(r,g,b)|name)]
• 十六进制、RGB、名称
1Color #4682B4
2
Color RGB(46,130,180)
3
Color Steelblue
（2）容器与间距
• 容器
1Title
Tailwind CSS is the only framework that I've 5 seen scale on large teams. It’s easy to customize, 6 adapts to any design, and the build size is tiny.
8
• container：标记为容器
• mx-auto：x 轴方向（横向）上，外边距（margin）自动
• 外边距：m?-[number]
• m?：m-Margin、mt-MarginTop、ml-MarginLeft、mr-MarginRight、mb-MarginBottom
• number=number 0.25rem=number 4px
• 如：m-2 意思为 margin: 0.5rem
1Margin 22
Margin Left 23
Margin Right 24
Margin Top 25
Margin Bottom 26
Margin 20px• 内边距：p?-[number]
• p?：p-Padding、pt-PaddingTop、pl-PaddingLeft、pr-PaddingRight、pb-PaddingBottom
• number=number 0.25rem=number 4px
1Padding 22
Padding Left 23
Padding Right 24
Padding Top 25
Padding Bottom 26
Padding 20px• 间距：(-)space-[direct]-[number]
• (-)：负间距
• direct：间隔方向，取值 x-横向、y-纵向
• number=number 0.25rem=number 4px
1Item 1Item 2Item 35
6Item 1Item 2Item 310
• flex：采用 Flex 布局
• flex-col：Flex 布局纵向
（3）版面设计
• 字体：font-[family]
1Font Sans2
Font Serif3
Font Mono• 自定义字体族配置
1- >
14
• 字号：text-[size]
1Text Extra Small2
Text Small3
Text Base4
Text Large5
Text Extra Large6
Text 2 Extra Large7
Text 3 Extra Large• 字重：font-[weight]
1Font Light2
Font Normal3
Font Medium4
Font Semibold5
Font Bold• 字距：tracking-[space]
1Tracking Tight2
Tracking Normal3
Tracking Wide• 文本对齐：text-[direct]
1Text Left2
Text Center3
Text Right• 下划线重：decoration-[weight]
1Decoration 22
Decoration 43
Decoration 8• 下划线风格：decoration-[type]
1Decoration Double2
Decoration Dotted3
Decoration Dashed4
Decoration Wavy• 装饰偏移量：underline-offset-[number]
1Offset 22
Offset 43
Offset 8• 文本变换：
1Normal Case
2
uppercase
3
LOWERCASE
4
capitalize test
（4）宽度与高度
• 宽度：w-[number]
• number 取值 0~48
1Width 1.5rem2
Width 3rem3
Width 6rem• 百分比：w-[number_1]/[number_2]
1Width 25%2
Width 33%3
Width 50%• 视点宽度
1Width 100vw• 100% 容器
1Width 100%• 自定义宽度
1Width 300px• 最大宽度：max-w-[size]
12 Tailwind CSS is the only framework that I've 3 seen scale on large teams. It’s easy to customize, 4 adapts to any design, and the build size is tiny. 5• 高度（大部分与宽度方法相同）：h-[number]
• number 取值 0~96
1Height 24Height 48Height 72Height 966
• 全屏高度
1Height 100vh（5）布局与定位
• 定位：相对定位与绝对定位
1Parent
Child
6
• 左上角
13
• 右上角
13
• 左下角
13
• 右下角
13
• 顶边
13
• 左边
13
• 右边
13
• 底边
13
• 显示方式
12 Tailwind CSS is the only framework that- (Inline)
4
I've seen scale on large teams.- (Inline-block)
6
It’s easy to customize, adapts to any design,- (Block)
8
and the build size is tiny.
10
• 层叠等级（Z 轴索引）：z-[number/auto]
1123457
• 浮动：float-[left/right/none]
1124
（6）背景与阴影
• 背景
1
<div- class="w-64 h-64 bg-cover bg-no-repeat bg-center"
style="background-image: url('https://example.com/png');"
4
• 大小
bg-auto
bg-cover
bg-contain
• 重复
bg-repeat
bg-no-repeat
bg-repeat-x
bg-repeat-y
bg-repeat-round
bg-repeat-space
• 定位
bg-center
bg-top
bg-bottom
bg-left
bg-left-top
bg-left-bottom
bg-right
bg-right-top
bg-right-bottom
• attachment
bg-fixed
bg-local
bg-scroll
• 渐变：bg-gradient-to-[direct] from-[color]-[shade] to-[color]-[shade]
1
• 阴影
1
Tailwind Background Class
CSS Code
shadow-sm
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
shadow
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1),
shadow-md
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1),
shadow-lg
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
shadow-xl
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1)
8px 10px -6px rgb(0 0 0 / 0.1);
shadow-2xl
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
shadow-inner
box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
shadow-none
box-shadow: 0 0 #0000;
• 混合
1
8
（7）边框
• 宽度：border(-[direct])-[width]
• (-[direct])：取值为 t、l、r、b、x 或 y，分别对应上、左、右、下、左右或上下
• width：取值为 0、2、4 或 8，分别对应 0px、2px、4px、8px
1
4
7
• 颜色
详见本章第（1）小节“边框颜色”部分
• 圆角：rounded(-[direct])(-[size])
• (-[direct])：取值为 t、l、r、b、x 或 y，分别对应上、左、右、下、左右或上下
• (-[size])：取值为 none、sm、【略】、md、lg、xl、2xl、3xl、full
1
• 轮廓线：outline(-[width])
• (-[width])：取值为 0、1、2、4、8
1
（8）过滤器
• 模糊：blur(-[size])
• (-[size])：取值为 none、sm、【略】、md、lg、xl、2xl、3xl
1
• 亮度：brightness-[number]
• number：filter: brightness(number*0.1)
1
2
3
• 对比度：contrast-[number]
• number：filter: contrast(number*0.1)
1
2
3
• 灰度
1
• 反色
1
• 褐化
1
• Hue rotate：hue-rotateo-[number]
• number：取值为 0、15、30、60、90、180
1
2
3
0x03 进阶应用
（1）交互
• 悬停：hover:
1
• 聚焦：focus:
1
• 触发：active:
1
• 设置内部元素样式
1
• 伪类
1
7
• 外观
• 一般用于重置浏览器或操作系统默认的样式外观
1
5
• 游标：cursor-[type]
• type 常见取值为
auto
default
pointer
wait
text
move
help
not-allowed
none
context-menu
progress
cell
crosshair
vertical-text
...
1
• 选中
1
2
3
4
• 平滑滚动示例
1
<!DOCTYPE html>
2
12
（2）断点类与媒体查询
1
11
1
11
1
3
size
min-width
sm
640px
md
768px
lg
1024px
xl
1280px
2xl
1536px
（3）分栏
• 基本列：columns-[number/type]
• number：取值 1~12
• type：取值 auto、3xs、2xs、xs、sm、md、lg、xl、2xl、3xl、4xl、5xl、6xl、7xl
1
6
• 纵横比：aspect-[type]
1
4
（4）Flexbox
• Flex 与对齐
创建一个 Flexbox
1
6
设置每项的对齐方向：items-[type]
1
3
设置每项的对齐方式：justify-[type]
1
3
设置换行，使某一项超出窗口：flex-wrap
1
6
• 列、间隙、顺序
创建一个 Flexbox，设置为纵向排列
1
6
设置间隙：gap-[number]（number * 0.25rem）
1
3
调整顺序：order-[index]
1
6
• 放大与缩小
1
7
（5）Grid
• 模板列：grid-cols-[number/none]
• number：取值为 1~12
• 该语句等同于：grid-template-columns: repeat(number, minmax(0, 1fr));
1
11
• 模板行：grid-rows-[number/none]
• number：取值为 1~6
• 该语句等同于：grid-template-rows: repeat(number, minmax(0, 1fr));
1
3
• 跨行/列：[row/col]-span-[number]
• row-span-[number]：跨 number 行
• col-span-[number]：跨 number 列
1
5
（6）过渡与变换
初始按钮：
1
• 过渡
• transition-[type]：过渡类型，type 取值为 none、all、colors、opacity、shadow、transform
• duration-[ms]：过渡时长，ms 取值为 75、100、150、200、300、500、700、1000
• ease-[type]：过渡效果，type 取值为 linear、in、out、in-out
• delay-[ms]：延时时长，ms 取值为 75、100、150、200、300、500、700、1000
1
• 变换
• scale(-[axis])-[magnification]：缩放，axis 表示参照轴，取值为 x 或 y；magnification 表示缩放倍率，为 number%
• rotate-[degree]：旋转，degree 表示旋转角度
• translate-[axis]-[distance]：位移，axis 表示参照轴，取值为 x 或 y；distance 表示位移距离，整数为 number * 0.25rem，分数为占比，full 为 100%，px 为 1px
• skew-[direct]-[degree]：倾斜，axis 表示参照轴，取值为 x 或 y；degree 表示倾斜角度
1
（7）动画类与关键帧
• animate-[property]：property 取值如下：
• none：animation: none;
• spin：旋转
1
animate: spin 1s linear infinite;
2
@keyframes spin {
5
}
8
}
9
}
• ping：扩散
1
animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
2
@keyframes ping {
6
}
7
}
• pulse：闪烁
1
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
2
@keyframes pulse {
5
}
8
}
9
}
• bounce：弹跳
1
animation: bounce 1s infinite;
2
@keyframes bounce {
6
}
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
10
}
11
}
1
3
• 自定义动画与关键帧
1
<!DOCTYPE html>
2
33
（8）配置与客制化
• 在 head 标签中的 script 标签中写入配置
• 配置格式：
1
class="container mx-auto mt-10 bg-white dark:bg-slate-900 rounded-xl px-6 py-8 shadow-xl"
23
25 Title
28 Irure dolor ut excepteur ea cupidatat dolor dolore consectetur sit 29 voluptate qui et deserunt.