Tailwind CSS 练习题(10 题)

这一页给 10 道 Tailwind CSS 练习题,覆盖文本类、间距盒模型、Flex 布局、Grid 网格、响应式前缀、悬停状态、颜色渐变、圆角阴影边框、显隐控制、实战个人卡片这些最核心的知识点。每题都有题目描述、提示、可折叠的参考答案。

使用建议:先自己动手写,卡住了再看提示,实在写不出再对照答案。Tailwind 是当下最火的实用类 CSS 框架,练熟了就能在 HTML 里直接写出漂亮响应式界面,几乎不用切 CSS 文件。

基础(5 题):文本 / 间距 / Flex / Grid / 响应式

第 1 题:CDN 引入与基础文本类

题目:新建 HTML 页面,通过 Tailwind Play CDN 引入,写出一个大标题(粗体 3xl)、灰色副标题、带下划线的蓝色小字、全大写带字距的极小字。

提示:CDN 引入 cdn.tailwindcss.com(仅开发用,生产应走 PostCSS 构建)。text-{xs|sm|base|xl|2xl|3xl} 控字号,font-bold 加粗,text-{色名}-{深浅} 控色,tracking-wider 加字距,uppercase 转大写。

参考答案

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind 第一个页面</title>
  <!-- Tailwind Play CDN:开发预览用,生产环境用 PostCSS 构建 -->
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <!-- 直接堆实用类,无需写 CSS -->
  <h1 class="text-3xl font-bold text-gray-900">你好,Tailwind</h1>
  <p class="text-base text-gray-500 mt-2">实用优先的 CSS 框架。</p>
  <p class="text-sm text-blue-600 underline">蓝色带下划线的小字</p>
  <p class="text-xs uppercase tracking-wider text-gray-400">全大写+字距加宽</p>
</body>
</html>
<!-- 知识点:
  - text-{xs|sm|base|lg|xl|2xl...} 控字号
  - font-{normal|medium|bold...} 控字重
  - text-{颜色}-{深浅} 控颜色,如 text-gray-500
  - tracking-wider 字距;uppercase 转大写 -->

第 2 题:间距与盒模型

题目:写出:(a) 一个 p-4 m-2 w-full 的容器;(b) 上右下左各不相同的内边距;(c) 一半宽度水平居中;(d) 一个 128px 的方块。

提示:p/m + 数字 是 padding/margin,数字按 4px 递增(p-4 = 16px);方向后缀 t/r/b/l/x/y;w-full 宽 100%,w-1/2 一半,w-32 固定 8rem;mx-auto 水平居中。

参考答案

<div class="p-4 m-2 w-full bg-blue-50 rounded">
  <!-- p-4 = 1rem 内边距,m-2 = 0.5rem 外边距,w-full = 100% 宽 -->
  <p>外层有内边距 4、外边距 2、宽度撑满。</p>
</div>

<!-- 4 个方向单独设置 -->
<div class="pt-2 pr-4 pb-6 pl-8 bg-green-50">
  上2 右4 下6 左8(顺时针)
</div>

<!-- mx-auto 居中;mt-4 上外边距 -->
<div class="w-1/2 mx-auto mt-4 bg-yellow-50">
  宽度一半,水平居中
</div>

<!-- 固定宽高 -->
<div class="w-32 h-32 bg-red-100">128px 方块</div>

<!-- 知识点:
  - p/m + 数字 = padding/margin,数字按 4px 递增(p-4 = 16px)
  - 方向:t/r/b/l/x/y,如 pt-2 = padding-top
  - w-/h- 宽高:w-full/w-1/2/w-32(固定 8rem)
  - mx-auto 是水平居中经典写法 -->

第 3 题:Flex 布局

题目:写出:(a) 水平垂直居中的容器;(b) 两端对齐的一行;(c) 三个等分子项带间隔;(d) 纵向排列;(e) 可换行的标签。

