TailwindCSS 工具类大全

掌握最常用的工具类，学会如何使用它们来构建美观的界面。

布局工具类

Display 显示类型

常用显示类型
block - 块级元素
inline - 内联元素
inline-block - 内联块元素
flex - Flexbox 容器
grid - Grid 容器
hidden - 隐藏元素
示例效果
block 元素
inline 元素
flex
容器

Flexbox 布局

主轴对齐
justify-start
justify-center
justify-end
justify-between
justify-around
交叉轴对齐
items-start
items-center
items-end
items-stretch
items-baseline
方向和换行
flex-row
flex-col
flex-wrap
flex-nowrap
Flexbox 实例
居中对齐
左
右
1
2
3

Grid 网格布局

网格列数
grid-cols-1 - 1列
grid-cols-2 - 2列
grid-cols-3 - 3列
grid-cols-4 - 4列
grid-cols-12 - 12列
Grid 示例
1
2
3
4
5
6

颜色工具类

颜色系统

Gray
100
300
500
700
900
Red
100
300
500
700
900
Blue
100
300
500
700
900
Green
100
300
500
700
900
Yellow
100
300
500
700
900
Purple
100
300
500
700
900
Pink
100
300
500
700
900
Teal
100
300
500
700
900
背景颜色
bg-blue-500
bg-green-500
bg-red-500
bg-gray-500
文字颜色
text-blue-500
text-green-500
text-red-500
text-gray-500
边框颜色
border-blue-500
border-green-500
border-red-500
border-gray-500

间距工具类

内边距 (Padding)

p-0 - 0rem (0px)
p-1 - 0.25rem (4px)
p-2 - 0.5rem (8px)
p-4 - 1rem (16px)
p-6 - 1.5rem (24px)
p-8 - 2rem (32px)
p-2
p-4
p-6

外边距 (Margin)

m-0 - 0rem (0px)
m-1 - 0.25rem (4px)
m-2 - 0.5rem (8px)
m-4 - 1rem (16px)
m-6 - 1.5rem (24px)
m-8 - 2rem (32px)
m-2
m-4
m-6

方向性间距

水平方向
px-4 左右
pl-4 左
pr-4 右
垂直方向
py-4 上下
pt-4 上
pb-4 下
子元素间距
space-x-4 水平
space-y-4 垂直
Gap 间距
gap-4 网格间距
gap-x-4 水平
gap-y-4 垂直

字体和文本工具类

字体大小

text-xs - 超小字体
text-sm - 小字体
text-base - 基础字体
text-lg - 大字体
text-xl - 超大字体
text-2xl - 2倍大字体
text-3xl - 3倍大字体

字体粗细

font-thin - 极细
font-light - 细
font-normal - 正常
font-medium - 中等
font-semibold - 半粗
font-bold - 粗体
font-black - 极粗
文本对齐
text-left 左对齐
text-center 居中
text-right 右对齐
文本装饰
underline 下划线
line-through 删除线
no-underline 无装饰
文本转换
uppercase 大写
LOWERCASE 小写
capitalize 首字母大写

实践练习

现在你已经学会了基本的工具类，试试在交互式编辑器中组合使用它们！

返回交互式编辑器 学习响应式设计