tailwindcss

# 常用类大全

# 弹性布局 Flexing & Grid

# Flex 常用设置:

flex:将元素设为 flex 容器
flex-col:子项按垂直方向从上到下排列。
flex-row：默认值，子项按水平方向从左到右排列。
flex-wrap：允许项目换行。
flex-nowrap：禁止项目换行。
justify-center：将所有子元素水平居中对齐。
items-center：将所有子元素垂直居中对齐。
grow-0：防止 flex 项增长以填充额外空间，其增长比例为 0。
shrink-0 防止 flex 项在必要时缩小以适应 flex 容器，其缩小比例为 0。

示例：<div class="flex justify-center items-center">这是一个居中对齐的Flex容器。</div>

Grid 常用设置: grid-cols-4 表示网格列数为4。

示例：<div class="grid grid-cols-4">这是一个4列的网格容器。</div>

参看文章：

Tailwind CSS 与 Flexbox 和 Grid 布局 (opens new window)

# 间距

# 外边距（Margin）

m-{size}，其中 m 表示外边距，{size} 为具体的值。

m-{size}: 设置四个方向的外边距。
mt-{size}: 设置上外边距（margin-top）。
mr-{size}: 设置右外边距（margin-right）。
mb-{size}: 设置下外边距（margin-bottom）。
ml-{size}: 设置左外边距（margin-left）。
mx-{size}: 设置水平外边距（左右外边距）。
my-{size}: 设置垂直外边距（上下外边距）。

常见的外边距值:

m-0: 设置外边距为 0。
m-1 到 m-64: 设置不同大小的外边距，默认是根据 rem 单位来设置的。
m-px: 设置外边距为 1px。
m-auto: 设置外边距为自动，常用于居中对齐。

使用 mx-* 实用工具来控制一个元素的水平外边距。

<div class="mx-8 ...">mx-8</div>

使用 my-* 实用工具来控制一个元素的垂直外边距。

<div class="my-8 ...">my-8</div>

使用 m-* 实用工具来控制一个元素所有边的外边距。

<div class="m-8 ...">m-8</div>

# 内边距（Padding）

内边距用于控制元素内容与边框之间的距离。

p-{size}: 设置四个方向的内边距。
pt-{size}: 设置上内边距（padding-top）。
pr-{size}: 设置右内边距（padding-right）。
pb-{size}: 设置下内边距（padding-bottom）。
pl-{size}: 设置左内边距（padding-left）。
px-{size}: 设置水平内边距（左右内边距）。
py-{size}: 设置垂直内边距（上下内边距）。

常见的内边距值:

p-0: 设置内边距为 0。
p-1 到 p-64: 设置不同大小的内边距。
p-px: 设置内边距为 1px。

使用 px-* 实用工具来控制一个元素的水平内边距。

<div class="px-8 ...">px-8</div>

使用 py-* 实用工具来控制一个元素的垂直内边距。

<div class="py-8 ...">py-8</div>

使用 p-* 实用工具来控制一个元素所有边的内边距。

<div class="p-8 ...">p-8</div>

# 大小类

w-{size}：设置元素宽度，例如 w-1/2 表示元素宽度为父容器宽度的一半。

示例：<div class="w-1/2">这个div的宽度是父容器宽度的一半。</div>
<!-- 可达到图片居中效果 -->
<img src="@/assets/developer.png" class="w-1/2">

1
2
3
4

h-{size}：设置元素高度，例如 h-16 表示元素高度为 4rem（64px）,所以并不是直接px。

示例：<div class="h-16">这个div的高度是64像素。</div>

max-w-{size}：设置元素最大宽度，例如 max-w-md 表示元素最大宽度为中等屏幕大小。

示例：<div class="max-w-md">这个div的最大宽度是中等屏幕大小。</div>

max-h-{size}：设置元素最大高度，例如 max-h-screen 表示元素最大高度为屏幕高度。

