Tailwind CSS 核心知识点 + 实战 DemoTailwind CSS 核心知识点 + 实战 Demo（覆盖

Tailwind CSS 核心知识点 + 实战 Demo（覆盖 90% 场景）

基础准备（必看）

知识点 0：快速引入（CDN / 项目集成）

用途：快速上手 Tailwind，无需本地配置
核心：CDN 适合练手，npm 适合生产项目

Demo（CDN 最简示例）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Tailwind 基础 Demo</title>
  <!-- 引入 Tailwind CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 可选：引入图标库（常用） -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 p-6">
  <div class="w-64 h-32 bg-blue-500 text-white p-4 rounded-lg flex items-center justify-center">
    Hello Tailwind
  </div>
</body>
</html>

一、布局类（30% 高频场景）

知识点 1：宽高（Width/Height）

核心类：w-*/h-*（固定值）、w-full/w-screen（自适应）、w-auto/h-auto（自动）
取值：w-4=1rem，w-8=2rem，w-64=16rem；w-full=100%，w-screen=100vw

Demo

<div class="space-y-4">
  <!-- 固定宽高 -->
  <div class="w-32 h-16 bg-red-400 text-white flex items-center justify-center">w-32 h-16</div>
  <!-- 自适应宽度 + 固定高度 -->
  <div class="w-full h-16 bg-green-400 text-white flex items-center justify-center">w-full h-16</div>
  <!-- 视口高度 -->
  <div class="w-full h-24 bg-blue-400 text-white flex items-center justify-center">h-24（占视口高度1/4）</div>
</div>

知识点 2：间距（Margin/Padding）

核心类：
- 外边距：m-*（全方向）、mx-*（水平）、my-*（垂直）、mt-*（上）、mb-*（下）、ml-*（左）、mr-*（右）
- 内边距：p-*（全方向）、px-*（水平）、py-*（垂直）、pt-*/pb-*/pl-*/pr-*
关键：mx-auto 实现块级元素水平居中

Demo

<!-- 水平居中 + 内边距 + 外边距 -->
<div class="w-64 h-32 bg-gray-200 mx-auto my-6 p-4">
  <div class="mt-2 ml-4 bg-white p-2">mx-auto（水平居中）+ my-6（上下外边距）+ p-4（内边距）</div>
</div>

知识点 3：弹性布局（Flex）

核心类：
- 启用 Flex：flex
- 主轴对齐：justify-start/justify-center/justify-between/justify-around
- 交叉轴对齐：items-start/items-center/items-end/items-stretch
- 方向：flex-row（默认）/flex-col（垂直）
- 换行：flex-wrap/flex-nowrap
- 占比：flex-1（等分剩余空间）

Demo

<!-- 水平两端对齐 + 垂直居中 -->
<div class="w-full max-w-4xl mx-auto bg-gray-100 p-4 rounded-lg flex justify-between items-center">
  <div class="w-16 h-16 bg-red-500 rounded-full"></div>
  <div class="flex-1 ml-4">
    <h3 class="font-bold">Flex 布局标题</h3>
    <p class="text-gray-600">Flex 是最常用的布局方式</p>
  </div>
  <button class="px-4 py-2 bg-blue-500 text-white rounded">操作按钮</button>
</div>

<!-- 垂直方向 Flex -->
<div class="w-64 h-48 bg-gray-100 flex flex-col justify-center items-center">
  <div class="w-12 h-12 bg-green-500 rounded-full mb-2"></div>
  <p>垂直 Flex 布局</p>
</div>

知识点 4：网格布局（Grid）

核心类：
- 启用 Grid：grid
- 列数：grid-cols-2/grid-cols-3/grid-cols-4（固定列数）
- 行数：grid-rows-2（固定行数）
- 间距：gap-*（行列间距）、gap-x-*（列间距）、gap-y-*（行间距）
- 自适应列：grid-cols-auto（根据内容自适应）

Demo

<!-- 3列网格 + 间距 -->
<div class="w-full max-w-4xl mx-auto grid grid-cols-3 gap-4 mt-6">
  <div class="p-4 bg-gray-200 rounded">网格项1</div>
  <div class="p-4 bg-gray-200 rounded">网格项2</div>
  <div class="p-4 bg-gray-200 rounded">网格项3</div>
  <div class="p-4 bg-gray-200 rounded">网格项4</div>
  <div class="p-4 bg-gray-200 rounded">网格项5</div>
  <div class="p-4 bg-gray-200 rounded">网格项6</div>
</div>

<!-- 自适应列（根据内容换行） -->
<div class="w-full max-w-4xl mx-auto grid grid-cols-auto gap-2 mt-6">
  <div class="px-4 py-2 bg-blue-100 rounded">标签1</div>
  <div class="px-4 py-2 bg-blue-100 rounded">标签2</div>
  <div class="px-4 py-2 bg-blue-100 rounded">标签3</div>
  <div class="px-4 py-2 bg-blue-100 rounded">标签4</div>
</div>

知识点 5：定位（Position）

核心类：
- 定位模式：static（默认）/relative/absolute/fixed/sticky
- 偏移：top-*/right-*/bottom-*/left-*
- 层级：z-10/z-20/z-50（数值越大层级越高）

