1. Tailwind CSS 是什么

1.1 从写 CSS 到写类名

传统 CSS 开发中，你需要：

  1. 想一个类名（如 .card、.btn-primary）

  2. 在 CSS 文件里写样式

  3. 在 HTML 里引用这个类名

Tailwind 换了一种思路：不写 CSS，直接在 HTML 里用现成的工具类名。

<!-- 传统 CSS -->
<div class="card">...</div>
<style>.card { background: white; padding: 1rem; border-radius: 0.5rem; }</style>

<!-- Tailwind 方式 -->
<div class="bg-white p-4 rounded-lg">...</div>

你不再需要给每个组件起名字，也不需要离开 HTML 去写样式。所有样式都是通过组合预定义的类名完成的。

1.2 传统 CSS 的痛点

痛点 说明
命名困难 给一个普通盒子起名 .wrapper、.container、.box-inner……
样式冲突 不同组件用了相同类名，相互覆盖
文件膨胀 项目一大，CSS 文件几千行，不敢删（怕删错）
上下文切换 写 HTML 和 CSS 之间来回切，打断思路
复用困难 复制粘贴样式，或者用 @extend，都容易出问题

Tailwind 的方案：用原子类直接写在 HTML 上，无需命名，作用域天然隔离。

1.3 什么是原子类 CSS 

原子类 CSS（Atomic CSS）是一种只做一件事的、单一职责的类。

