max-w-7xl     /* 最大宽度: 80rem (1280px) */
mx-auto       /* 水平居中: margin-left/right auto */
w-full        /* 宽度100% */
w-8           /* 宽度: 2rem (32px) */
w-48          /* 宽度: 12rem (192px) */
min-w-0       /* 最小宽度: 0 */
min-w-\[140px\] /* 最小宽度: 140px (自定义值) */

h-16         /* 高度: 4rem (64px) */
h-8          /* 高度: 2rem (32px) */
min-h-screen /* 最小高度: 100vh */
min-h-\[200px\] /* 最小高度: 200px */

flex           /* display: flex */
flex-col       /* flex-direction: column */
flex-row       /* flex-direction: row */
flex-grow      /* flex-grow: 1 */
flex-shrink-0  /* flex-shrink: 0 */
items-center   /* align-items: center */
justify-between /* justify-content: space-between */
justify-center /* justify-content: center */

grid           /* display: grid */
gap-8          /* grid-gap: 2rem */
gap-12         /* grid-gap: 3rem */

p-4           /* padding: 1rem */
p-6           /* padding: 1.5rem */
p-8           /* padding: 2rem */
px-4          /* padding-left/right: 1rem */
py-1          /* padding-top/bottom: 0.25rem */
py-2          /* padding-top/bottom: 0.5rem */
py-4          /* padding-top/bottom: 1rem */
py-8          /* padding-top/bottom: 2rem */
py-10         /* padding-top/bottom: 2.5rem */
py-12         /* padding-top/bottom: 3rem */
pl-3          /* padding-left: 0.75rem */
pr-3          /* padding-right: 0.75rem */

m-1           /* margin: 0.25rem */
ml-2          /* margin-left: 0.5rem */
ml-4          /* margin-left: 1rem */
mr-1          /* margin-right: 0.25rem */
mr-2          /* margin-right: 0.5rem */
mt-2          /* margin-top: 0.5rem */
mt-6          /* margin-top: 1.5rem */
mt-8          /* margin-top: 2rem */
mt-10         /* margin-top: 2.5rem */
mb-2          /* margin-bottom: 0.5rem */
mb-4          /* margin-bottom: 1rem */
mb-6          /* margin-bottom: 1.5rem */
mb-8          /* margin-bottom: 2rem */
mb-10         /* margin-bottom: 2.5rem */
mb-12         /* margin-bottom: 3rem */
my-1          /* margin-top/bottom: 0.25rem */

space-x-2     /* 子元素水平间距: 0.5rem */
space-x-4     /* 子元素水平间距: 1rem */
space-y-3     /* 子元素垂直间距: 0.75rem */

bg-white       /* 白色背景 */
bg-gray-50     /* 浅灰色背景 */
bg-gray-100    /* 灰色背景 */
bg-gray-200    /* 中灰色背景 */
bg-indigo-50   /* 浅靛蓝色背景 */
bg-indigo-100  /* 靛蓝色背景 */
bg-indigo-600  /* 深靛蓝色背景 */
bg-red-50      /* 浅红色背景 */
bg-yellow-50   /* 浅黄色背景 */
bg-blue-50     /* 浅蓝色背景 */

text-gray-400   /* 浅灰色文字 */
text-gray-500   /* 灰色文字 */
text-gray-600   /* 中灰色文字 */
text-gray-700   /* 深灰色文字 */
text-gray-900   /* 深黑色文字 */
text-indigo-500 /* 靛蓝色文字 */
text-indigo-600 /* 深靛蓝色文字 */
text-indigo-700 /* 更深靛蓝色文字 */
text-red-600    /* 红色文字 */
text-white      /* 白色文字 */

border-gray-100  /* 浅灰色边框 */
border-gray-200  /* 灰色边框 */
border-gray-300  /* 中灰色边框 */
border-indigo-100 /* 浅靛蓝色边框 */
border-indigo-200 /* 靛蓝色边框 */
border-transparent /* 透明边框 */

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-3xl       /* 字体大小: 1.875rem (30px) */
text-4xl       /* 字体大小: 2.25rem (36px) */