提示:`flex` 启用 flex,items-* 控交叉轴,justify-* 控主轴;flex-1 等分剩余空间,gap-* 加间隔,flex-col 纵向,flex-wrap 允许换行。

参考答案

<!-- 居中排列 -->
<div class="flex items-center justify-center bg-gray-100 h-32">
  <span>水平垂直居中</span>
</div>

<!-- 两端对齐 -->
<div class="flex justify-between items-center p-4">
  <span>左边</span>
  <span>右边</span>
</div>

<!-- 平均间隔 -->
<div class="flex gap-4">
  <div class="bg-blue-200 p-3 flex-1">A</div>
  <div class="bg-blue-200 p-3 flex-1">B</div>
  <div class="bg-blue-200 p-3 flex-1">C</div>
</div>

<!-- 主轴方向:横向反向 / 纵向 -->
<div class="flex flex-col gap-2">
  <div>第一行</div>
  <div>第二行</div>
</div>

<!-- 换行 -->
<div class="flex flex-wrap gap-2">
  <span class="bg-pink-100 px-2 py-1">标签一</span>
  <span class="bg-pink-100 px-2 py-1">标签二</span>
</div>
<!-- 知识点:
  - flex 启用 flex;items-* 控交叉轴对齐;justify-* 控主轴对齐
  - flex-1 让子项等分剩余空间;gap-* 加间隔
  - flex-col 改成纵向;flex-wrap 允许换行 -->

第 4 题:Grid 网格

题目:写出:(a) 3 等分网格;(b) 一项跨 2 列;(c) 12 列栅格(主 8 + 侧 4);(d) 同时定义行列的网格。

提示:`grid` + grid-cols-{n} 定义 n 等分列;gap-{n} 行列间距;col-span-{n} 跨列;可以 grid-cols-12 + col-span-{n} 模拟 Bootstrap 栅格。

参考答案

<!-- 3 等分网格 -->
<div class="grid grid-cols-3 gap-4">
  <div class="bg-blue-100 p-4">1</div>
  <div class="bg-blue-100 p-4">2</div>
  <div class="bg-blue-100 p-4">3</div>
</div>

<!-- 跨列:col-span-2 -->
<div class="grid grid-cols-3 gap-2">
  <div class="bg-green-100 p-4 col-span-2">占 2 列</div>
  <div class="bg-green-100 p-4">1 列</div>
</div>

<!-- 经典 12 列栅格 -->
<div class="grid grid-cols-12 gap-4">
  <div class="col-span-8 bg-gray-100 p-4">主内容(8)</div>
  <div class="col-span-4 bg-gray-100 p-4">侧栏(4)</div>
</div>

<!-- 行列同时控 -->
<div class="grid grid-cols-2 grid-rows-3 gap-2">
  <div class="bg-pink-100 p-2">A</div>
  <div class="bg-pink-100 p-2">B</div>
  <div class="bg-pink-100 p-2">C</div>
</div>
<!-- 知识点:
  - grid + grid-cols-{n} 定义 n 等分列
  - gap-{n} 行列间距;col-span-{n} 跨多列
  - 也可以 grid-cols-12 配 col-span-{n} 模拟 Bootstrap 栅格 -->

第 5 题:响应式前缀

题目:写一个卡片网格,默认 1 列,sm 2 列,lg 3 列,xl 4 列;再写一段大屏更大的标题;再做一个"小屏堆叠/大屏左右"的侧栏布局。

提示:默认断点 sm 640 / md 768 / lg 1024 / xl 1280 / 2xl 1536。前缀"向上生效",写法是移动优先——先写默认(小屏),再叠 sm:/md:/lg:/xl:。常见坑:思维反过来"先大屏后小屏"会写错。

参考答案

<!-- 默认 1 列,sm 2 列,lg 3 列,xl 4 列 -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
  <div class="bg-blue-100 p-4">卡片</div>
  <div class="bg-blue-100 p-4">卡片</div>
  <div class="bg-blue-100 p-4">卡片</div>
  <div class="bg-blue-100 p-4">卡片</div>