/* 传统 CSS 的一个类做了很多事 */
.card {
  background: white;
  padding: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* 原子类：每个类只做一件事 */
.bg-white { background: white; }
.p-4 { padding: 1rem; }
.rounded-lg { border-radius: 0.5rem; }
.shadow { box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

组合原子类得到你需要的样式：

<div class="bg-white p-4 rounded-lg shadow">...</div>

Tailwind 提供了数千个这样的原子类，覆盖了几乎所有的 CSS 属性。

1.4 Tailwind vs Bootstrap vs 传统 CSS

对比 传统 CSS Bootstrap Tailwind CSS
设计理念 手写样式 预制组件 原子类
HTML 代码量 少 少（直接用组件） 多（类名较长）
CSS 文件大小 可能很大 固定大小 按需生成（很小）
定制难度 容易 难（需要覆盖） 容易（配置主题）
学习曲线 已会 CSS 需学组件名 需学类名规则
适用场景 对样式有绝对掌控 快速原型 高度定制化设计

Bootstrap：给你预制好的组件（按钮、卡片、导航栏），套用后像换皮肤。
Tailwind：给你乐高积木（原子类），自己拼装成组件。

什么时候用 Tailwind？

  1. 需要独特的设计系统（不是 Bootstrap 默认样式）
  2. 想提升 CSS 开发效率
  3. 希望最终 CSS 体积最小

2. 快速上手

2.1 通过 CDN 尝鲜（不推荐生产）

最快体验 Tailwind 的方式是用 CDN，但仅用于学习/原型。

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <h1 class="text-3xl font-bold underline text-center mt-10">
    Hello Tailwind!
  </h1>
</body>
</html>

保存为 .html 文件，用浏览器打开即可看到效果。

注意：CDN 版本包含所有类，体积很大，且无法自定义主题，不适用于生产。

2.2 Vite 项目中安装

创建 Vite 项目（以 vanilla 为例）：

npm create vite@latest my-tailwind-app -- --template vanilla
cd my-tailwind-app

安装 Tailwind 及相关依赖：

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

这条命令会生成两个文件：

  1. tailwind.config.js —— Tailwind 配置文件
  2. postcss.config.js —— PostCSS 配置（Tailwind 通过它工作）

2.3 配置文件初识

tailwind.config.js

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  // 告诉 Tailwind 扫描哪些文件中的类名
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
  • content：告诉 Tailwind 哪些文件包含类名，构建时会扫描这些文件，只生成用到的类。
  • theme：主题配置，可以扩展或覆盖默认的颜色、字体、断点等。
  • plugins：插件（如 @tailwindcss/forms）。

接下来，在 src/style.css 中添加 Tailwind 指令：

@tailwind base;
@tailwind components;
@tailwind utilities;

2.4 第一个 Tailwind 页面

修改 index.html：

<!doctype html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Tailwind 示例</title>
  <link rel="stylesheet" href="/src/style.css" />
</head>
<body>
  <div class="min-h-screen bg-gray-100 flex items-center justify-center">
    <div class="bg-white p-8 rounded-lg shadow-md text-center">
      <h1 class="text-2xl font-bold text-blue-600 mb-4">
        欢迎使用 Tailwind CSS
      </h1>
      <p class="text-gray-600 mb-4">
        这是一个用原子类拼出来的卡片
      </p>
      <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
        按钮
      </button>
    </div>
  </div>
</body>
</html>

启动开发服务器：

npm run dev

打开浏览器，你应该能看到一个居中显示的卡片，包含标题、文字和按钮。

每个类的作用：

类名 作用
min-h-screen 最小高度占满整个视口
bg-gray-100 背景色浅灰
flex items-center justify-center 弹性布局，水平垂直居中
bg-white p-8 rounded-lg shadow-md 白背景、内边距、圆角、阴影
text-2xl font-bold text-blue-600 大号字、加粗、蓝色
hover:bg-blue-700 鼠标悬停时背景变深

3. 实用类（核心）

3.1 布局

flex、grid、容器尺寸

1. Flex 布局

类名 作用
flex 开启 Flex 布局
inline-flex 行内 Flex
flex-row 水平方向（默认）
flex-col 垂直方向
justify-start/center/end/between/around/evenly 主轴对齐
items-start/center/end/stretch 交叉轴对齐
flex-wrap 允许换行
gap-4 子元素间距 
<div class="flex justify-between items-center gap-4">
  <div>左</div>
  <div>右</div>
</div>

2. Grid 布局

类名 作用
grid 开启 Grid
grid-cols-2 2 列
grid-cols-3 3 列
grid-cols-4 4 列
gap-4 行列间距 
<div class="grid grid-cols-3 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

3. 容器尺寸

类名 作用
container 响应式容器，居中且最大宽度随断点变化
max-w-screen-xl 限制最大宽度
w-full 宽度 100%
h-32 固定高度

3.2 间距

padding、margin（p-4、m-2）

Tailwind 使用 {property}-{size} 格式，尺寸按 0.25rem 递增。

<!-- padding -->
<div class="p-4">  四周内边距 1rem</div>
<div class="px-4"> 左右内边距</div>
<div class="py-2"> 上下内边距</div>
<div class="pt-4"> 上内边距</div>

<!-- margin -->
<div class="m-4">  四周外边距</div>
<div class="mx-auto"> 水平居中</div>
<div class="mt-2">  上外边距</div>

常用尺寸：0、1(0.25rem)、2(0.5rem)、4(1rem)、8(2rem)……

3.3 文字

类名 作用 示例值
text-xs/sm/base/lg/xl/2xl/... 字体大小 text-lg
font-light/normal/medium/semibold/bold 字体粗细 font-bold
text-gray-500/red-600/... 文字颜色 text-blue-600
text-left/center/right/justify 文字对齐 text-center
uppercase/lowercase/capitalize 大小写转换 uppercase
leading-5/6/7/8/9 行高 leading-relaxed 
<h1 class="text-3xl font-bold text-center text-blue-600">标题</h1>
<p class="text-base text-gray-600 leading-relaxed">一段描述文字</p>

3.4 背景与边框

背景

类名 作用
bg-gray-100/200/... 背景色
bg-white 白色背景
bg-gradient-to-r from-blue-500 to-purple-500 渐变
bg-cover 背景覆盖

边框

类名 作用
border 添加边框（默认灰色）
border-gray-200 边框颜色
border-t/b/l/r 单边边框
rounded-sm/md/lg/xl/full 圆角
border-2 边框粗细 
<div class="bg-white border border-gray-200 rounded-lg shadow-md">
  卡片内容
</div>

3.5 宽高与尺寸

类名 作用
w-1/2, w-1/3, w-2/3, w-1/4, w-3/4 百分比宽度
w-full 100% 宽度
w-screen 视口宽度
w-32 固定宽度（8rem）
h-32 固定高度
min-h-screen 最小高度占满视口 
<div class="w-1/2 lg:w-1/3">响应式宽度</div>

3.6 组合示例——按钮

<button class="
  bg-blue-600 
  hover:bg-blue-700 
  text-white 
  font-medium 
  py-2 px-4 
  rounded-lg 
  shadow 
  transition 
  duration-200
">
  点击按钮
</button>
类 作用
bg-blue-600 蓝色背景
hover:bg-blue-700 鼠标悬停变深
text-white 白色文字
font-medium 中等粗细
py-2 px-4 垂直 0.5rem，水平 1rem 内边距
rounded-lg 大圆角
shadow 轻微阴影
transition duration-200 200ms 过渡动画

4. 响应式设计

4.1 断点前缀

（sm、md、lg、xl、2xl）

Tailwind 使用移动优先的断点系统。

前缀 最小宽度 适用设备
无前缀 0 手机（默认）
sm: 640px 大手机
md: 768px 平板
lg: 1024px 小笔记本
xl: 1280px 桌面
2xl: 1536px 大桌面 
<!-- 手机：文字小；平板以上：文字大 -->
<p class="text-sm md:text-lg">响应式文字</p>

4.2 移动优先设计原则

先写手机版样式，再用断点前缀覆盖大屏幕。

<div class="
  grid grid-cols-1 gap-4
  sm:grid-cols-2
  lg:grid-cols-3
  xl:grid-cols-4
">
  <div>卡片1</div>
  <div>卡片2</div>
  <div>卡片3</div>
  <div>卡片4</div>
</div>

手机：1 列；平板：2 列；笔记本：3 列；桌面：4 列

4.3 常见响应式模式

1. 响应式导航栏

<nav class="flex flex-col md:flex-row justify-between items-center p-4 bg-white shadow">
  <div class="text-xl font-bold">Logo</div>
  <ul class="flex flex-col md:flex-row gap-2 md:gap-6 mt-2 md:mt-0">
    <li><a href="#" class="hover:text-blue-600">首页</a></li>
    <li><a href="#" class="hover:text-blue-600">产品</a></li>
    <li><a href="#" class="hover:text-blue-600">关于</a></li>
  </ul>
</nav>
  • 手机：垂直布局，Logo 在上，菜单在下
  • 平板以上：水平布局，Logo 左，菜单右

2. 响应式网格

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
  <div class="border rounded-lg p-4">商品卡片</div>
  <div class="border rounded-lg p-4">商品卡片</div>
  <div class="border rounded-lg p-4">商品卡片</div>
  <!-- 更多卡片 -->
</div>

4.4 实战：一个响应式卡片组件

<div class="max-w-sm md:max-w-md lg:max-w-lg mx-auto bg-white rounded-xl shadow-md overflow-hidden">
  <div class="md:flex">
    <div class="md:flex-shrink-0">
      <img class="h-48 w-full object-cover md:w-48" src="/placeholder.jpg" alt="图片">
    </div>
    <div class="p-6">
      <div class="uppercase tracking-wide text-sm text-blue-600 font-semibold">精选文章</div>
      <h2 class="text-xl font-bold mt-2">响应式卡片标题</h2>
      <p class="text-gray-500 mt-2">
        这是一段描述文字。在手机上图片在上方，在平板上图片在左侧。
      </p>
      <button class="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
        阅读更多
      </button>
    </div>
  </div>
</div>

5. 暗色模式

5.1 配置暗色模式策略

Tailwind 支持两种暗色模式策略：

策略 说明 适用场景
media 跟随系统主题（prefers-color-scheme） 自动适配，用户无法手动切换
class 通过父元素的 .dark 类手动控制 需要用户手动切换主题

在 tailwind.config.js 中配置：

// tailwind.config.js
export default {
  darkMode: 'class', // 或 'media'
  // ...
}

5.2 使用 dark: 前缀

配置好后，用 dark: 前缀写暗色模式下的样式。

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
  <h1 class="text-2xl">自动适配暗色模式</h1>
</div>
类 亮色模式 暗色模式
bg-white dark:bg-gray-900 白色背景 深灰背景
text-gray-900 dark:text-gray-100 深色文字 浅色文字

5.3 手动切换暗色模式

当 darkMode: 'class' 时，在根元素（通常是 <html>）上添加 .dark 类。

<!-- 亮色模式 -->
<html>...</html>

<!-- 暗色模式 -->
<html class="dark">...</html>

手动切换示例：

// 切换暗色模式
function toggleDarkMode() {
  const html = document.documentElement
  if (html.classList.contains('dark')) {
    html.classList.remove('dark')
    localStorage.setItem('theme', 'light')
  } else {
    html.classList.add('dark')
    localStorage.setItem('theme', 'dark')
  }
}

// 初始化时读取用户偏好
const savedTheme = localStorage.getItem('theme')
if (savedTheme === 'dark' || (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
  document.documentElement.classList.add('dark')
}

5.4 示例：暗色导航栏

<nav class="bg-white dark:bg-gray-800 shadow-md px-6 py-3">
  <div class="flex justify-between items-center">
    <div class="text-xl font-bold text-gray-800 dark:text-white">Logo</div>
    
    <ul class="flex gap-6">
      <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">首页</a></li>
      <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">产品</a></li>
      <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">关于</a></li>
    </ul>
    
    <button id="themeToggle" class="p-2 rounded-lg bg-gray-100 dark:bg-gray-700">
      🌙
    </button>
  </div>
</nav>

<script>
  document.getElementById('themeToggle').addEventListener('click', toggleDarkMode)
</script>

6. 交互与状态

6.1 悬停（hover:）

鼠标悬停时应用样式。

<button class="bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded">
  悬停变深
</button>

6.2 焦点（focus:）

元素获得焦点时（如 input 被点击、Tab 键选中）。

<input class="border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" />

6.3 活动（active:）

元素被激活时（如按钮按下瞬间）。

<button class="bg-blue-500 active:bg-blue-800 transition">
  点击瞬间变深
</button>

6.4 禁用（disabled:）

表单元素被禁用时的样式。

<button disabled class="bg-gray-300 disabled:opacity-50 disabled:cursor-not-allowed">
  禁用按钮
</button>

6.5 组合状态

可以组合多个状态前缀。

<button class="bg-blue-500 hover:bg-blue-700 focus:ring-2 focus:ring-blue-300 active:bg-blue-800 disabled:opacity-50">
  多种状态
</button>

6.6 示例：悬停按钮组

<div class="flex gap-3 p-4">
  <button class="px-4 py-2 bg-green-500 hover:bg-green-600 text-white rounded-lg shadow transition">
    保存
  </button>
  <button class="px-4 py-2 bg-red-500 hover:bg-red-600 text-white rounded-lg shadow transition">
    删除
  </button>
  <button class="px-4 py-2 bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-200 rounded-lg transition">
    取消
  </button>
</div>

7. 自定义配置

7.1 主题定制

颜色、字体、间距

在 tailwind.config.js 中自定义主题。

// tailwind.config.js
export default {
  theme: {
    colors: {
      primary: '#1d4ed8',
      secondary: '#6b7280',
    },
    fontFamily: {
      sans: ['Inter', 'system-ui', 'sans-serif'],
    },
    spacing: {
      '72': '18rem',
      '84': '21rem',
    },
  },
}

使用自定义的值：

<div class="bg-primary text-white p-4">自定义主题色</div>

7.2 扩展 vs 覆盖

方式 说明 写法
覆盖 完全替换默认值 colors: { ... }
扩展 保留默认值，增加新值 extend: { colors: { ... } }

推荐使用扩展：

export default {
  theme: {
    extend: {
      colors: {
        primary: '#1d4ed8',
      },
      fontSize: {
        'xxs': '0.625rem',
      },
    },
  },
}

7.3 添加自定义工具类

@layer utilities

/* 在 CSS 文件中 */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .text-shadow {
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  .rotate-y-180 {
    transform: rotateY(180deg);
  }
}

使用：

<div class="text-shadow">带阴影的文字</div>

7.4 添加自定义组件

@layer components

@layer components {
  .btn-primary {
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
  }
  .card {
    @apply bg-white rounded-lg shadow-md p-6;
  }
}

使用：

<button class="btn-primary">按钮</button>
<div class="card">卡片内容</div>

注意：官方建议尽量用原子类，@apply 仅在抽取重复组合时使用。

7.5 插件入门

// tailwind.config.js
import plugin from 'tailwindcss/plugin'

export default {
  plugins: [
    plugin(function({ addUtilities, addComponents, theme }) {
      addUtilities({
        '.skew-10deg': {
          transform: 'skewY(-10deg)',
        },
      })
      addComponents({
        '.btn': {
          padding: '.5rem 1rem',
          borderRadius: '.25rem',
          fontWeight: '600',
        },
      })
    }),
  ],
}

第8章：优化与集成

8.1 生产优化（自动删除未使用的 CSS）

Tailwind 通过扫描 content 中指定的文件，自动删除未使用的类。

// tailwind.config.js
export default {
  content: [
    './index.html',
    './src/**/*.{js,ts,jsx,tsx,vue}',
  ],
}

构建时：

npm run build

最终 CSS 体积通常只有几 KB。

8.2 集成 React

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

配置 tailwind.config.js 的 content：

content: [
  "./index.html",
  "./src/**/*.{js,ts,jsx,tsx}",
],

在 src/index.css 中引入：

@tailwind base;
@tailwind components;
@tailwind utilities;

8.3 集成 Vue

npm create vite@latest my-vue-app -- --template vue
cd my-vue-app
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

配置 tailwind.config.js：

content: [
  "./index.html",
  "./src/**/*.{vue,js,ts}",
],

在 src/style.css 中引入：

@tailwind base;
@tailwind components;
@tailwind utilities;

8.4 @apply 的用法与时机

@layer components {
  .card {
    @apply bg-white rounded-lg shadow-md p-6;
  }
}

不建议：把整个页面都用 @apply 写成传统 CSS。
建议：仅在频繁复用的组件（如按钮、卡片）上使用。

8.5 VS Code 插件推荐

插件 作用
Tailwind CSS IntelliSense 智能提示、自动补全、悬停预览
Headwind 自动排序类名（按推荐顺序）

安装后，在 HTML 或 JSX 中输入 bg- 即可看到所有背景色选项。

9. 附录

9.1 常用类名速查表

分类 类名示例 作用
布局 flex, grid, grid-cols-3, gap-4 弹性/网格布局
间距 p-4, m-2, px-6, mt-4 内外边距
尺寸 w-full, h-32, min-h-screen 宽高
文字 text-lg, font-bold, text-center, text-gray-600 文字样式
背景 bg-white, bg-gray-100, bg-blue-500 背景色
边框 border, border-gray-200, rounded-lg 边框与圆角
效果 shadow, opacity-50 阴影、透明度
响应式 sm:text-center, md:flex, lg:w-1/2 断点前缀
状态 hover:bg-blue-700, focus:ring, active:scale-95 交互状态
暗色 dark:bg-gray-800, dark:text-white 暗色模式

9.2 断点速查

断点 最小宽度 常用设备
sm 640px 大手机
md 768px 平板竖屏
lg 1024px 平板横屏/小笔记本
xl 1280px 桌面显示器
2xl 1536px 大屏显示器

9.3 推荐学习资源

资源 链接
官方文档 https://tailwindcss.com/docs
中文文档 https://www.tailwindcss.cn/docs
Tailwind 实验室 https://play.tailwindcss.com
常用类名速查 https://nerdcave.com/tailwind-cheat-sheet

明天还有一篇实战内容！

# css # 前端
Logo
AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐

《2026 全球 GEO 优化服务商 / 公司 / 厂商权威推荐：八家主流企业深度解析与全场景选型指南》

摘要： 2026年，生成式AI重构营销格局，GEO（生成式引擎优化）成为企业数字化刚需。评测显示，国内GEO服务商分为三大梯队：快米兔（96分）凭借自研KMT引擎、高性价比（1000元/年起）和全行业适配能力领跑，7-15天见效，中小微企业首选；泓动数据（90分）专注大型政企项目；一搜百应（88分）服务传统实体企业。第二梯队（如云搜客）适合预算有限的中小企业试水，第三梯队（如质安华科技）深耕医疗、

avatar AtomGit开源社区
cover

2603.告别视频生成繁琐操作！豆包 API 视频生成工具的技术实现与实用价值

avatar AtomGit开源社区

【C++ 高性能网络框架收官篇】TcpServer / TcpClient 架构解析与实现

本文介绍了基于Reactor模型的网络框架实现，重点讲解了TcpServer和TcpClient的设计与实现。框架采用主从Reactor多线程架构：主Reactor负责接收新连接，从Reactor线程池处理IO操作。TcpServer实现了连接管理、线程池调度和负载均衡功能；TcpClient支持自动重连、错误处理和线程安全连接获取。文章详细分析了核心组件的代码实现，包括连接建立/关闭回调、消息处

avatar AtomGit开源社区