示例：<div class="max-h-screen">这个div的最大高度是屏幕高度。</div>

min-w-{size}：设置元素最小宽度，例如 min-w-0 表示元素最小宽度为 0。

示例：<div class="min-w-0">这个div的最小宽度是0。</div>

min-h-{size}：设置元素最小高度，例如 min-h-full 表示元素最小高度为 100%。

示例：<div class="min-h-full">这个div的最小高度是100%。</div>

自定义尺寸

h-[{size}px]

# 文本类

# 文本颜色

text-{color}：设置文本颜色，例如 text-red-500 表示文本颜色为红色 500。

常用工具类：

text-gray-500: 中等灰色
text-red-500: 红色
text-blue-500: 蓝色
text-green-500: 绿色

示例：<p class="text-red-500">这段文本的颜色是红色500。</p>

# 文本大小

text-{size}：设置文本大小，例如 text-sm 表示文本大小为小号字体。

示例：<p class="text-sm">这段文本的大小是小号字体。</p>

# 字体

font-{family}：设置字体系列，例如 font-sans 表示使用无衬线字体。

常用工具类：

font-sans: 设置无衬线字体。
font-serif: 设置衬线字体。
font-mono: 设置等宽字体。

示例：
<p class="font-sans">这段文本的字体是无衬线字体。</p>
<p class="font-serif">这段文本使用衬线字体。</p>

1
2
3

# 字体粗细

font-{weight}：设置字体粗细，例如 font-bold 表示使用粗体字体。

常用工具类：

font-thin: 超细字体
font-light: 轻字体
font-normal: 普通字体
font-medium: 中等粗细字体
font-semibold: 半粗字体
font-bold: 粗体
font-extrabold: 更粗字体
font-black: 极粗字体

示例：<p class="font-bold">这段文本的字体是粗体字体。</p>

# 斜体

意大利体: italic, not-italic 分别表示使用斜体和不使用斜体。

示例：<p class="italic">这段文本使用斜体。</p>

# 字体大小

字体大小可以通过 Tailwind 的 text-* 工具类进行控制，支持从 text-xs 到 text-9xl 的多种大小，甚至可以自定义字体大小。

常用工具类： text-xs, text-sm, text-base, text-lg, text-xl, text-2xl, ..., text-9xl

<p class="text-sm ...">测试文本内容 ...</p>
<p class="text-base ...">测试文本内容 ...</p>
<p class="text-lg ...">测试文本内容 ...</p>
<p class="text-xl ...">测试文本内容 ...</p>
<p class="text-2xl ...">测试文本内容 ...</p>

1
2
3
4
5

# 行高

行高（即行间距）可以通过 leading-* 工具类来控制。Tailwind 提供了多种行高选项，从 leading-none 到 leading-loose，可以根据需要调整。

常用工具类：

leading-none: 行高为 1
leading-tight: 紧凑行高
leading-snug: 稍微紧凑行高
leading-normal: 默认行高
leading-relaxed: 放松行高
leading-loose: 松散行高

<p class="leading-tight">这是紧凑的文本。</p>
<p class="leading-loose">这是较松散的文本。</p>

1
2

# 字间距

leading-{size}：设置行间距，例如 leading-6 表示行间距为 6。

字间距可以通过 tracking-* 工具类来控制。常用的字间距选项包括 tracking-tight、tracking-normal 和 tracking-wide，用于调整字母之间的空隙。

常用工具类：

tracking-tight: 紧凑字间距
tracking-normal: 默认字间距
tracking-wide: 宽字间距
tracking-wider: 更宽字间距
tracking-wide: 极宽字间距

示例：
<p class="leading-6">这段文本的行间距是6。</p>
<p class="tracking-tight">紧凑的文本</p>
<p class="tracking-wide">宽松的文本</p>

1
2
3
4

# 文本对齐

