Tailwind CSS 常用样式速查表

block        /* 块级元素 */
inline       /* 行内元素 */
inline-block /* 行内块元素 */
flex         /* 弹性布局 */
grid         /* 网格布局 */
hidden       /* 隐藏元素 */

static       /* 静态定位（默认） */
relative     /* 相对定位 */
absolute     /* 绝对定位 */
fixed        /* 固定定位 */
sticky       /* 粘性定位 */

/* 主轴方向 */
flex-row        /* 水平排列（左到右） */
flex-row-reverse /* 水平反向（右到左） */
flex-col        /* 垂直排列（上到下） */
flex-col-reverse /* 垂直反向（下到上） */

/* 主轴对齐 */
justify-start   /* 左对齐 */
justify-center  /* 居中对齐 */
justify-end     /* 右对齐 */
justify-between /* 两端对齐 */
justify-around  /* 环绕对齐 */

/* 交叉轴对齐 */
items-start     /* 顶部对齐 */
items-center    /* 垂直居中 */
items-end       /* 底部对齐 */
items-stretch   /* 拉伸填充 */

grid-cols-1     /* 1列 */
grid-cols-2     /* 2列 */
grid-cols-3     /* 3列 */
grid-rows-1     /* 1行 */
grid-rows-2     /* 2行 */

/* 所有方向 */
p-0  p-1  p-2  p-3  p-4  p-5  p-6  p-8  p-10

/* 水平方向 */
px-0 px-1 px-2 px-3 px-4 px-5 px-6 px-8 px-10

/* 垂直方向 */
py-0 py-1 py-2 py-3 py-4 py-5 py-6 py-8 py-10

/* 单边 */
pt-0 pt-1...  /* 上边距 */
pr-0 pr-1...  /* 右边距 */
pb-0 pb-1...  /* 下边距 */
pl-0 pl-1...  /* 左边距 */

/* 所有方向 */
m-0  m-1  m-2  m-3  m-4  m-5  m-6  m-8  m-10

/* 水平方向 */
mx-0 mx-1 mx-2 mx-3 mx-4 mx-5 mx-6 mx-8 mx-10

/* 垂直方向 */
my-0 my-1 my-2 my-3 my-4 my-5 my-6 my-8 my-10

/* 单边 */
mt-0 mt-1...  /* 上边距 */
mr-0 mr-1...  /* 右边距 */
mb-0 mb-1...  /* 下边距 */
ml-0 ml-1...  /* 左边距 */

/* 自动居中 */
mx-auto       /* 水平居中 */
my-auto       /* 垂直居中 */

w-0    w-1    w-2    w-3    w-4    /* 固定宽度 */
w-1/2  w-1/3  w-2/3  w-1/4  w-3/4  /* 比例宽度 */
w-full       /* 100%宽度 */
w-screen     /* 视口宽度 */
w-auto       /* 自动宽度 */
w-min        /* 最小内容宽度 */
w-max        /* 最大内容宽度 */

h-0    h-1    h-2    h-3    h-4    /* 固定高度 */
h-1/2  h-1/3  h-2/3  h-1/4  h-3/4  /* 比例高度 */
h-full       /* 100%高度 */
h-screen     /* 视口高度 */
h-auto       /* 自动高度 */

max-w-sm     /* 小尺寸最大宽度 */
max-w-md     /* 中尺寸最大宽度 */
max-w-lg     /* 大尺寸最大宽度 */
max-w-xl     /* 超大尺寸最大宽度 */
max-w-full   /* 100%最大宽度 */

min-h-0      /* 最小高度0 */
min-h-full   /* 最小高度100% */
min-h-screen /* 最小高度视口 */

text-white      text-black
text-gray-50    text-gray-100   text-gray-200
text-gray-300   text-gray-400   text-gray-500
text-gray-600   text-gray-700   text-gray-800   text-gray-900

text-red-500    text-blue-500    text-green-500
text-yellow-500 text-purple-500  text-pink-500
text-indigo-500 text-teal-500    text-orange-500

bg-white       bg-black
bg-gray-50     bg-gray-100    bg-gray-200
bg-gray-300    bg-gray-400    bg-gray-500
bg-gray-600    bg-gray-700    bg-gray-800    bg-gray-900

bg-red-500     bg-blue-500     bg-green-500
bg-yellow-500  bg-purple-500   bg-pink-500
bg-indigo-500  bg-teal-500     bg-orange-500

