Tailwind CSS 核心概念与工具类

bg-blue-500   → 前缀 bg（background 背景）+ blue（色相）+ 500（明度刻度）
text-sm       → 前缀 text（字号/文字颜色）+ sm（小号）
p-4           → 前缀 p（padding 内边距）+ 4（间距刻度）
rounded-lg    → 前缀 rounded（圆角）+ lg（大）

<!-- 主按钮：蓝色背景 + 悬停加深 -->
<button class="rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
  提交
</button>

<!-- 次按钮：浅色背景 + 描边 -->
<button class="rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-2 text-emerald-700">
  草稿
</button>

<!-- 错误提示：红色文字 -->
<p class="text-sm text-red-500">手机号格式不正确</p>

<!-- 透明度修饰：v4 用斜杠写法，bg-black/50 即半透明黑 -->
<div class="bg-black/50 text-white">遮罩层</div>

<!-- 卡片内统一留白 -->
<div class="rounded-lg border border-gray-200 p-6">
  <h2 class="text-lg font-semibold">课程大纲</h2>
  <!-- 区块之间用 mb-4 拉开距离 -->
  <p class="mb-4 text-sm text-gray-600">第一章：认识编程</p>
  <p class="mb-4 text-sm text-gray-600">第二章：变量与运算</p>
</div>

<!-- 子元素间距：space-y-4 为所有相邻子元素添加垂直间距 -->
<div class="space-y-4">
  <div class="rounded bg-gray-100 p-3">条目一</div>
  <div class="rounded bg-gray-100 p-3">条目二</div>
</div>

<!-- 标题：大字号 + 加粗 + 紧凑字距 + 紧凑行高 -->
<h1 class="text-3xl font-bold leading-tight tracking-tight">课程简介</h1>

<!-- 正文：常规字号 + 宽松行高，阅读更舒适 -->
<p class="mt-3 text-base leading-relaxed text-gray-600">
  这是一门面向零基础学习者的编程入门课程，
  通过项目实战帮助学员建立完整的编程思维。
</p>

<!-- 辅助文字：小字号 + 浅灰色 -->
<p class="mt-1 text-sm text-gray-400">更新于 2026 年 8 月</p>

<!-- 徽标：极小字号 + 大写 + 宽字距 -->
<span class="rounded bg-blue-100 px-2 py-0.5 text-xs font-medium uppercase tracking-wide text-blue-700">
  初级
</span>

<!-- 标题换行均衡：三行标题各行长度接近，视觉重量平均 -->
<h1 class="text-balance text-3xl font-bold tracking-tight">
  从零到上线：一门给设计专业的 Web 入门课
</h1>

<!-- 列表项单行省略：课程名超长时截断，不撑破布局 -->
<li class="truncate">JavaScript 高级程序设计（第 4 版·全彩·附赠源码与视频）</li>

<!-- 用户简介保留换行 -->
<p class="whitespace-pre-line text-sm text-gray-600">{user.bio}</p>

<!-- 长 URL 防爆版：容器内断词换行 -->
<p class="break-words text-sm text-gray-500">
  https://example.com/courses/web-basics/chapters/very-long-chapter-slug-name
</p>

<!-- 链接的"体面"下划线：细一点、淡一点、离字远一点 -->
<a href="/syllabus" class="underline decoration-1 underline-offset-4 decoration-gray-400 hover:decoration-gray-900">
  查看完整大纲
</a>

<!-- 错误文本：波浪线示意"拼写或格式可疑" -->
<p class="text-sm text-red-600 line-through decoration-2">原价 199 元</p>

<!-- 热词标记：波浪下划线 -->
<em class="not-italic underline decoration-wavy decoration-blue-500 underline-offset-4">闭包</em>

<!-- 大纲列表：数字编号 + 嵌套 -->
<ol class="list-decimal list-inside space-y-1 text-sm text-gray-600">
  <li>HTML 网页的骨架</li>
  <li>CSS 网页的皮肤</li>
  <li>JavaScript 网页的灵魂</li>
</ol>

<!-- 数据表格：边框合并 + 固定列宽，长内容不挤乱其他列 -->
<table class="w-full table-fixed border-collapse text-sm">
  <thead>
    <tr class="border-b border-gray-300 text-left">
      <th class="py-2">章节</th>
      <th class="py-2">时长</th>
    </tr>
  </thead>
  <tbody class="divide-y divide-gray-100">
    <tr><td class="py-2 truncate">环境搭建与第一个页面</td><td class="py-2">18 分钟</td></tr>
  </tbody>
</table>

<!-- 实心收藏图标：默认灰、悬停变红，颜色全部走工具类 -->
<button class="group">
  <svg viewBox="0 0 24 24" class="size-6 fill-gray-300 transition-colors group-hover:fill-red-500" aria-hidden="true">
    <path d="M12 21l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.18L12 21z" />
  </svg>