Demo

<!-- 相对定位 + 绝对定位 -->
<div class="w-64 h-48 bg-gray-200 relative mx-auto mt-6">
  <div class="w-16 h-16 bg-red-500 absolute top-2 right-2 rounded-full z-10">置顶角标</div>
  <div class="absolute bottom-2 left-2 text-sm">绝对定位文本</div>
</div>

<!-- 固定定位（页面底部） -->
<div class="fixed bottom-4 right-4 w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center text-white cursor-pointer">
  <i class="fa fa-arrow-up"></i>
</div>

知识点 6：显示与溢出（Display/Overflow）

核心类：
- 显示模式：block/inline/inline-block/flex/grid/hidden
- 溢出：overflow-hidden/overflow-scroll/overflow-auto/text-overflow-ellipsis（文字省略）
关键：text-ellipsis 需要配合 overflow-hidden + white-space: nowrap 使用

Demo

<!-- 隐藏元素 -->
<div class="hidden">这个元素被隐藏了</div>

<!-- 文字省略（单行） -->
<div class="w-64 bg-gray-100 p-2 truncate">
  这是一段很长的文字，超出容器宽度后会自动省略显示这是一段很长的文字
</div>

<!-- 溢出滚动 -->
<div class="w-64 h-24 bg-gray-100 overflow-auto mt-2">
  <p>第一行文字</p>
  <p>第二行文字</p>
  <p>第三行文字</p>
  <p>第四行文字</p>
  <p>第五行文字</p>
  <p>第六行文字</p>
</div>

二、样式类（25% 高频场景）

知识点 7：颜色（Color）

核心类：
- 背景色：bg-*（bg-red-500/bg-gray-100/bg-blue-600）
- 文字色：text-*（text-white/text-gray-800/text-green-500）
- 边框色：border-*（border-gray-200/border-red-400）
色系规则：-50（浅）→ -900（深），-500 是主色

Demo

<div class="space-y-2">
  <div class="p-2 bg-red-500 text-white">bg-red-500 + text-white</div>
  <div class="p-2 bg-gray-100 text-gray-800">bg-gray-100 + text-gray-800</div>
  <div class="p-2 border border-blue-400 text-blue-600">border-blue-400 + text-blue-600</div>
</div>

知识点 8：圆角（Border Radius）

核心类：
- 全圆角：rounded（默认）/rounded-sm/rounded-lg/rounded-xl/rounded-2xl
- 圆形：rounded-full
- 单方向圆角：rounded-t-lg（上）/rounded-b-md（下）/rounded-l-xl（左）/rounded-r-full（右）

Demo

<div class="flex gap-4 mt-4">
  <div class="w-24 h-24 bg-gray-200 rounded">默认圆角</div>
  <div class="w-24 h-24 bg-gray-200 rounded-lg">大圆角</div>
  <div class="w-24 h-24 bg-gray-200 rounded-full">圆形</div>
  <div class="w-24 h-24 bg-gray-200 rounded-t-lg">仅顶部圆角</div>
</div>

知识点 9：阴影（Shadow）

核心类：shadow-sm（小）/shadow（默认）/shadow-md（中）/shadow-lg（大）/shadow-xl（超大）/shadow-none（无）

Demo

<div class="flex gap-4 mt-4">
  <div class="w-24 h-24 bg-white rounded shadow-sm">小阴影</div>
  <div class="w-24 h-24 bg-white rounded shadow-md">中阴影</div>
  <div class="w-24 h-24 bg-white rounded shadow-lg">大阴影</div>
</div>

知识点 10：字体样式（Typography）

核心类：
- 字体粗细：font-thin/font-normal/font-medium/font-bold/font-black
- 字体大小：text-xs/text-sm/text-base/text-lg/text-xl/text-2xl/text-3xl
- 文字对齐：text-left/text-center/text-right/text-justify
- 行高：leading-tight/leading-normal/leading-loose

Demo

<div class="space-y-2 mt-4">
  <p class="font-bold text-xl">font-bold + text-xl（粗体大号文字）</p>
  <p class="font-medium text-base text-center">font-medium + text-center（中等粗细居中）</p>
  <p class="text-sm text-gray-600 leading-loose">text-sm + leading-loose（小号松散行高）</p>
</div>

知识点 11：边框（Border）

核心类：
- 边框开关：border（全边框）/border-t（上）/border-b（下）/border-l（左）/border-r（右）
- 边框宽度：border-0/border-2/border-4
- 边框样式：border-dashed（虚线）/border-dotted（点线）/border-solid（实线）

Demo

<div class="space-y-2 mt-4">
  <div class="p-2 border border-2 border-gray-300">border-2（2px 边框）</div>
  <div class="p-2 border-b border-dashed border-red-400">border-b + border-dashed（底部虚线）</div>
  <div class="p-2 border-l-4 border-green-500">border-l-4（左侧4px边框）</div>
</div>

三、响应式设计（20% 高频场景）

知识点 12：响应式断点