font-bold      /* 字体粗细: 700 */
font-extrabold /* 字体粗细: 800 */
font-medium    /* 字体粗细: 500 */

text-center    /* 文本居中对齐 */
text-left      /* 文本左对齐 */
text-right     /* 文本右对齐 */

leading-tight  /* 行高: 1.25 */
leading-relaxed /* 行高: 1.625 */
tracking-wider /* 字母间距: 0.05em */
uppercase      /* 大写字母 */
italic         /* 斜体 */

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

hidden sm:flex      /* 默认隐藏，小屏幕及以上显示为flex */
sm:ml-6            /* 小屏幕及以上左边距: 1.5rem */
sm:px-6            /* 小屏幕及以上水平内边距: 1.5rem */
md:space-x-6       /* 中等屏幕及以上水平间距: 1.5rem */
lg:px-8            /* 大屏幕及以上水平内边距: 2rem */

border         /* 添加边框 */
border-2       /* 边框宽度: 2px */
border-b       /* 底部边框 */
border-b-2     /* 底部边框宽度: 2px */
border-t       /* 顶部边框 */

rounded-md     /* 中等圆角: 0.375rem */
rounded-lg     /* 大圆角: 0.5rem */
rounded-full   /* 全圆角 (圆形) */
rounded-xl     /* 超大圆角: 0.75rem */

shadow         /* 基础阴影 */
shadow-sm      /* 小阴影 */
shadow-lg      /* 大阴影 */

relative       /* 相对定位 */
absolute       /* 绝对定位 */
sticky         /* 粘性定位 */
top-0          /* 距离顶部: 0 */
right-0        /* 距离右侧: 0 */
bottom-8       /* 距离底部: 2rem */
left-4         /* 距离左侧: 1rem */
z-30           /* z-index: 30 */
z-50           /* z-index: 50 */

block          /* display: block */
inline-flex    /* display: inline-flex */
hidden         /* display: none */

transition-colors     /* 颜色过渡 */
transition-all        /* 所有属性过渡 */
transition-transform  /* 变换过渡 */
duration-200         /* 过渡时间: 200ms */
duration-300         /* 过渡时间: 300ms */
ease-in-out          /* 缓动函数: ease-in-out */

transform             /* 启用变换 */
rotate-180           /* 旋转180度 */
scale-95             /* 缩放95% */
scale-100            /* 缩放100% */

hover:text-indigo-600     /* 悬停时文字变为靛蓝色 */
hover:bg-indigo-50        /* 悬停时背景变为浅靛蓝色 */
hover:bg-gray-50          /* 悬停时背景变为浅灰色 */
hover:border-gray-300     /* 悬停时边框变为灰色 */
hover:text-gray-700       /* 悬停时文字变为深灰色 */

focus:outline-none        /* 焦点时无轮廓 */
focus:ring-2              /* 焦点时添加环形阴影 */
focus:ring-indigo-500     /* 焦点时环形颜色为靛蓝色 */
focus:ring-offset-2       /* 焦点时环形偏移 */
focus:border-indigo-500   /* 焦点时边框颜色 */

cursor-pointer           /* 鼠标指针样式 */
overflow-hidden          /* 溢出隐藏 */
truncate                 /* 文本截断 */
line-clamp-2             /* 限制显示2行 */
object-cover             /* 图片填充方式 */

w-4 h-4        /* 宽高: 1rem (16px) */
w-8 h-8        /* 宽高: 2rem (32px) */
mr-1           /* 右边距: 0.25rem */
mr-2           /* 右边距: 0.5rem */
mr-1.5         /* 右边距: 0.375rem */
fill-current   /* 填充颜色继承父元素 */
stroke-current /* 描边颜色继承父元素 */

<a class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
    注册
</a>

<article class="group bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-lg transition-all duration-300 border border-gray-100">
    <!-- 内容 -->
</article>

<nav class="bg-white shadow-sm border-b border-gray-200 sticky top-0 z-30">
    <!-- 导航内容 -->
</nav>

<input class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">