</button>

<!-- 线性图标：stroke 跟随文字色 -->
<svg viewBox="0 0 24 24" class="size-5 stroke-gray-500" fill="none" stroke-width="2" aria-hidden="true">
  <path d="M4 6h16M4 12h16M4 18h16" />
</svg>

<!-- 描边卡片 -->
<div class="rounded-lg border border-gray-200 p-4">
  轻量卡片，仅用描边区分层级
</div>

<!-- 虚线框：常用于"拖拽上传"区域 -->
<div class="rounded-lg border-2 border-dashed border-gray-300 p-8 text-center text-sm text-gray-500">
  拖拽文件到此处上传
</div>

<!-- 列表分隔线：divide-y 自动在子元素之间加线 -->
<ul class="divide-y divide-gray-100">
  <li class="py-3">第一章：认识编程</li>
  <li class="py-3">第二章：变量与运算</li>
  <li class="py-3">第三章：条件与循环</li>
</ul>

<!-- 焦点光晕：表单聚焦时的高亮圈 -->
<input class="rounded-md border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-blue-300 focus:outline-none" />

<!-- 胶囊按钮：rounded-full 两端全圆 -->
<button class="rounded-full bg-gray-900 px-6 py-2 text-sm text-white">开始学习</button>

<!-- 头像：正方形 + rounded-full 变圆形 -->
<img src="/avatar.png" alt="头像" class="h-12 w-12 rounded-full object-cover" />

<!-- 图片卡片：顶部圆角 + 内容区 -->
<figure class="overflow-hidden rounded-xl border border-gray-200">
  <img src="/cover.png" alt="封面" class="h-40 w-full object-cover" />
  <figcaption class="p-4 text-sm text-gray-600">课程封面图</figcaption>
</figure>

<!-- 阴影五档：sm（微弱）→ md（中等）→ lg → xl → 2xl -->
<div class="rounded-lg bg-white p-6 shadow-sm">常规卡片</div>
<div class="rounded-lg bg-white p-6 shadow-lg">浮起卡片</div>
<div class="rounded-lg bg-white p-6 shadow-2xl">弹窗层卡片</div>

<!-- 彩色阴影 + 透明度：v4 支持 shadow-颜色/透明度 -->
<div class="rounded-xl bg-white p-6 shadow-lg shadow-blue-500/20">
  品牌色投影：适合强调性卡片
</div>

<!-- 移除默认阴影 -->
<button class="rounded-md bg-blue-600 px-4 py-2 text-white shadow-md hover:shadow-lg active:shadow-none">
  悬停浮起、按下收起
</button>

<!-- 模糊背景：常用于弹窗背后的毛玻璃层 -->
<div class="fixed inset-0 bg-black/40 backdrop-blur-sm"></div>

<!-- 灰度图：未完成课程的封面 -->
<img src="/course.png" alt="未开课" class="h-32 w-full object-cover grayscale" />

<!-- 悬停恢复彩色：hover:grayscale-0 -->
<img src="/course.png" alt="封面"
     class="h-32 w-full object-cover grayscale transition-all hover:grayscale-0" />

<!-- 亮度与透明度：图片浮层上的文字可读性处理 -->
<div class="relative">
  <img src="/banner.png" alt="横幅" class="h-48 w-full object-cover brightness-50" />
  <p class="absolute inset-0 flex items-center justify-center text-lg font-medium text-white">
    半暗背景上的白色标题
  </p>
</div>

<!-- 一个按钮覆盖四种状态 -->
<button class="rounded-md bg-blue-600 px-4 py-2 text-white
               hover:bg-blue-700 focus:ring-2 focus:ring-blue-300
               active:bg-blue-800 disabled:opacity-50 disabled:cursor-not-allowed">
  提交
</button>

<!-- group-hover 示例：悬停整张卡片时标题变色、阴影加深 -->
<div class="group rounded-xl border border-gray-200 p-6 transition-shadow hover:shadow-md">
  <h3 class="text-lg font-semibold group-hover:text-blue-600">课程卡片</h3>
  <p class="mt-2 text-sm text-gray-500">悬停本卡片试试，标题会变蓝</p>
</div>

<!-- 任意宽度、任意颜色、任意网格 -->
<div class="w-[320px] bg-[#f8fafc] p-[13px]">精确到像素</div>
<div class="grid grid-cols-[1fr_2fr]">自定义网格列</div>
<p class="text-[clamp(1rem,2vw,1.5rem)]">响应式字号</p>

/* src/styles/global.css */
@import "tailwindcss";

@utility card-base {
  border-radius: 0.75rem;
  border: 1px solid var(--color-gray-200);
  box-shadow: var(--shadow-sm);
}

<!-- 自定义工具类 + 变体直接可用 -->
<div class="card-base hover:shadow-md">封装样式</div>