</div>

<!-- 文字随屏变化 -->
<h1 class="text-2xl md:text-4xl lg:text-5xl font-bold">
  响应式标题
</h1>

<!-- 侧栏布局:小屏堆叠,大屏左右 -->
<div class="flex flex-col lg:flex-row gap-4">
  <main class="lg:w-2/3 bg-gray-50 p-4">主内容</main>
  <aside class="lg:w-1/3 bg-gray-100 p-4">侧栏</aside>
</div>

<!-- 知识点:
  - Tailwind 默认断点:sm 640 / md 768 / lg 1024 / xl 1280 / 2xl 1536
  - 前缀是"向上生效":sm: 在 sm 及以上才生效
  - 不加前缀 = 移动优先(默认值),从小往大写
  - 常见坑:顺序写反,把 lg: 写在 sm: 前面其实无所谓,
    但逻辑上先想小屏再叠加 sm/md/lg -->

进阶(5 题):状态 / 颜色 / 圆角阴影 / 显隐 / 实战

第 6 题:悬停与状态

题目:写出:(a) 悬停变色、按下缩小的按钮(带过渡);(b) 悬停变深色的链接;(c) 聚焦时显示外环的输入框;(d) 父子联动(group):鼠标移到外层 div 子元素变红。

提示:`hover:/active:/focus:` 是三大状态前缀;transition 平滑过渡、duration-200 控时长;focus:ring-2 聚焦外环对无障碍友好;group 加父级,group-hover:* 加子级,实现联动。

参考答案

<button class="bg-blue-500 hover:bg-blue-700 text-white
                   font-bold py-2 px-4 rounded transition
                   hover:shadow-lg active:scale-95">
  悬停变色,按下缩小
</button>

<a href="#" class="text-blue-500 hover:text-blue-700 hover:underline
                   transition-colors duration-200">
  链接悬停变深色
</a>

<!-- 输入框聚焦样式 -->
<input type="text"
       class="border border-gray-300 rounded px-3 py-2
              focus:outline-none focus:ring-2 focus:ring-blue-500"
       placeholder="点我聚焦看效果">

<!-- group:父子联动 -->
<div class="group cursor-pointer">
  <span class="text-gray-700 group-hover:text-red-500 transition">
    鼠标移到外层 div,我变红
  </span>
</div>

<!-- 知识点:
  - hover: 悬停;active: 按下;focus: 聚焦
  - transition 平滑过渡,duration-200 控过渡时长
  - focus:ring-2 聚焦时显示外环,无障碍友好
  - group + group-hover:* 实现父子联动 -->

第 7 题:颜色与渐变

题目:写出:(a) 实色背景 + 浅底深字两种;(b) 左到右双色渐变;(c) 三色斜向渐变(含中间色);(d) 渐变文字。

提示:`from-/via-/to-` 配 bg-gradient-to-{方向} 用,方向 r/l/t/b/tr/br/tl/bl;bg-clip-text + text-transparent 让文字本身渐变;颜色用 {色名}-{深浅}。

参考答案

<div class="bg-red-500 text-white p-4 rounded">实色背景</div>
<div class="bg-blue-100 text-blue-800 p-4 rounded">浅底深字</div>

<!-- 渐变:bg-gradient-to-r + from/to -->
<div class="bg-gradient-to-r from-purple-500 to-pink-500
            text-white p-6 rounded-lg">
  左到右渐变
</div>

<div class="bg-gradient-to-tr from-green-400 via-blue-500 to-purple-600
            text-white p-6 rounded-lg">
  三色斜向渐变(via- 中间色)
</div>

<!-- 文字渐变 -->
<h2 class="text-3xl font-bold bg-gradient-to-r from-orange-400 to-red-500
           bg-clip-text text-transparent">
  渐变文字
</h2>