text-{alignment}：设置文本对齐方式，例如 text-center 表示文本居中对齐。 Tailwind 提供了简单的工具类来控制文本对齐方式。你可以使用 text-left、text-center 或 text-right 来设置文本的对齐方式。

常用工具类：

text-left: 左对齐
text-center: 居中对齐
text-right: 右对齐

示例：<p class="text-center">这段文本居中对齐。</p>

# 文本装饰

你可以使用 underline, line-through 和 no-underline 来控制文本的下划线和删除线。

常用工具类：

underline: 添加下划线
line-through: 添加删除线
no-underline: 去除下划线

示例：<p class="underline">这段文本有下划线。</p>

# 文本转换

Tailwind 提供了 uppercase、lowercase 和 capitalize 类来控制文本的大小写转换。

常用工具类：

uppercase: 全部大写
lowercase: 全部小写
capitalize: 每个单词首字母大写

示例：<p class="uppercase">这段文本全部大写。</p>

# 文本阴影

Tailwind 允许你为文本添加阴影效果，使用 text-shadow 工具类。

常用工具类：

text-shadow: 设置简单的文本阴影（此功能需要自定义插件或扩展）。

示例：<p class="text-shadow">这段文本有阴影效果。</p>

# 响应式字体

Tailwind 支持响应式设计，你可以在不同屏幕大小下设置不同的字体大小。通过为不同的屏幕尺寸添加前缀如 sm:, md:, lg:, xl: 等来控制字体大小。

示例：<p class="text-sm sm:text-base md:text-lg lg:text-xl xl:text-2xl">这是响应式文本大小</p>

# 背景类

bg-{color}：设置背景颜色，例如 bg-gray-300 表示使用灰色背景。

示例：<div class="bg-gray-300">这个div的背景颜色是灰色300。</div>

bg-{image}：设置背景图片，例如 bg-cover 表示使用覆盖整个元素的背景图片。

示例：<div class="bg-cover">这个div的背景图片覆盖整个元素。</div>

bg-{position}：设置背景位置，例如 bg-center 表示将背景图像居中对齐。

示例：<div class="bg-center">这个div的背景图像居中对齐。</div>

bg-{size}：设置背景尺寸，例如 bg-auto 表示使用原始背景图像大小。

示例：<div class="bg-auto">这个div的背景图像使用原始大小。</div>

# 边框和轮廓类

border-{color}：设置边框颜色，例如 border-red-500 表示使用红色边框。

示例：<div class="border-red-500">这个div的边框颜色是红色500。</div>

border-{size}：设置边框大小，例如 border-2 表示边框宽度为 2 像素。

示例：<div class="border-2">这个div的边框宽度为2像素。</div>

border-{side}：设置边框位置，例如 border-l 表示只在元素左侧添加边框。

示例：<div class="border-l">这个div的左侧有一个边框。</div>

rounded-{size}：设置圆角大小，例如 rounded-full 表示使用完全圆角。

示例：<div class="rounded-full">这个div的圆角大小是完全圆角。</div>

# 列表处理

list-{style}: 设置列表前的样式，如数字、黑点或无样式。

示例：<ul class="list-decimal"><li>列表项1</li><li>列表项2</li></ul> 表示列表前的序号为数字。

# 其他

间距 spacing: p-0, px-0, py-0, px-px 等表示不同的内边距设置；-mt-8 表示上边距为-8rem；space-x-0, space-y-0 分别表示专用于设置space-between间距的样式。

示例：<div class="p-4">这个div的内边距是4。</div>

布局 layout: container 表示容器布局；columns-2 表示列布局为2列。

示例：<div class="container">这是一个容器布局。</div>

怪异盒模型与标准盒模型: box-border 表示怪异盒模型（IE盒模型）；box-content 表示标准盒模型。

示例：<div class="box-border">这个div使用怪异盒模型。</div>

# 参考

上次更新: 2025/04/03, 11:07:08

← TS综合案例 element-plus→