核心断点前缀（移动优先）：
- sm: → 640px（小屏幕，平板竖屏）
- md: → 768px（中屏幕，平板横屏）
- lg: → 1024px（大屏幕，桌面）
- xl: → 1280px（超大屏）
- 2xl: → 1536px（极大屏）
逻辑：不加前缀 = 所有屏幕生效；加前缀 = 对应屏幕及以上生效

Demo

<!-- 响应式网格：移动端1列，平板2列，桌面3列 -->
<div class="w-full max-w-5xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-4">
  <div class="p-4 bg-gray-100 rounded">网格项1</div>
  <div class="p-4 bg-gray-100 rounded">网格项2</div>
  <div class="p-4 bg-gray-100 rounded">网格项3</div>
</div>

<!-- 响应式显示：移动端隐藏，桌面显示 -->
<div class="mt-4">
  <div class="block md:hidden">仅移动端显示</div>
  <div class="hidden md:block">仅平板及以上显示</div>
  <div class="hidden lg:block">仅桌面及以上显示</div>
</div>

四、状态类（10% 高频场景）

知识点 13：悬停状态（Hover）

核心类：hover:bg-*/hover:text-*/hover:shadow-*/hover:border-*
关键：仅对可交互元素（按钮、链接、卡片）生效，需配合 cursor-pointer

Demo

<div class="flex gap-4 mt-4">
  <!-- 悬停变色按钮 -->
  <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition">
    悬停变深的按钮
  </button>
  
  <!-- 悬停加阴影卡片 -->
  <div class="w-32 h-32 bg-white border rounded hover:shadow-lg hover:bg-gray-50 cursor-pointer transition">
    悬停有阴影的卡片
  </div>
</div>

知识点 14：焦点状态（Focus）

核心类：focus:outline-none/focus:ring-2/focus:ring-blue-500/focus:border-red-400
用途：输入框、按钮等可聚焦元素的焦点样式

Demo

<!-- 焦点样式优化的输入框 -->
<input 
  type="text" 
  class="w-64 px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
  placeholder="点击输入框看焦点样式"
>

知识点 15：激活 / 禁用状态（Active/Disabled）

核心类：
- 激活：active:bg-*/active:scale-95（点击时缩放）
- 禁用：disabled:opacity-50/disabled:cursor-not-allowed

Demo

<div class="flex gap-4 mt-4">
  <button class="px-4 py-2 bg-green-500 text-white rounded active:bg-green-600 active:scale-95 transition">
    点击时缩放的按钮
  </button>
  
  <button disabled class="px-4 py-2 bg-gray-400 text-white rounded disabled:opacity-50 disabled:cursor-not-allowed">
    禁用状态的按钮
  </button>
</div>

五、自定义配置（5% 高频场景）

知识点 16：自定义主题（tailwind.config.js）

核心：修改 tailwind.config.js 扩展颜色、字体、间距等
用途：适配项目专属样式，避免重复写自定义 CSS

Demo（配置文件 + 使用）

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"], // 扫描项目文件
  theme: {
    extend: {
      // 自定义颜色
      colors: {
        primary: "#165DFF", // 项目主色
        secondary: "#FF7D00", // 项目次色
      },
      // 自定义字体大小
      fontSize: {
        "title": "1.875rem", // 30px
      },
      // 自定义间距
      spacing: {
        "128": "32rem", // 512px
      },
    },
  },
  plugins: [],
}

<!-- 使用自定义样式 -->
<div class="bg-primary text-white text-title p-4 w-128">
  自定义主色 + 自定义字体大小 + 自定义间距
</div>
<div class="bg-secondary text-white p-2 mt-2">自定义次色</div>

六、实用工具类（5% 补充）

知识点 17：过渡 / 动画（Transition/Animation）

核心类：transition（启用过渡）/transition-all/duration-300/ease-in-out
常用：scale-*（缩放）/rotate-*（旋转）

Demo

<div class="w-24 h-24 bg-purple-500 rounded-full flex items-center justify-center text-white cursor-pointer transition-all duration-300 hover:scale-110 hover:rotate-12">
  悬停旋转缩放
</div>

知识点 18：透明度（Opacity）

核心类：opacity-0/opacity-25/opacity-50/opacity-75/opacity-100

Demo

<div class="flex gap-4 mt-4">
  <div class="w-24 h-24 bg-red-500 opacity-100"></div>
  <div class="w-24 h-24 bg-red-500 opacity-50"></div>
  <div class="w-24 h-24 bg-red-500 opacity-25"></div>
</div>

总结

核心优先级：布局类（Flex/Grid/ 定位 / 间距）> 样式类（颜色 / 圆角 / 阴影）> 响应式 > 状态类 > 自定义配置，掌握前 4 类即可覆盖 90% 场景；
学习技巧：每个知识点先看 Demo 效果，再修改类名（比如把 bg-red-500 改成 bg-blue-600），观察变化；
速查技巧：记不住类名时，直接访问 Tailwind 官方文档，搜索关键词（比如 “border”“flex”）即可快速找到对应类名。

所有 Demo 都可直接复制到 HTML 文件中运行（引入 CDN 后），建议你逐个运行、修改，快速熟悉类名的用法～