构建布局与组件

|
<div className="flex flex-row gap-4 p-4 bg-gray-100">
  {/* flex 启用弹性布局，flex-row 设置水平排列，gap-4 设置子元素间距 */}
  <div className="p-4 bg-blue-500 text-white rounded">项目 1</div>
  {/* 第一个弹性项目，蓝色背景 */}
  <div className="p-4 bg-green-500 text-white rounded">项目 2</div>
  {/* 第二个弹性项目，绿色背景 */}
  <div className="p-4 bg-purple-500 text-white rounded">项目 3</div>
  {/* 第三个弹性项目，紫色背景 */}
</div>

|
<div className="flex justify-center items-center h-64 bg-gray-100">
  {/* 使用 justify-center 和 items-center 实现完全居中 */}
  <div className="p-6 bg-white rounded-lg shadow-lg">
    {/* 居中的白色卡片 */}
    完全居中的内容
  </div>
</div>

|
<div className="grid grid-cols-3 gap-4 p-4">
  {/* grid 启用网格布局，grid-cols-3 创建三列，gap-4 设置网格间距 */}
  <div className="p-6 bg-blue-100 rounded-lg">卡片 1</div>
  {/* 第一列第一行的卡片 */}
  <div className="p-6 bg-green-100 rounded-lg">卡片 2</div>
  {/* 第二列第一行的卡片 */}
  <div className="p-6 bg-purple-100 rounded-lg">卡片 3</div

|
<div className="grid grid-cols-4 gap-4 p-4">
  {/* 创建四列网格 */}
  <div className="col-span-2 p-6 bg-blue-500 text-white rounded-lg">
    {/* col-span-2 让这个元素跨越两列 */}
    占据两列的内容
  </div>
  <div className="p-6 bg-green-500 text-white rounded-lg">正常</div>
  <div className="p-6 bg-purple-500 text-white rounded-lg">正常</div

|
<div className="container mx-auto p-4 bg-gray-100">
  {/* container 设置响应式最大宽度，mx-auto 实现水平居中，p-4 添加内边距 */}
  <div className="bg-white p-6 rounded-lg shadow">
    {/* 白色内容区域 */}
    这是一个响应式容器，会根据屏幕尺寸自动调整宽度
  </div>
</div>

|
<div className="space-y-4 p-6 bg-gray-100">
  {/* space-y-4 为所有子元素添加垂直间距，p-6 为容器添加内边距 */}
  <div className="p-4 bg-white rounded shadow">
    {/* p-4 为这个元素添加内边距 */}
    第一个卡片，有内边距
  </div>
  <div className="p-4 bg-white rounded shadow">
    {/* 第二个卡片，也有内边距 */}
    第二个卡片，有内边距
  </div>
  <

|
<div className="space-y-4 p-6">
  {/* space-y-4 为子元素添加垂直间距，p-6 添加内边距 */}
  <div className="font-sans text-lg">
    {/* font-sans 应用无衬线字体，text-lg 设置较大字号 */}
    这是无衬线字体（Sans Serif），看起来简洁现代
  </div>
  <div className="font-serif text-lg">
    {/* font-serif 应用衬线字体 */}
    这是衬线字体（Serif），看起来传统正式
  </div>
  <

|
<div className="space-y-3 p-6">
  {/* space-y-3 为子元素添加垂直间距，p-6 添加内边距 */}
  <div className="font-thin text-lg">极细字体（Thin 100）</div>
  {/* font-thin 应用最细的字体 */}
  <div className="font-light text-lg">细字体（Light 300）</div>
  {/* font-light 应用细字体 */}
  <div className="font-normal text-lg">正常字体（Normal 400）</div

|
<div className="space-y-6 p-6">
  {/* space-y-6 为子元素添加垂直间距，p-6 添加内边距 */}
  <div>
    {/* 紧凑行高示例 */}
    <div className="font-semibold mb-2">紧凑行高（leading-tight）</div>
    {/* font-semibold 设置半粗字体，mb-2 添加底部外边距 */}
    <p className="leading-tight text-gray-700">
      {/* leading-tight 设置紧凑行高，text-gray-700 设置文本颜色 */}
      这是一段使用紧凑行高的文本。行高较小，文本看起来比较紧凑，适合标题或需要节省空间的场合。每一行之间的距离较小，文本密度较高。

