Css

下面是对 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