下面是对 Tailwind CSS 类名前缀(开头简写)的一个系统总结,涵盖了常用的样式类别以及它们控制的样式类型,便于查阅与理解:

🧩 Tailwind CSS 类名前缀速查表

类名前缀作用描述影响的 CSS 属性
w-宽度width
h-高度height
min-w-最小宽度min-width
min-h-最小高度min-height
max-w-最大宽度max-width
max-h-最大高度max-height
p-内边距 (padding)padding(所有)
px-水平内边距padding-left、padding-right
py-垂直内边距padding-top、padding-bottom
pt-上内边距padding-top
pr-右内边距padding-right
pb-下内边距padding-bottom
pl-左内边距padding-left
m-外边距 (margin)margin(所有)
mx-水平外边距margin-left、margin-right
my-垂直外边距margin-top、margin-bottom
mt-上外边距margin-top
mr-右外边距margin-right
mb-下外边距margin-bottom
ml-左外边距margin-left
text-文字样式color, align, size, weight, transform
font-字体粗细、字体族font-weight, font-family
leading-行高line-height
tracking-字间距letter-spacing
bg-背景样式background-color, background-image, background-size 等
border-边框样式border-width, border-color 等
rounded-圆角border-radius
shadow-阴影box-shadow
flex、grid、inline-布局模式display
items-垂直方向对齐align-items
justify-水平方向对齐justify-content
gap-容器子元素间距gap
space-x-横向子元素间距margin-left
space-y-纵向子元素间距margin-top
z-层级z-index
opacity-透明度opacity
overflow-溢出控制overflow, overflow-x, overflow-y
cursor-鼠标样式cursor
transition、duration-动画过渡transition, transition-duration 等
ease-缓动函数transition-timing-function
scale-、rotate-、translate-变换transform
absolute、relative、fixed、sticky定位模式position
top-、left-、right-、bottom-定位偏移top, left 等
hidden、block、inline-block显示类型display

📌 特殊响应式与状态前缀(组合使用)

前缀说明示例
sm: / md: / lg: / xl: / 2xl:响应式断点md:w-1/2(中等屏幕宽度为 50%)
hover:悬停状态hover:bg-blue-500
focus:聚焦状态focus:ring
disabled:禁用状态disabled:opacity-50
dark:深色模式dark:bg-gray-800
group-hover:父元素悬停触发group-hover:text-red-500