Tailwind CSS 教程（2026 超详版）

Tailwind CSS 是什么？

Tailwind CSS 是目前前端界最受欢迎的 “原子化（Utility-First）” CSS 框架，它提供一套极其丰富的 “CSS 类名”（如w-10、p-4、text-center、rotate-90 等）。我们通过在 HTML 标签中组合使用这些类名，就可以快速做出想要的页面效果。

在传统的 CSS 开发中，我们都是先给 HTML 起类名（比如 class="btn"），然后再到 CSS 文件里写样式。而在 Tailwind CSS 中，我们不需要再去编写 .btn { ... } 这种样式代码，而是直接在 HTML 中使用已经预定义好的 “原子类” 即可。

举个简单的例子，如果我们想要实现一个绿色背景、白色文本、带有圆角的按钮，如果使用传统 CSS 写法，会像下面例子这样写。

示例 1：传统 CSS 写法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        .btn-primary {
            border: none;
            padding: 8px 16px;
            font-size: 16px;
            background-color: #5EC269;
            color: white;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <button class="btn-primary">绿叶网</button>
</body>
</html>

页面效果如下图所示。

传统 CSS 写法示例

示例 2：Tailwind CSS 写法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body>
    <button class="bg-green-500 text-white px-4 py-2 rounded">绿叶网</button>
</body>
</html>

页面效果如下图所示。

Tailwind CSS 写法示例

分析：

从这两个例子对比可以看出，使用了 Tailwind CSS 之后，我们完全不需要去编写任何 CSS 样式，而是直接套用 Tailwind CSS 提供的类名就可以实现对应的效果了。

Tailwind CSS 这种类名 “原子化” 的方式，极大地提高了开发效率，同时也让代码更易于维护。

“语义化 CSS” vs “原子化 CSS”

传统 CSS，我们都是给元素起一个具有特定含义的 id 或 class，这种方式又叫做 “语义化 CSS（Semantic CSS）”。而 Tailwind CSS 走的是与其对立的 “原子化 CSS（Utility-First CSS）”。

Tailwind CSS 核心理念

很多小伙伴第一次接触 Tailwind CSS时，可能会觉得：“把一堆 CSS 类名全塞到 HTML 里，这样代码岂不是变得更加混乱吗？”

其实并不然。Tailwind CSS 的核心灵魂是 “Utility-first（原子化优先）”。它的优势非常明显：

不再为起类名而痛苦：我们不需要再纠结 class 是叫 .btn-primary 还是 .submit-button。
永远不会产生无用的 CSS：修改代码时，直接删除 HTML 标签上的类名即可，再也不用担心旧的 CSS 代码会导致文件越来越臃肿。
CSS 文件体积不再膨胀：不管你的项目多大，CSS 产物都不会超过几十 KB。
不用来回切换文件：不需要在 HTML 文件和 CSS 文件之间来回切换，而是直接在 HTML 中就能完成样式的编写。
高度的一致性：所有的 p-4 都是统一的间距，避免了多人协作时出现 “千人千面” 的混乱。

Tailwind CSS v4 新特性

咱们这个教程使用的是 Tailwind CSS v4 版本，这是该框架自发布以来最重大的一个版本。相比于之前的 v3 版本，v4 版本变得更加纯粹、更加快速。主要体现在以下 3 点：

1. 极速引擎

Tailwind CSS v4 版本采用了全新的原生 Rust 引擎，构建速度提升了几倍，即使在超大型项目中也能实现 “毫秒级” 的热更新。

2. 纯 CSS 配置

在 Tailwind CSS v4 中，我们不再需要那个繁琐的 tailwind.config.js 配置文件。在最新版本中，所有的自定义主题（颜色、字体、间距）都可以直接在 CSS 文件中使用原生的 CSS 变量来完成。

3. 零配置接入

Tailwind CSS v4 能够自动识别你的 HTML 文件，我们不再需要手动配置 content 路径，真正做到了 “开箱即用”。

提示: v4 版本对 v3 有很好的向下兼容性，但配置方式却已经发生了翻天覆地的变化。本教程将完全基于 v4 的语法来进行讲解。

Tailwind CSS vs Bootstrap

相信很多小伙伴们都听过或用过 Bootstrap 这个 UI 框架。Bootstrap 框架会提供很多现成的组件，比如做好的按钮、卡片等，然后我们只需要导入这些组件就可以使用了。

但 Tailwind CSS 不一样，它并没有提供任何现成组件，而是提供一套 “CSS 类名”。我们只需要在相应的 HTML 元素的 class 中，直接套用这些类名，就可以实现相应的效果。

Tailwind CSS vs Bootstrap

很多小伙伴第一次听到 “效用优先” 或者 “原子化 CSS” 这种概念，会觉得非常抽象。咱们来打个比方就很好理解了。

传统的 UI 框架（如 Bootstrap）就像是去超市买 “做好的蛋糕”，我们只能买到它固定的款式。
而 Tailwind CSS 就像是给你提供面粉、鸡蛋、糖和烤箱，我们可以自由组合，烤出任何形状和口味的蛋糕。

这里有人就会问了：“既然 Tailwind CSS 不提供现成组件，那我们在开发中后台系统或者需要快速迭代项目时，难道每个按钮、每个弹窗都要自己从头写一遍吗？”

那当然不是。虽然 Tailwind CSS 官方只提供 “底层原子类”，但在繁荣的前端生态中，已经衍生出了许多基于 Tailwind CSS 构建的高级组件库，比如：

纯 CSS 组件库：常用的有 DaisyUI，它像 Bootstrap 一样提供写好的 .btn、.card 等类名，由于它的底层完全是基于 Tailwind CSS 编写的，我们可以无缝修改。
无头组件库：常用的有 Headless UI、Radix UI，它们只提供交互逻辑（如弹窗的打开关闭、键盘焦点控制），并不提供任何样式，样式完全由你自己用 Tailwind CSS 类名去填充。
代码复制型组件库：比如 shadcn/ui，目前极其流行。这种 UI 库提供精美的组件代码，我们直接复制粘贴到自己的项目中，想怎么改就怎么改。

Tailwind CSS 利于 SEO

很多传统开发者最关心的一个问题是：“Tailwind CSS 使用一堆没有语义的类名，这种方式是不是不利于 SEO 呢？”

可以明确地回答：Tailwind CSS 绝对不会不利于 SEO，相反，反而对 SEO 是非常有益的。

1. 搜索引擎根本不看 CSS 类名

搜索引擎爬虫（如Google、Bing等）在解析网页时，关注的是 HTML 标签的语义，而不是 CSS 类名的语义。对爬虫来说，它关心你是否正确使用了 header、nav、main、article、h1~h6 等具有结构意义的 HTML 标签。

因此不管你是写成 <h1 class="article-title">，还是写成 <h1 class="text-2xl font-bold text-gray-900 mb-4">，它们在搜索引擎眼里的权重是完全一模一样的。搜索引擎爬虫都知道这是一个页面的一级标题。

2. Tailwind 如何提升 SEO

现代 SEO（尤其是 Google 的排名算法）非常看重 Core Web Vitals（核心网页指标），其中最关键的就是网页加载速度。在这个维度上，Tailwind 表现得极其出色：

极小的 CSS 体积：传统的按语义写 CSS（BEM 等方法）随着项目变大，CSS 文件往往会变得臃肿，且充满无用的 “死代码”。而 Tailwind CSS 采用按需编译（JIT 引擎），只打包你真正在 HTML 中写过的类名。很多大型项目的全局 CSS 文件甚至不到 10KB。
减少渲染阻塞：CSS 体积越小，浏览器下载和解析的时间就越短，页面的首次内容绘制（FCP）和最大内容绘制（LCP）指标就会越好，这可以直接拉升 SEO 排名。

3. 关于 “HTML 标签变得臃肿” 的担忧

使用 Tailwind CSS 会让 HTML 源码看起来密密麻麻，很多小伙伴担心这会不会导致 HTML 文件过大，从而影响加载速度呢？

其实完全不用担心。现代 Web 服务器默认都会开启 Gzip 或 Brotli 压缩。这类压缩算法对于重复的文本（比如反复出现的 flex、pt-4、text-center）有着极高的压缩率。

增加的 HTML 体积在压缩后可以说是微乎其微，完全被 Tailwind CSS 省下的巨大 CSS 体积所抵消。整体的页面传输体积通常是下降的。

Tailwind CSS 示例

为了让小伙伴们能够感受 Tailwind CSS 的强大，我们来看一个简单的名片卡片。这个例子只需要套用对应的 Tailwind CSS 类名，就可以轻松实现了。

示例 3：Tailwind CSS 制作一个卡片

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="bg-gray-900 flex items-center justify-center min-h-screen">
    <div class="group relative max-w-sm transition-all duration-500 hover:-translate-y-2">
        <div class="absolute -inset-1 bg-gradient-to-r from-green-400 to-blue-500 rounded-2xl blur opacity-25 group-hover:opacity-75 transition duration-1000 group-hover:duration-200"></div>
        <div class="relative px-7 py-8 bg-black border border-gray-800 rounded-2xl leading-none flex items-start space-x-6">
            <div class="flex-1 space-y-4">
                <div class="flex items-center justify-between">
                    <span class="px-3 py-1 text-xs font-semibold tracking-wider text-green-400 uppercase bg-green-400/10 rounded-full">
                        New
                    </span>
                    <svg class="w-6 h-6 text-gray-500 group-hover:text-green-400 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                    </svg>
                </div>
                <div>
                    <h3 class="text-2xl font-bold text-white">绿叶网</h3>
                    <p class="mt-2 text-gray-400 leading-relaxed">
                        绿叶网专注于教程的易懂性，让完全 0 基础的小白也能更快上手。
                    </p>
                </div>
                <button class="flex items-center text-green-400 font-bold group-hover:text-white transition-colors">
                    开始学习
                    <span class="ml-2 group-hover:translate-x-2 transition-transform">→</span>
                </button>
            </div>
        </div>
    </div>
</body>
</html>

页面效果如下图所示。

Tailwind CSS 示例

分析：

从这个例子可以看出，我们完全不需要编写一行 CSS 代码，而只使用 Tailwind CSS 提供的类名，就可以轻松实现复杂的效果，包括：深色模式感官、背景渐变、图标发光、流畅的动画等。

对于这个例子，小伙伴们简单看一下即可，在后面的章节中，我们会详细给大家介绍 Tailwind CSS 的语法。

常见问题

1. 我现在对 HTML 和 CSS 都还不够熟悉，可以直接学 Tailwind CSS 吗？

不可以。Tailwind CSS 本质上是对原生 CSS 的一层封装。如果你没有扎实的 CSS 基础（尤其是盒子模型、定位、Flex 布局等），学习 Tailwind CSS 会非常吃力。

建议小伙伴们先把以下 2 个教程学明白了，再来挑战学习 Tailwind CSS：

2. 除了咱们这个教程，还有什么好的参考资料吗？

在学习任何编程语言的过程中，小伙伴们一定要养成查阅官方文档的习惯，因为这是最重要的参考资料。

Tailwind CSS 官方文档

2. Tailwind CSS 会取代 CSS 吗？

绝对不会。Tailwind CSS 的底层依然是 CSS，掌握好 CSS 基础（如盒子模型、定位、Flex/Grid 布局），也是学好 Tailwind CSS 的前提。

3. Tailwind CSS 类名那么多，根本记不住怎么办？

对于 Tailwind CSS 的类名，小伙伴们不需要死记硬背。实际上，连 Tailwind CSS 的作者自己也记不住所有的类名（笑）。

在实际开发中，我们一般会配合 VSCode 的 Tailwind CSS IntelliSense 插件使用。在开发的时候，只需要输入一点点字母，VSCode 就会自动提示类名以及对应效果。

4. HTML 标签上写这么长一串 class，代码不会变得很难维护吗？

很多初学的小伙伴第一次看到 Tailwind CSS 代码都会有这种 “视觉恐慌”。实际上，我们可以使用 VSCode 的 Prettier 插件让类名自动规范排序。

此外，对于重复使用的小部件（比如按钮），在 Vue、React 等项目开发中，我们都会将其封装成独立的组件，这样可以完美解决代码冗长的问题。