tailwindcss常用类名写法及其含义

Tailwind CSS 是一个实用优先的 CSS 框架，通过预定义的原子类名快速构建界面，其类名遵循命名规则+属性值的核心逻辑。以下是 Tailwind 核心类名体系的完整梳理，涵盖布局、样式、响应式等所有核心维度，并说明类名写法和含义：

一、核心命名规则

Tailwind 类名的通用格式：

[前缀]:[属性值]  // 基础格式（如 p-4、bg-red-500）
[响应式前缀]:[前缀]:[属性值]  // 响应式（如 md:p-6）
[状态前缀]:[前缀]:[属性值]  // 状态（如 hover:bg-red-600）
[变体前缀]/[值]:[前缀]:[属性值]  // 变体（如 dark:bg-gray-800、rtl:float-right）

二、基础布局类

1. 尺寸（Width/Height）

类名写法	含义	示例
w-值	宽度	w-full（100%）、w-1/2（50%）、w-20（5rem）、w-auto、w-screen（视口宽度）、w-fit（自适应内容）
h-值	高度	h-full、h-32（8rem）、h-screen、h-auto、h-fit
min-w-值	最小宽度	min-w-0、min-w-full、min-w-200px
min-h-值	最小高度	min-h-screen、min-h-300px
max-w-值	最大宽度（预设容器）	max-w-sm（640px）、max-w-xl（1280px）、max-w-none
max-h-值	最大高度	max-h-full、max-h-500px

2. 边距（Margin/Padding）

类名写法	含义	示例
p-值	四周边距	p-4（1rem）、p-0、p-10px
px-值	水平边距（左右）	px-6、px-auto
py-值	垂直边距（上下）	py-8、py-15px
pt/pr/pb/pl-值	上/右/下/左边距	pt-2、pl-8px
m-值	四边外边距	m-4、m-0、m-auto（水平居中）
mx-值	水平外边距	mx-auto、mx-6
my-值	垂直外边距	my-8、my-10px
mt/mr/mb/ml-值	上/右/下/左外边距	mt-3、mb--5px（负边距）

3. 定位（Position）

类名写法	含义	示例
static/relative/absolute/fixed/sticky	定位类型	relative、absolute
top/right/bottom/left-值	定位偏移	top-0、right-4、left-1/2、bottom--10px
z-值	z-index	z-10、z-50、z-auto、z-999

4. 显示与溢出（Display/Overflow）

类名写法	含义	示例
block/inline/inline-block/flex/inline-flex/grid/inline-grid	显示类型	flex、block、hidden
overflow-值	溢出处理	overflow-hidden、overflow-auto、overflow-scroll、overflow-x-hidden
truncate	单行文本截断（省略号）	truncate
text-ellipsis	省略号（需配合overflow）	text-ellipsis
whitespace-值	空白处理	whitespace-nowrap（不换行）

三、弹性布局 & 网格布局

1. Flex 布局

类名写法	含义	示例
flex-direction-值	排列方向	flex-row（默认）、flex-col、flex-row-reverse
flex-wrap-值	换行	flex-wrap、flex-nowrap
justify-content-值	主轴对齐	justify-center、justify-between、justify-around、justify-start
items-值	交叉轴对齐	items-center、items-start、items-end、items-baseline
content-值	多行主轴对齐	content-center、content-between
flex-值	伸缩比例	flex-1、flex-auto、flex-none
order-值	排列顺序	order-0、order-1、order--1
gap-值	子元素间距	gap-4、gap-x-2、gap-y-6

2. Grid 布局

类名写法	含义	示例
grid-cols-值	列数	grid-cols-3（3列）、grid-cols-1/2（自定义）、grid-cols-1fr,2fr
grid-rows-值	行数	grid-rows-2、grid-rows-auto,1fr
col-span-值	列跨度	col-span-2、col-span-full（占满）
row-span-值	行跨度	row-span-3、row-span-full
justify-items-值	单元格水平对齐	justify-items-center、justify-items-start
align-items-值	单元格垂直对齐	align-items-center
place-items-值	单元格居中（合并）	place-items-center
grid-flow-值	自动排列方向	grid-flow-row、grid-flow-col

四、视觉样式

1. 背景

类名写法	含义	示例
bg-颜色值	背景色	bg-red-500、bg-gray-100、bg-#f0f0f0、bg-transparent
bg-opacity-值	背景透明度	bg-opacity-50（50%）、bg-opacity-75%
bg-gradient-方向	渐变背景	bg-gradient-to-r（从左到右）、bg-gradient-to-br（左下到右上）
bg-url	背景图片	bg-url('/img.jpg')
bg-repeat-值	背景重复	bg-repeat、bg-no-repeat、bg-repeat-x
bg-position-值	背景位置	bg-center、bg-top-right、bg-20px_30px
bg-size-值	背景尺寸	bg-cover、bg-contain、bg-100px_200px

2. 文本样式