|
<div className="space-y-4 p-6">
  {/* space-y-4 为子元素添加垂直间距，p-6 添加内边距 */}
  <div className="border-b pb-2">
    {/* border-b 添加底部边框，pb-2 添加底部内边距 */}
    <div className="font-semibold mb-2">左对齐（text-left）</div>
    {/* font-semibold 设置半粗字体，mb-2 添加底部外边距 */}
    <p className="text-left text-gray-700">这是一段左对齐的文本。左对齐是默认的对齐方式，适合大多数正文内容。文本从左边开始排列，右边自然换行，这是最自然的阅读方式。</p>

|
<div className="max-w-2xl mx-auto p-8 bg-white rounded-lg shadow-lg">
  {/* max-w-2xl 设置最大宽度，mx-auto 实现水平居中，p-8 添加内边距，bg-white 设置白色背景，rounded-lg 设置圆角，shadow-lg 添加阴影 */}
  <h1 className="font-serif font-bold text-3xl text-center mb-4 text-gray-900">
    {/* font-serif 应用衬线字体，font-bold 设置粗体，text-3xl 设置大字号，text-center 居中对齐，mb-4 添加底部外边距，text-gray-900 设置深灰色文本 */}
    文章标题
  </h1>
  <div className="text-sm text-gray-500 text-center mb-6">
    {/* text-sm 设置小字号，text-gray-500 设置灰色文本，text-center 居中对齐，mb-6 添加底部外边距 */}
    作者：张三 | 发布时间：2024年1月1日
  </

|
<div className="grid grid-cols-5 gap-4 p-6">
  {/* grid 启用网格布局，grid-cols-5 创建五列，gap-4 设置间距，p-6 添加内边距 */}
  <div className="bg-blue-50 p-4 rounded text-center text-blue-900">
    {/* bg-blue-50 设置最浅的蓝色背景，p-4 添加内边距，rounded 设置圆角，text-center 居中对齐，text-blue-900 设置深蓝色文本 */}
    blue-50
  </div>
  <div className="bg-blue-200 p-4 rounded text-center text-blue-900">
    {/* bg-blue-200 设置浅蓝色背景 */}
    blue-200
  </div>

|
<div className="space-y-4 p-6 bg-gray-100">
  {/* space-y-4 为子元素添加垂直间距，p-6 添加内边距，bg-gray-100 设置浅灰色背景 */}
  <div className="bg-blue-500 p-4 rounded text-white">
    {/* bg-blue-500 设置蓝色背景，p-4 添加内边距，rounded 设置圆角，text-white 设置白色文本 */}
    完全不透明（opacity-100）
  </div>
  <div className="bg-blue-500 opacity-75 p-4 rounded text-white">
    {/* opacity-75 设置 75% 透明度，影响整个元素 */}
    75% 透明度（opacity-75）
  </div>

|
<div className="space-y-4 p-6">
  {/* space-y-4 为子元素添加垂直间距，p-6 添加内边距 */}
  <div className="border border-gray-300 p-4 rounded">
    {/* border 添加边框，border-gray-300 设置浅灰色边框，p-4 添加内边距，rounded 设置圆角 */}
    默认边框（border）
  </div>
  <div className="border-2 border-blue-500 p-4 rounded-lg">
    {/* border-2 设置 2px 边框宽度，border-blue-500 设置蓝色边框，rounded-lg 设置较大圆角 */}
    2px 蓝色边框（border-2 border-blue-500）
  </div>

|
<div className="grid grid-cols-3 gap-6 p-6 bg-gray-100">
  {/* grid 启用网格布局，grid-cols-3 创建三列，gap-6 设置间距，p-6 添加内边距，bg-gray-100 设置浅灰色背景 */}
  <div className="bg-white p-6 rounded-lg shadow-sm">
    {/* bg-white 设置白色背景，p-6 添加内边距，rounded-lg 设置圆角，shadow-sm 添加最小阴影 */}
    小阴影（shadow-sm）
  </div>
  <div className="bg-white p-6 rounded-lg shadow">
    {/* shadow 添加默认阴影 */}
    默认阴影（shadow）
  </div>

|
<div className="grid grid-cols-2 gap-6 p-6 bg-gray-50">
  {/* grid 启用网格布局，grid-cols-2 创建两列，gap-6 设置间距，p-6 添加内边距，bg-gray-50 设置浅灰色背景 */}
  <div className="bg-white p-6 rounded-lg shadow-md border border-gray-200">
    {/* bg-white 设置白色背景，p-6 添加内边距，rounded-lg 设置圆角，shadow-md 添加中等阴影，border 添加边框，border-gray-200 设置浅灰色边框 */}
    <h3 className="text-xl font-bold text-gray-900 mb-2">
      {/* text-xl 设置大字号，font-bold 设置粗体，text-gray-900 设置深灰色文本，mb-2 添加底部外边距 */}
      卡片标题
    </h3>
    <p className

