Tailwind CSS 常用样式图谱
一、布局类
container：响应式容器，自动设置左右内边距，在大屏幕上限制最大宽度
block：设置元素为块级元素（display: block）
inline：设置元素为行内元素（display: inline）
inline-block：设置元素为行内块级元素（display: inline-block）
flex：设置弹性布局（display: flex）
inline-flex：行内弹性布局（display: inline-flex）
grid：网格布局（display: grid）
inline-grid：行内网格布局（display: inline-grid）
hidden：隐藏元素（display: none）
static：静态定位（position: static）
relative：相对定位（position: relative）
absolute：绝对定位（position: absolute）
fixed：固定定位（position: fixed）
sticky：粘性定位（position: sticky）
top-0：上定位为 0（top: 0），支持 0-96 及 auto，如 top-4 对应 top: 1rem
right-0：右定位为 0（right: 0），规则同上
bottom-0：下定位为 0（bottom: 0），规则同上
left-0：左定位为 0（left: 0），规则同上
z-0：层级为 0（z-index: 0），支持 0-50，z-50 为最高层级
二、文字类
text-xs：文字大小 0.75rem（12px）
text-sm：文字大小 0.875rem（14px）
text-base：文字大小 1rem（16px）
text-lg：文字大小 1.125rem（18px）
text-xl：文字大小 1.25rem（20px）
text-2xl：文字大小 1.5rem（24px），支持到 text-9xl
font-light：字重 300（font-weight: 300）
font-normal：字重 400（font-weight: 400）
font-medium：字重 500（font-weight: 500）
font-semibold：字重 600（font-weight: 600）
font-bold：字重 700（font-weight: 700）
font-black：字重 900（font-weight: 900）
text-left：文字左对齐（text-align: left）
text-center：文字居中对齐（text-align: center）
text-right：文字右对齐（text-align: right）
text-justify：文字两端对齐（text-align: justify）
text-gray-500：文字颜色为中灰色，支持多种颜色及深浅（如 text-red-600、text-blue-400）
text-white：文字颜色白色（color: #fff）
text-transparent：文字透明（color: transparent）
italic：文字斜体（font-style: italic）
underline：文字下划线（text-decoration: underline）
line-through：文字删除线（text-decoration: line-through）
no-underline：无文字装饰（text-decoration: none）
leading-none：行高 1（line-height: 1）
leading-tight：行高 1.25（line-height: 1.25）
leading-normal：行高 1.5（line-height: 1.5）
leading-relaxed：行高 1.625（line-height: 1.625）
leading-loose：行高 2（line-height: 2）
tracking-tighter：字间距 - 0.05em
tracking-tight：字间距 - 0.025em
tracking-normal：字间距 0
tracking-wide：字间距 0.025em
tracking-wider：字间距 0.05em
tracking-widest：字间距 0.1em
三、间距类
外边距（margin）
m-0：外边距 0（margin: 0）
m-1：外边距 0.25rem（4px）
m-2：外边距 0.5rem（8px），支持 0-96 及 auto，如 m-4 对应 1rem（16px）
mt-2：上外边距 0.5rem（margin-top: 0.5rem）
mr-2：右外边距 0.5rem（margin-right: 0.5rem）
mb-2：下外边距 0.5rem（margin-bottom: 0.5rem）
ml-2：左外边距 0.5rem（margin-left: 0.5rem）
mx-2：水平外边距 0.5rem（margin-left: 0.5rem; margin-right: 0.5rem）
my-2：垂直外边距 0.5rem（margin-top: 0.5rem; margin-bottom: 0.5rem）
m-auto：外边距自动（margin: auto）
内边距（padding）
p-0：内边距 0（padding: 0）
p-1：内边距 0.25rem（4px）
p-2：内边距 0.5rem（8px），支持 0-96，如 p-4 对应 1rem（16px）
pt-2：上内边距 0.5rem（padding-top: 0.5rem）
pr-2：右内边距 0.5rem（padding-right: 0.5rem）
pb-2：下内边距 0.5rem（padding-bottom: 0.5rem）
pl-2：左内边距 0.5rem（padding-left: 0.5rem）
px-2：水平内边距 0.5rem（padding-left: 0.5rem; padding-right: 0.5rem）
py-2：垂直内边距 0.5rem（padding-top: 0.5rem; padding-bottom: 0.5rem）
四、边框类
border：添加 1px solid 边框（border: 1px solid #e5e7eb）
border-0：无边框（border-width: 0）
border-2：边框宽度 2px（border-width: 2px），支持 0-8
border-t：上边框（border-top: 1px solid #e5e7eb）
border-r：右边框（border-right: 1px solid #e5e7eb）
border-b：下边框（border-bottom: 1px solid #e5e7eb）
border-l：左边框（border-left: 1px solid #e5e7eb）
border-gray-300：边框颜色为浅灰色，支持多种颜色及深浅（如 border-red-500）
border-transparent：边框透明（border-color: transparent）
rounded-none：无圆角（border-radius: 0）
rounded-sm：小圆角（border-radius: 0.125rem）
rounded：常规圆角（border-radius: 0.25rem）
rounded-md：中等圆角（border-radius: 0.375rem）
rounded-lg：大圆角（border-radius: 0.5rem）
rounded-xl：特大圆角（border-radius: 0.75rem），支持到 rounded-3xl
rounded-full：圆形 / 椭圆形（border-radius: 9999px）
rounded-tl：左上圆角（border-top-left-radius: 0.25rem），同理有 rounded-tr、rounded-bl、rounded-br
五、样式类
背景
bg-white：背景白色（background-color: #fff）
bg-gray-100：背景浅灰色，支持多种颜色及深浅（如 bg-blue-500、bg-green-200）
bg-transparent：背景透明（background-color: transparent）
bg-gradient-to-r：从左到右渐变（background-image: linear-gradient (to right, ...)），支持 to-l、to-t、to-b 等方向
bg-cover：背景图片覆盖（background-size: cover）
bg-contain：背景图片适应容器（background-size: contain）
bg-center：背景图片居中（background-position: center）
bg-no-repeat：背景图片不重复（background-repeat: no-repeat）
尺寸
w-0：宽度 0（width: 0）
w-4：宽度 1rem（16px），支持 0-96
w-1/2：宽度 50%（width: 50%），支持 1/2 到 1/12 及 full（100%）、screen（100vw）
h-0：高度 0（height: 0）
h-4：高度 1rem（16px），支持 0-96
h-1/2：高度 50%（height: 50%），规则同宽度
min-w-0：最小宽度 0（min-width: 0）
min-w-full：最小宽度 100%（min-width: 100%）
min-h-0：最小高度 0（min-height: 0）
min-h-full：最小高度 100%（min-height: 100%）
min-h-screen：最小高度 100vh（min-height: 100vh）
max-w-xs：最大宽度 20rem（320px），支持 max-w-sm、max-w-md 等及 max-w-full（100%）
max-h-full：最大高度 100%（max-height: 100%）
弹性布局相关
flex-row：弹性方向横向（flex-direction: row）
flex-col：弹性方向纵向（flex-direction: column）
flex-row-reverse：横向反向（flex-direction: row-reverse）
flex-col-reverse：纵向反向（flex-direction: column-reverse）
flex-wrap：弹性换行（flex-wrap: wrap）
flex-nowrap：不换行（flex-wrap: nowrap）
justify-start：主轴起始对齐（justify-content: flex-start）
justify-center：主轴居中对齐（justify-content: center）
justify-end：主轴结束对齐（justify-content: flex-end）
justify-between：主轴两端对齐（justify-content: space-between）
justify-around：主轴平均分布（justify-content: space-around）
justify-evenly：主轴等距分布（justify-content: space-evenly）
items-start：交叉轴起始对齐（align-items: flex-start）
items-center：交叉轴居中对齐（align-items: center）
items-end：交叉轴结束对齐（align-items: flex-end）
items-baseline：交叉轴基线对齐（align-items: baseline）
items-stretch：交叉轴拉伸对齐（align-items: stretch）
flex-1：弹性占比 1（flex: 1 1 0%）
flex-auto：弹性自动（flex: 1 1 auto）
flex-none：无弹性（flex: none）
六、按钮类
btn：无默认样式，需搭配其他类组合使用
px-4 py-2：按钮水平内边距 1rem、垂直内边距 0.5rem（常用按钮内边距）
rounded：按钮圆角
bg-blue-500：按钮蓝色背景
text-white：按钮白色文字
hover:bg-blue-600：鼠标悬浮时背景加深（hover 伪类）
active:bg-blue-700：点击时背景更深（active 伪类）
focus:outline-none：聚焦时无外边框
focus:ring-2：聚焦时外边框 2px
focus:ring-blue-300：聚焦边框颜色
disabled:opacity-50：禁用时透明度 50%
disabled:cursor-not-allowed：禁用时鼠标样式为禁止