/* 渐变背景 */
bg-gradient-to-r  /* 从左到右渐变 */
bg-gradient-to-b  /* 从上到下渐变 */

text-xs     /* 超小文字 */
text-sm     /* 小文字 */
text-base   /* 基础文字 */
text-lg     /* 大文字 */
text-xl     /* 超大文字 */
text-2xl    text-3xl    text-4xl    text-5xl    text-6xl

font-thin      /* 细体(100) */
font-light     /* 轻体(300) */
font-normal    /* 正常(400) */
font-medium    /* 中等(500) */
font-semibold  /* 半粗(600) */
font-bold      /* 粗体(700) */
font-extrabold /* 特粗(800) */

text-left      /* 左对齐 */
text-center    /* 居中对齐 */
text-right     /* 右对齐 */
text-justify   /* 两端对齐 */

underline        /* 下划线 */
line-through     /* 删除线 */
no-underline     /* 无装饰 */

leading-3    leading-4    leading-5
leading-6    leading-7    leading-8
leading-9    leading-10

border         /* 默认边框 */
border-0       /* 无边框 */
border-2       /* 2px边框 */
border-4       /* 4px边框 */
border-8       /* 8px边框 */

border-white   border-black
border-gray-100  border-gray-200  border-gray-300
border-gray-400  border-gray-500  border-gray-600
border-red-500   border-blue-500  border-green-500

rounded-none   /* 无圆角 */
rounded-sm     /* 小圆角 */
rounded        /* 默认圆角 */
rounded-md     /* 中圆角 */
rounded-lg     /* 大圆角 */
rounded-xl     /* 超大圆角 */
rounded-2xl    /* 2倍大圆角 */
rounded-full   /* 完全圆角 */

/* 单边圆角 */
rounded-t-*    /* 上边圆角 */
rounded-r-*    /* 右边圆角 */
rounded-b-*    /* 下边圆角 */
rounded-l-*    /* 左边圆角 */

bg-cover       /* 覆盖整个区域 */
bg-contain     /* 包含整个图片 */
bg-center      /* 背景居中 */
bg-no-repeat   /* 不重复 */
bg-repeat      /* 重复 */

bg-opacity-0   bg-opacity-25  bg-opacity-50
bg-opacity-75  bg-opacity-100

shadow-sm      /* 小阴影 */
shadow         /* 默认阴影 */
shadow-md      /* 中阴影 */
shadow-lg      /* 大阴影 */
shadow-xl      /* 超大阴影 */
shadow-2xl     /* 2倍大阴影 */
shadow-none    /* 无阴影 */

opacity-0      opacity-25     opacity-50
opacity-75     opacity-100

transform      /* 启用变换 */
scale-50       scale-75       scale-90
scale-100      scale-105      scale-110
scale-125      scale-150

rotate-0       rotate-45      rotate-90
rotate-180     -rotate-45     -rotate-90

hover:bg-blue-500     /* 悬停时背景变蓝 */
hover:text-white      /* 悬停时文字变白 */
hover:shadow-lg       /* 悬停时阴影变大 */
hover:scale-105       /* 悬停时轻微放大 */
hover:opacity-75      /* 悬停时变透明 */

focus:outline-none    /* 移除焦点轮廓 */
focus:ring-2          /* 焦点环 */
focus:ring-blue-500   /* 蓝色焦点环 */

active:scale-95       /* 点击时缩小 */
active:bg-blue-600    /* 点击时背景变深 */

sm:  /* 小屏幕 ≥640px */
md:  /* 中屏幕 ≥768px */
lg:  /* 大屏幕 ≥1024px */
xl:  /* 超大屏 ≥1280px */
2xl: /* 2倍超大 ≥1536px */

/* 移动端：垂直排列，桌面端：水平排列 */
flex-col md:flex-row

/* 移动端：小文字，桌面端：大文字 */
text-sm md:text-lg

/* 移动端：全宽，桌面端：固定宽度 */
w-full md:w-64

/* 移动端：隐藏，桌面端：显示 */
hidden md:block

<!-- 按钮样式组合 -->
<button
  class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded"
>
  点击我
</button>

<!-- 卡片样式组合 -->
<div class="bg-white rounded-lg shadow-md p-6 max-w-sm mx-auto">卡片内容</div>

<!-- 移动端单列，桌面端双列 -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
  <div>内容1</div>
  <div>内容2</div>
</div>