|
<div className="space-x-4 p-6">
  {/* space-y-4 为子元素添加垂直间距，p-6 添加内边距 */}
  <button className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 active:bg-blue-800 transition-colors">
    {/* bg-blue-500 设置蓝色背景，text-white 设置白色文本，px-4 py-2 设置内边距，rounded 设置圆角，hover:bg-blue-600 设置悬浮时更深的蓝色，active:bg-blue-800 设置点击时最深的蓝色，transition-colors 添加颜色过渡动画 */}
    悬浮和点击按钮
  </button>
  <button className="bg-gray-500 text-white px-4 py-2 rounded opacity-50 cursor-not-allowed" disabled>
    {/* bg-gray-500 设置灰色背景，opacity-50 设置半透明，cursor-not-allowed 设置禁用鼠标样式，disabled 属性禁用按钮 */}
    禁用按钮

|
<div className="space-y-6 p-6">
  {/* space-y-6 为子元素添加垂直间距，p-6 添加内边距 */}
  <div>
    {/* 不同大小的按钮 */}
    <div className="font-semibold mb-3">不同大小的按钮</div>
    {/* font-semibold 设置半粗字体，mb-3 添加底部外边距 */}
    <div className="flex items-center gap-3">
      {/* flex 启用弹性布局，items-center 垂直居中，gap-3 设置间距 */}
      <button

|
<div className="space-y-6 p-6 max-w-md">
  {/* space-y-6 为子元素添加垂直间距，p-6 添加内边距，max-w-md 设置最大宽度 */}
  <div>
    {/* 基础输入框 */}
    <label className="block text-sm font-medium text-gray-700 mb-2">
      {/* block 设置为块级元素，text-sm 设置小字号，font-medium 设置中等字体粗细，text-gray-700 设置深灰色文本，mb-2 添加底部外边距 */}
      基础输入框
    </label>
    <input 
      type="text" 

|
<div className="space-x-4 p-6">
  {/* space-y-4 为子元素添加垂直间距，p-6 添加内边距 */}
  <button className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition-colors duration-200">
    {/* transition-colors 只过渡颜色属性，duration-200 设置 200ms 的过渡时间 */}
    颜色过渡（200ms）
  </button>
  <button className="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 hover:scale-105 transition-all duration-300">
    {/* hover:scale-105 设置悬浮时放大 5%，transition-all 过渡所有属性，duration-300 设置 300ms 的过渡时间 */}
    颜色和缩放过渡（300ms）
  </

|
<nav className="bg-white shadow-md">
  {/* bg-white 设置白色背景，shadow-md 添加中等阴影 */}
  <div className="container mx-auto px-4">
    {/* container 设置响应式最大宽度，mx-auto 实现水平居中，px-4 添加左右内边距 */}
    <div className="flex items-center justify-between h-16">
      {/* flex 启用弹性布局，items-center 垂直居中，justify-between 两端对齐，h-16 设置高度 */}
      <div className="flex items-center">
        {/* Logo 区域 */}

|
<div className="max-w-sm mx-auto bg-white rounded-lg shadow-lg overflow-hidden">
  {/* max-w-sm 设置最大宽度，mx-auto 实现水平居中，bg-white 设置白色背景，rounded-lg 设置圆角，shadow-lg 添加大阴影，overflow-hidden 隐藏溢出内容 */}
  <img 
    src="https://via.placeholder.com/400x200" 
    alt="卡片图片" 
    className="w-full h-48 object-cove bg-red-50"
    {/* w-full 设置全宽，h-48 设置高度，object-cover 保持宽高比并覆盖 */}
  />
  <div className="p-6">
    {/* p-6 添加内边距 */

|
<form className="max-w-md mx-auto bg-white p-8 rounded-lg shadow-md">
  {/* max-w-md 设置最大宽度，mx-auto 实现水平居中，bg-white 设置白色背景，p-8 添加内边距，rounded-lg 设置圆角，shadow-md 添加中等阴影 */}
  <h2 className="text-2xl font-bold text-gray-900 mb-6 text-center">
    {/* text-2xl 设置超大字号，font-bold 设置粗体，text-gray-900 设置深灰色文本，mb-6 添加底部外边距，text-center 居中对齐 */}
    联系表单
  </h2>
  <div className="space-y-4">
    {/* space-y-4 为子元素添加垂直间距 */}
    <div>
      {