Tailwind CSS 个人笔记

1
/* 全局通用间距 从小到大 */
2
m-0 m-1 m-2 m-3 m-4 m-6 m-8
3
p-0 p-1 p-2 p-3 p-4 p-6 p-8
4

5
/* 定向间距：t上 b下 l左 r右 x左右 y上下 */
6
px-2 px-4 px-6
7
py-2 py-3 py-4
8
mt-2 mt-4 mb-4 mb-6
9
ml-2 mr-2 mx-auto  // mx-auto 水平居中块级元素

1
/* 基础布局 */
2
flex            // 开启弹性布局
3
flex-col        // 纵向排列
4
flex-row        // 横向排列
5

6
/* 主轴对齐 */
7
justify-start   // 左对齐
8
justify-center  // 水平居中
9
justify-end     // 右对齐
10
justify-between // 两端均分
11
justify-around  // 均匀留白
12

13
/* 侧轴对齐 */
14
items-start
15
items-center    // 垂直居中
16
items-end
17

18
/* 弹性伸缩 */
19
flex-1          // 自适应占满剩余空间
20
flex-shrink-0   // 禁止压缩（图片/图标常用）
21
flex-grow       // 自动放大

1
/* 常用字号 */
2
text-xs    // 极小辅助文字
3
text-sm    // 小字体（描述、备注）
4
text-base  // 默认正文
5
text-lg    // 小标题
6
text-xl    // 常规标题
7
text-2xl   // 大标题
8

9
/* 字重 */
10
font-normal    // 常规
11
font-medium    // 适中加粗
12
font-bold      // 粗体
13

14
/* 对齐方式 */
15
text-left
16
text-center
17
text-right
18

19
/* 行高（解决文字挤在一起） */
20
leading-tight
21
leading-normal
22
leading-relaxed
23

24
/* 文本处理 */
25
truncate       // 文字超出省略单行
26
underline      // 下划线
27
no-underline   // 取消下划线

1
/* 圆角梯度 */
2
rounded-none
3
rounded-sm
4
rounded
5
rounded-md
6
rounded-lg
7
rounded-xl
8
rounded-full    // 圆形
9

10
/* 阴影梯度 */
11
shadow-none
12
shadow-sm
13
shadow         // 常规
14
shadow-md
15
shadow-lg
16

17
/* 边框 */
18
border            // 默认1px边框
19
border-0
20
border-gray-100
21
border-gray-200
22
border-gray-300
23

24
/* 边框方向 */
25
border-t border-b border-l border-r

1
/* 定位模式 */
2
relative     // 相对
3
absolute     // 绝对
4
fixed        // 固定悬浮
5
sticky       // 粘性吸顶
6

7
/* 方位控制 */
8
top-0 left-0 right-0 bottom-0
9

10
/* 宽高常用 */
11
w-full      // 100%宽度
12
w-screen    // 满屏宽
13
w-1/2 w-1/3 w-1/4
14
h-full
15
h-screen
16

17
/* 内容居中万能公式（弹窗/卡片必记） */
18
top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2

1
/* 文字灰度层级（最常用，页面主力文字） */
2
text-gray-900   // 最深正文、标题（主力色）
3
text-gray-800   // 常规正文
4
text-gray-700   // 次级正文
5
text-gray-600   // 辅助文字
6
text-gray-500   // 描述、备注、弱提示
7
text-gray-400   // 置灰文字、失效文本
8

9
/* 功能彩色文字（强调/警示/成功） */
10
text-red-500    // 错误、删除、警示
11
text-green-500  // 成功、通过、正常
12
text-blue-500   // 链接、重点强调、主题色
13
text-yellow-500 // 警告、待处理
14

15
/* 文字透明透明度 */
16
text-black     // 纯黑文字
17
text-black/60  // 半透黑文字
18
text-white/90  // 浅色背景透白字
19

20
/* 文字hover变色常用组合 */
21
text-blue-500 hover:text-blue-600

1
/* 基础背景 */
2
bg-white
3
bg-gray-50
4
bg-gray-100
5
bg-gray-200
6

7
/* 透明/遮罩 */
8
bg-transparent
9
bg-black/10
10
bg-black/20
11
bg-white/80

1
overflow-auto     // 自动滚动
2
overflow-hidden   // 隐藏溢出内容
3
overflow-scroll    // 强制滚动
4

5
/* 单行文字省略 */
6
truncate
7

8
/* 多行省略 */
9
line-clamp-2
10
line-clamp-3

1
block          // 块级
2
inline-block   // 行内块（最常用）
3
inline
4
hidden         // 隐藏元素
5
visible        // 显示元素

1
cursor-pointer   // 手型点击
2
cursor-default
3
cursor-not-allowed // 禁止点击
4
select-none      // 禁止文字选中

1
z-10 z-20 z-30 z-50