Tailwind CSS 类名完全教程

// 传统 CSS 方式
<div className="my-container">内容</div>
// CSS 文件中需要定义：
// .my-container { max-width: 1024px; margin: 0 auto; padding: 32px; }
 
// Tailwind CSS 方式
<div className="max-w-4xl mx-auto p-8">内容</div>
// 不需要写任何 CSS！

<div className="max-w-4xl">
  {/* 这个容器最大宽度是 896px，即使屏幕很宽，它也不会超过这个宽度 */}
</div>

<div className="mx-auto">
  {/* mx = margin x轴（水平）
       auto = 自动
       效果：左右外边距自动，实现水平居中 */}
</div>

<div className="space-y-4">
  <div>项目 1</div>  {/* 无上边距 */}
  <div>项目 2</div>  {/* 上边距 16px */}
  <div>项目 3</div>  {/* 上边距 16px */}
</div>

<div className="text-sm md:text-base lg:text-lg">
  {/* 手机上：小字体
       平板上：基础字体
       电脑上：大字体 */}
</div>

<div className="max-w-4xl mx-auto p-8">
  {/* max-w-4xl: 最大宽度 896px
       mx-auto: 水平居中
       p-8: 内边距 32px */}
</div>

<div className="bg-white rounded-lg shadow-md p-6">
  {/* bg-white: 白色背景
       rounded-lg: 大圆角
       shadow-md: 中等阴影
       p-6: 内边距 24px */}
</div>

<h1 className="text-4xl font-bold text-center mb-8">
  {/* text-4xl: 36px 大小
       font-bold: 粗体
       text-center: 居中对齐
       mb-8: 底部外边距 32px */}
</h1>

<button className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
  {/* bg-blue-500: 蓝色背景
       text-white: 白色文字
       px-4: 左右内边距 16px
       py-2: 上下内边距 8px
       rounded: 圆角
       hover:bg-blue-600: 悬停时变深蓝 */}
</button>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  {/* grid: 启用网格
       grid-cols-1: 手机上 1 列
       md:grid-cols-2: 平板上 2 列
       lg:grid-cols-3: 电脑上 3 列
       gap-6: 网格间距 24px */}
</div>

// 临时添加背景色查看布局
<div className="bg-red-200">查看这个容器的大小</div>
 
// 添加边框查看边界
<div className="border border-blue-500">查看边界</div>

<div className="min-h-screen bg-gray-100 py-8">
  <div className="max-w-6xl mx-auto px-6">
    <h1 className="text-4xl font-bold text-center mb-12 text-gray-800">
      我的博客
    </h1>
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <div className="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
        <h2 className="text-xl font-semibold mb-2">文章标题</h2>
        <p className="text-gray-600">文章描述...</p>
      </div>
    </div>
  </div>
</div>