类名写法	含义	示例
text-颜色值	文本颜色	text-blue-600、text-#333、text-white
text-opacity-值	文本透明度	text-opacity-80
text-大小	字体大小	text-sm（0.875rem）、text-xl（1.25rem）、text-3xl、text-20px
font-权重/样式	字体样式	font-bold（700）、font-medium（500）、font-normal、font-italic、font-sans（无衬线）
leading-值	行高	leading-normal、leading-loose、leading-1.8
tracking-值	字间距	tracking-tight、tracking-wide、tracking-2px
text-对齐	文本对齐	text-left、text-center、text-right、text-justify
text-转换	文本转换	text-uppercase（大写）、text-lowercase、text-capitalize（首字母大写）

3. 边框

类名写法	含义	示例
border-值	边框宽度	border（1px）、border-2、border-0、border-t（仅上边框）
border-颜色	边框颜色	border-gray-300、border-#ddd、border-transparent
border-opacity-值	边框透明度	border-opacity-50
rounded-值	圆角	rounded（默认）、rounded-lg、rounded-full（圆形）、rounded-tl-10px（左上圆角）
outline-值	外轮廓	outline-none、outline-2、outline-blue-500

4. 阴影

类名写法	含义	示例
shadow-值	阴影	shadow-sm、shadow、shadow-lg、shadow-xl、shadow-none
shadow-颜色	阴影颜色	shadow-red-500/50（半透明）、shadow-#000/20
ring-值	聚焦环（替代outline）	ring-2、ring-blue-500、ring-offset-2（环偏移）

5. 交互样式

类名写法	含义	示例
cursor-值	鼠标指针	cursor-pointer、cursor-default、cursor-not-allowed
pointer-events-值	指针事件	pointer-events-none（禁用点击）、pointer-events-auto
select-值	文本选择	select-none（禁止选择）、select-text
opacity-值	整体透明度	opacity-50、opacity-100、opacity-0

五、响应式与状态变体

1. 响应式前缀（基于断点）

前缀	断点宽度	含义	示例
sm:	≥640px	小屏幕	sm:flex
md:	≥768px	中等屏幕	md:w-1/2
lg:	≥1024px	大屏幕	lg:px-8
xl:	≥1280px	超大屏幕	xl:grid-cols-4
2xl:	≥1536px	特大屏幕	2xl:text-4xl

2. 状态前缀

前缀	含义	示例
hover:	鼠标悬停	hover:bg-blue-600
focus:	焦点（键盘/点击）	focus:ring-2
active:	激活状态	active:bg-blue-700
focus-visible:	可视焦点	focus-visible:outline-none
disabled:	禁用状态	disabled:opacity-50
checked:	选中状态（单选/复选）	checked:bg-green-500
visited:	链接已访问	visited:text-purple-600
group-hover:	父元素hover	group-hover:text-white

3. 特殊变体

前缀	含义	示例
dark:	暗黑模式	dark:bg-gray-800
rtl:	从右到左布局	rtl:float-right
motion-safe:	开启动画时生效	motion-safe:animate-fade
print:	打印样式	print:hidden

六、动画与过渡

1. 过渡（Transition）

类名写法	含义	示例
transition	启用过渡	transition
transition-属性	过渡属性	transition-colors、transition-all、transition-opacity,transform
duration-值	过渡时长	duration-300、duration-500ms
ease-值	过渡曲线	ease-in、ease-out、ease-in-out

2. 动画（Animation）

类名写法	含义	示例
animate-动画名	启用动画	animate-spin（旋转）、animate-pulse（脉冲）、animate-bounce（弹跳）
@keyframes 自定义	自定义动画	animate-my-animation（需自定义keyframe）

七、自定义类名

Tailwind 支持通过 [] 编写任意值的类名，覆盖预设值：

• 数值自定义：w-[200px]、h-[50vh]、m-[1.5rem]
• 颜色自定义：bg-[#123456]、text-[rgb(255,0,0)]
• 复合属性：grid-cols-[1fr,2fr,1fr]、shadow-[0_4px_6px_rgba(0,0,0,0.1)]

八、核心速记规则

1. 缩写原则：常用属性缩写（p=padding、m=margin、w=width、h=height、bg=background、text=color 等）；
2. 数值映射 ：预设数值（如 4=1rem、8=2rem）基于 rem 单位，适配响应式；
3. 颜色体系：颜色名+权重（如 red-500 是标准红，red-600 更深），支持透明通道（如 red-500/50）；
4. 重置类 ：reset 相关（如 border-0、m-0、p-0）用于清除默认样式。

补充说明

• 完整类名列表可参考 Tailwind 官方文档（含最新特性）；
• 可通过 tailwind.config.js 自定义预设值（如颜色、尺寸、断点）；
• 生产环境需开启 PurgeCSS 或 JIT 模式，移除未使用的类名，减小体积。

以上覆盖了 Tailwind CSS 99% 的核心类名体系，遵循"原子化、语义化、可扩展"的原则，掌握后可快速构建任意界面样式。

ps：AI生成，供学习参考