<!-- 知识点:
  - from-/via-/to- 配 bg-gradient-to-* 用
  - 方向:to-r/l/t/b/tr/br/tl/bl(r=右,t=上)
  - bg-clip-text + text-transparent 让文字本身渐变
  - 颜色用 {色名}-{深浅},如 blue-500 -->

第 8 题:圆角阴影边框

题目:写出:(a) 圆角阶梯(sm/lg/2xl/full);(b) 阴影阶梯(sm/md/xl);(c) 边框(1px 灰、2px 蓝、左粗红);(d) 圆角+阴影+边框组合的卡片。

提示:rounded-sm 到 rounded-full 圆角阶梯,rounded-full 是圆形;shadow-{sm|md|lg|xl|2xl} 阴影递增;border 加边框,border-{n} 调粗细,border-{l|r|t|b}-{n} 单边。

参考答案

<!-- 圆角阶梯 -->
<div class="bg-blue-200 w-24 h-24 rounded"></div>
<div class="bg-blue-200 w-24 h-24 rounded-lg"></div>
<div class="bg-blue-200 w-24 h-24 rounded-2xl"></div>
<div class="bg-blue-200 w-24 h-24 rounded-full"></div>

<!-- 阴影阶梯 -->
<div class="bg-white p-4 shadow-sm">浅阴影</div>
<div class="bg-white p-4 shadow-md">中阴影</div>
<div class="bg-white p-4 shadow-xl">大阴影</div>

<!-- 边框 -->
<div class="border border-gray-300 p-4">1px 灰边</div>
<div class="border-2 border-blue-500 p-4">2px 蓝边</div>
<div class="border-l-4 border-red-500 pl-3">左侧粗红边</div>

<!-- 组合:卡片三件套 -->
<div class="bg-white rounded-xl shadow-md border border-gray-100 p-6">
  <h3 class="font-bold text-lg">卡片标题</h3>
  <p class="text-gray-500">圆角 + 阴影 + 边框组合</p>
</div>

<!-- 知识点:
  - rounded-{none|sm|md|lg|xl|2xl|full} 圆角阶梯;rounded-full 是圆形
  - shadow-{sm|md|lg|xl|2xl|...} 阴影递增
  - border 加边框;border-{n} 调粗细;border-{l|r|t|b}-{n} 单边 -->

第 9 题:响应式隐藏

题目:写出:(a) 仅小屏可见的元素;(b) 仅大屏可见的元素;(c) 经典的汉堡/桌面菜单切换;(d) 不同屏显示不同横幅。

提示:`hidden` 等于 display:none。md:hidden + hidden md:block 是最经典的"移动端显示/桌面显示"对偶。注意 hidden 跟 flex 混用时,要用 md:flex 而不是 md:block。

参考答案

<!-- 仅在移动端显示 -->
<div class="md:hidden bg-yellow-100 p-4">
  小屏可见,≥768px 隐藏
</div>

<!-- 仅在大屏显示 -->
<div class="hidden md:block bg-green-100 p-4">
  小屏隐藏,≥768px 显示
</div>

<!-- 经典:移动端汉堡菜单 / 桌面横向菜单 -->
<nav>
  <!-- 汉堡图标:仅小屏 -->
  <button class="md:hidden">☰</button>

  <!-- 横向菜单:仅桌面 -->
  <ul class="hidden md:flex gap-6">
    <li><a href="#">首页</a></li>
    <li><a href="#">关于</a></li>
  </ul>
</nav>

<!-- 不同屏显示不同内容 -->
<div class="block lg:hidden">手机版横幅</div>
<div class="hidden lg:block">桌面版横幅</div>

<!-- 知识点:
  - hidden 等于 display:none
  - md:hidden + hidden md:block 是最经典的"移动端显示/桌面显示"对偶
  - flex/grid 也能配合:hidden md:flex、hidden md:grid
  - 常见坑:hidden 跟 flex 混用时,要用 md:flex 而不是 md:block -->

第 10 题:实战——个人卡片

