🌈 Tailwind CSS 常用类名总结

一、布局类（Layout）

1. flex

将元素设置为弹性容器，使子元素可以根据空间进行弹性布局。

<div class="flex">
  <div>子元素1</div>
  <div>子元素2</div>
</div>

2. grid

创建网格布局，用于复杂页面排版。

<div class="grid grid-cols-3 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

3. container

创建一个固定最大宽度的内容容器。

<div class="container mx-auto">
  <p>内容区域</p>
</div>

4. mx-auto

使元素在水平方向居中（需设置宽度）。

<div class="w-1/2 mx-auto bg-gray-200">居中元素</div>

5. justify-{alignment}

主轴对齐方式：

• justify-center
• justify-start
• justify-end
• justify-between
• justify-around

<div class="flex justify-between">
  <div>左</div><div>右</div>
</div>

6. items-{alignment}

交叉轴对齐方式：

• items-center
• items-start
• items-end

<div class="flex items-center h-20">
  <p>垂直居中</p>
</div>

7. flex-col / flex-row

垂直或水平排列子元素。

<div class="flex flex-col md:flex-row">
  <div>上 / 左</div>
  <div>下 / 右</div>
</div>

---

二、间距类（Spacing）

1. m-{size}

外边距（margin）

<div class="m-4 bg-blue-100">外边距 1rem</div>

2. p-{size}

内边距（padding）

<div class="p-4 bg-green-100">内边距 1rem</div>

3. mt-{size} / mb-{size} / ml-{size} / mr-{size}

单方向外边距

<div class="mt-2 mb-4 ml-1 mr-1">单向间距</div>

4. pt-{size} / pb-{size} / pl-{size} / pr-{size}

单方向内边距

<div class="pt-4 pb-2">顶部和底部内边距</div>

---

三、尺寸类（Sizing）

1. w-full

宽度占满父容器。

<div class="w-full bg-yellow-100">100%宽</div>

2. h-screen

元素高度等于屏幕高度。

<div class="h-screen bg-gray-100">全屏高度</div>

3. w-{percentage}

宽度为父容器百分比。

<div class="w-1/2 bg-red-200">宽度 50%</div>

4. h-[value]

固定高度。

<div class="h-[100px] bg-blue-200">固定高度 100px</div>

5. max-w-{size}

设置最大宽度。

<div class="max-w-md mx-auto bg-gray-200">最大宽度 md</div>

---

四、字体类（Typography）

1. text-{size}

字体大小

<p class="text-2xl">大标题</p>

2. font-bold

加粗

<p class="font-bold">粗体文本</p>

3. italic

斜体

<p class="italic">斜体文本</p>

4. underline / line-through / overline

文本线条

<p class="underline">下划线</p>
<p class="line-through">删除线</p>

5. leading-{size}

行高

<p class="leading-loose">行距较宽的文本内容</p>

6. tracking-{size}

字符间距

<p class="tracking-wide">更宽的字间距</p>

---

五、颜色类（Colors）

1. text-{color}

文本颜色

<p class="text-red-500">红色文字</p>

2. bg-{color}

背景颜色

<div class="bg-blue-200 p-4">浅蓝背景</div>

3. opacity-{level}

透明度

<div class="bg-black opacity-50">半透明背景</div>

---

六、边框类（Border）

1. border

添加默认边框。

<div class="border p-2">带边框的块</div>

2. border-{color}

边框颜色

<div class="border border-red-500">红色边框</div>

3. border-{width}

边框宽度

<div class="border-4 border-blue-400">4px边框</div>

4. rounded

圆角

<div class="rounded-lg border p-4">圆角块</div>

5. border-{style}

边框样式

<div class="border-dashed border-2 border-gray-400">虚线边框</div>

---

七、阴影类（Shadow）

<div class="shadow-md p-4 bg-white">中等阴影</div>
<div class="shadow-lg p-4 bg-white">大阴影</div>

---

八、显示与隐藏类（Display）

<div class="hidden">隐藏元素</div>
<div class="block">块级元素</div>
<div class="inline-block">内联块元素</div>

---

九、响应式类（Responsive）

通过前缀控制不同设备样式：

• sm: 小屏（≥640px）
• md: 中屏（≥768px）
• lg: 大屏（≥1024px）
• xl: 超大屏（≥1280px）

<p class="text-sm md:text-lg lg:text-2xl">
  不同设备不同字体大小
</p>

---

十、交互与动画类（Transition & Animation）

1. hover: / focus: / active:

交互状态样式

<button class="bg-blue-400 hover:bg-blue-600 text-white px-4 py-2">
  悬停变色按钮
</button>

2. transition-{property}

过渡效果

<div class="transition-all duration-300 ease-in-out hover:scale-110">
  鼠标悬停放大
</div>

3. animate-{animation}

预设动画

<div class="animate-bounce w-16 h-16 bg-pink-400"></div>
<div class="animate-spin w-8 h-8 border-4 border-blue-400 border-t-transparent rounded-full"></div>

---

✅ 总结

分类	常用类名	示例
布局	flex, grid, justify-center, items-center	<div class="flex justify-center items-center">
间距	m-4, p-2, mt-2, pl-4	<div class="p-4 m-2">
尺寸	w-full, h-screen, max-w-md	<div class="w-1/2 h-[100px]">
字体	text-xl, font-bold, underline	<p class="text-xl font-bold underline">
颜色	bg-blue-500, text-gray-700	<div class="bg-gray-100 text-blue-500">
边框	border, rounded-lg, border-dashed	<div class="border rounded-lg">
阴影	shadow-md, shadow-lg	<div class="shadow-lg">
响应式	sm:, md:, lg:	<div class="sm:w-full md:w-1/2">