Tailwind CSS 是一款功能强大的实用工具类 CSS 框架，它允许开发者通过简洁的类名来快速构建响应式、功能丰富的网页界面。下面，我将为你提供一个Tailwind CSS的速查表，帮助你更高效地使用这个框架。
基础布局
容器类
.container: 创建一个固定宽度的容器，通常用于包裹内容。.max-w-screen-*: 创建一个最大宽度等于屏幕宽度的容器，*代表不同屏幕尺寸（例如：.max-w-screen-md）。
flex布局
.flex: 启用flex布局。.flex-col: 垂直排列子元素。.flex-row: 水平排列子元素。.justify-between: 子元素两端对齐。.justify-around: 子元素等间距分布。.items-center: 子元素垂直居中。.items-end: 子元素垂直居底。
grid布局
.grid: 启用grid布局。.grid-cols-*: 设置列数。.grid-rows-*: 设置行数。.gap-*: 设置网格间隙。
响应式设计
屏幕尺寸
.sm: 适用于小屏幕。.md: 适用于中等屏幕。.lg: 适用于大屏幕。.xl: 适用于超大屏幕。
布局对齐
.mx-*: 水平外边距。.my-*: 垂直外边距。.p-*: 内边距。.pl-*: 左内边距。.pr-*: 右内边距。.pt-*: 顶部内边距。.pb-*: 底部内边距。
间距
.m-2: 2px外边距。.p-4: 4px内边距。.ml-6: 6px左外边距。.mr-8: 8px右外边距。
文本
字体
.font-bold: 加粗字体。.text-*: 设置字体大小（例如：.text-lg）。
对齐
.text-left: 左对齐。.text-center: 居中对齐。.text-right: 右对齐。
文本样式
.uppercase: 全大写。.lowercase: 全小写。.capitalize: 首字母大写。
颜色
.bg-*: 设置背景颜色。.text-*: 设置文本颜色。
颜色速查表
.bg-red-500.bg-blue-500.bg-green-500.bg-yellow-500.bg-purple-500.bg-pink-500.text-red-500.text-blue-500.text-green-500.text-yellow-500.text-purple-500.text-pink-500
边框
.border: 添加边框。.border-red-500: 设置边框颜色。.border-dashed: 设置虚线边框。
动画
.animate-pulse: 创建脉冲动画。.hover:bg-red-500: 鼠标悬停时背景颜色变为红色。
其他
.rounded-full: 创建圆形元素。.shadow-md: 添加中等阴影效果。
通过以上速查表，你可以快速掌握Tailwind CSS的基本用法。当然，Tailwind CSS还有更多高级功能等待你去探索。祝你编码愉快！