题目:用纯 Tailwind 实用类做一个个人名片:顶部渐变条 + 圆头像(贴渐变区) + 居中姓名/职位 + 三个技能标签 + 简介 + 两个等宽按钮(主/次)+ 底部三个社交链接。整张卡片有悬停阴影。

提示:这是综合练习。`-mt-12` 负外边距让头像上移贴渐变区;border-4 border-white 头像白边;flex-1 让两按钮等宽;flex-wrap 让标签换行;hover:shadow-2xl + transition 卡片悬停;`active:scale-95` 按压缩小。

参考答案

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>个人卡片</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 min-h-screen flex items-center justify-center p-4">

  <div class="bg-white max-w-sm w-full rounded-2xl shadow-lg
              overflow-hidden hover:shadow-2xl transition">

    <!-- 头部渐变 + 头像 -->
    <div class="bg-gradient-to-r from-indigo-500 to-purple-500 h-24"></div>

    <div class="px-6 pb-6">
      <!-- 头像:负 margin 贴到渐变区 -->
      <img src="avatar.jpg" alt="头像"
           class="w-24 h-24 rounded-full border-4 border-white -mt-12 mx-auto
                  shadow-md bg-gray-200">

      <div class="text-center mt-4">
        <h2 class="text-2xl font-bold text-gray-900">张三</h2>
        <p class="text-gray-500">前端工程师 · 北京</p>
      </div>

      <!-- 标签 -->
      <div class="flex flex-wrap justify-center gap-2 mt-4">
        <span class="bg-indigo-100 text-indigo-700 text-xs px-3 py-1 rounded-full">
          React
        </span>
        <span class="bg-purple-100 text-purple-700 text-xs px-3 py-1 rounded-full">
          TypeScript
        </span>
        <span class="bg-pink-100 text-pink-700 text-xs px-3 py-1 rounded-full">
          Node.js
        </span>
      </div>

      <!-- 简介 -->
      <p class="text-gray-600 text-sm text-center mt-4 leading-relaxed">
        专注 Web 前端 8 年,热爱开源与技术写作。
      </p>

      <!-- 按钮 -->
      <div class="flex gap-3 mt-6">
        <button class="flex-1 bg-indigo-500 hover:bg-indigo-700 text-white
                       font-semibold py-2 px-4 rounded-lg transition
                       hover:shadow-lg active:scale-95">
          关注
        </button>
        <button class="flex-1 bg-gray-100 hover:bg-gray-200 text-gray-800
                       font-semibold py-2 px-4 rounded-lg transition">
          私信
        </button>
      </div>

      <!-- 社交链接 -->
      <div class="flex justify-center gap-4 mt-6 text-gray-400">
        <a href="#" class="hover:text-indigo-500 transition">GitHub</a>
        <a href="#" class="hover:text-indigo-500 transition">掘金</a>
        <a href="#" class="hover:text-indigo-500 transition">知乎</a>
      </div>
    </div>
  </div>

</body>
</html>
<!-- 知识点:
  - 整张卡片纯实用类,零自定义 CSS
  - -mt-12 负外边距让头像上移贴渐变区
  - hover: + transition 做微交互;active:scale-95 按压缩小
  - flex-1 让两个按钮等宽;flex-wrap 让标签自动换行 -->

练习建议

Tailwind 的核心是实用类思维:不要先写 HTML 再补 CSS,而是在 HTML 上直接堆类。前期会觉得"类名好长",熟练后写页面比传统方式快 3-5 倍。重点掌握间距(p/m + 方向)、布局(flex/grid + 响应式前缀)、状态(hover/focus/group)、视觉(颜色/圆角/阴影)四大块。

做完这 10 题,建议去 Tailwind Play(play.tailwindcss.com)打开官方工作台,把每题改一改参数(比如换颜色、改间距数值)直观感受变化。也可以挑一个你喜欢的网站,试着用 Tailwind 复刻一个组件。

← 上一篇 Tailwind 自定义配置

返回 Tailwind 教程目录

✈️💬