写在最开头,不论什么时候,tailwind 官方文档都是我们最好的老师,当你想了解某个功能的时候,请先去官方文档中查看,官方文档中可能会有更详细的说明和示例。 而我们这堂课的目的,是为了让你快速上手 Tailwind CSS,并掌握其核心概念和用法。点击查看官方文档
当我们第一次接触 Tailwind CSS 时,可能会感到困惑:为什么要在 HTML 中写这么多类名?这看起来似乎违背了传统的 CSS 编写方式。但当我们深入了解 Tailwind CSS 的设计哲学后,就会发现这种“实用类优先”(Utility-First)的方法其实是一种非常优雅的解决方案。
传统的 CSS 框架,比如 Bootstrap,为我们提供了预定义的组件。我们只需要在 HTML 中使用特定的类名,就能得到一个样式精美的按钮或卡片。这种方式虽然快速,但往往限制了我们的设计自由度。当我们需要一个稍微不同的样式时,就不得不覆盖默认样式,或者编写自定义 CSS,这反而增加了维护成本。

Tailwind CSS 采用了完全不同的思路。它不提供预定义的组件,而是提供了一系列低级的实用工具类。这些工具类就像乐高积木一样,我们可以通过组合它们来构建任何我们想要的设计。比如,如果我们想要一个蓝色背景、白色文字、圆角边框、内边距为 16 像素的容器,我们只需要在 HTML 中写上 bg-blue-500 text-white rounded-lg p-4 这几个类名即可。
这种方法的优势是显而易见的。首先,它大大提高了开发效率。我们不需要在 HTML 和 CSS 文件之间来回切换,也不需要为每个元素想一个合适的类名。所有的样式都直接写在 HTML 中,一目了然。其次,这种方式提供了极高的灵活性。 我们可以轻松地组合不同的工具类来实现任何设计需求,而不需要担心样式冲突或覆盖问题。最后,由于所有的样式都基于同一套设计系统,整个项目的样式会保持高度一致,这大大降低了维护成本。
Tailwind CSS 的“实用类优先”哲学并不是要完全替代传统的 CSS 编写方式。在某些场景下,比如需要高度复用的组件,我们仍然可以使用传统的 CSS 类。Tailwind CSS 提供了 @apply 指令,让我们可以将工具类组合成自定义的 CSS 类,这样既保持了 Tailwind 的灵活性,又提供了传统方式的复用性。
Tailwind CSS 自 2017 年首次发布以来,经历了多个主要版本的演进。每个版本都带来了重要的改进和新功能,让我们来看看这个框架是如何一步步发展成今天这个样子的。
选择 v4 版本,主要是因为它在性能、配置和现代特性支持方面都有重大提升。新一代编译引擎大幅加快了增量构建速度,并有效降低内存占用,特别适合大型项目。同时,v4 简化了配置流程,许多以往需要在配置文件里设置的内容现在可以直接在 CSS 中完成,比如通过 @theme 指令定义主题变量,更接近原生 CSS,降低了学习门槛。此外,v4 充分利用现代 CSS 特性,专注于现代浏览器支持,带来了更好的开发体验。虽然对老旧浏览器的兼容性弱了一些,但对于绝大多数现代 Web 应用来说,这完全不是问题。
也许未来会出 v5,v6,但是别担心,我们这堂课的内容会让你接触到tailwind的核心内容,即使未来出了新的版本,你也能轻松应对。如果你正在开始一个新项目,强烈建议直接使用 v4 版本。它不仅提供了最好的性能和开发体验,还代表了 Tailwind CSS 的未来发展方向。
在开始安装 Tailwind CSS 之前,我们需要确保开发环境已经准备就绪。这个过程就像准备做菜之前要先准备好厨具和食材一样,虽然看起来是额外的步骤,但实际上会让后续的工作更加顺畅。
首先,我们需要安装 Node.js。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,它让我们可以在服务器端运行 JavaScript 代码。Tailwind CSS 的构建工具是用 Node.js 编写的,所以我们必须先安装它。Node.js 的安装非常简单,我们可以访问 Node.js 的官方网站,下载适合我们操作系统的安装包。建议安装最新的 LTS(长期支持)版本,这个版本更加稳定,适合生产环境使用。
安装完 Node.js 后,npm(Node Package Manager)会自动安装。npm 是 Node.js 的包管理器,我们可以用它来安装和管理项目依赖。除了 npm,我们也可以选择使用 yarn 或 pnpm 作为包管理器,它们各有优势,但 npm 是最常用的,也是 Node.js 自带的,所以对于初学者来说,使用 npm 就足够了。
为了验证 Node.js 和 npm 是否安装成功,我们可以打开终端(在 Windows 上是命令提示符或 PowerShell,在 macOS 和 Linux 上是终端),输入以下命令:
|node -v npm -v
如果安装成功,这两个命令会分别显示 Node.js 和 npm 的版本号。比如,我们可能会看到 v20.10.0 和 10.2.3 这样的输出,这表示 Node.js 的版本是 20.10.0,npm 的版本是 10.2.3。
接下来,我们需要了解构建工具。构建工具的作用是将我们的源代码转换成可以在浏览器中运行的代码。对于 Tailwind CSS 来说,构建工具会扫描我们的 HTML、JavaScript 等文件,找出我们使用的 Tailwind 类名,然后生成对应的 CSS 代码。
常见的构建工具有 Vite、Webpack、Parcel 等。Vite 是一个相对较新的构建工具,它的特点是启动速度快,开发体验好。Webpack 是一个成熟的构建工具,功能强大,但配置相对复杂。Parcel 则是一个零配置的构建工具,使用起来非常简单。对于初学者来说,我们推荐使用 Vite,因为它配置简单,性能优秀,而且与 Tailwind CSS 的集成非常顺畅。
如果你使用的是较旧版本的 Node.js(比如 v14 或更早),可能会遇到兼容性问题。我们建议升级到 Node.js v18 或更高版本,这样可以确保 Tailwind CSS 的所有功能都能正常工作。
Tailwind CSS 提供了多种安装方式,我们可以根据项目的具体情况选择最适合的方法。
使用 Tailwind CLI 是最简单的安装方式,特别适合快速原型开发或者小型项目。这种方式不需要配置复杂的构建工具,只需要几个命令就能开始使用 Tailwind CSS。
首先,我们需要在项目目录中安装 Tailwind CSS。打开终端,进入项目目录,然后运行以下命令:
|npm install -D tailwindcss
这个命令会将 Tailwind CSS 安装为开发依赖(-D 参数表示开发依赖)。安装完成后,我们需要创建一个 CSS 文件来引入 Tailwind 的样式。通常我们会在项目的 src 目录下创建一个 input.css 或 styles.css 文件,然后在其中添加以下内容:
|@tailwind base; @tailwind components; @tailwind utilities;
这三个指令分别引入了 Tailwind CSS 的基础样式、组件样式和实用工具类。基础样式包括一些重置样式,让不同浏览器的默认样式保持一致。组件样式可以用来定义一些可复用的组件类。实用工具类则是我们最常用的部分,包含了所有的工具类。
接下来,我们需要运行 Tailwind CLI 来构建 CSS 文件。在终端中运行以下命令:
|npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
这个命令的含义是:从 ./src/input.css 文件读取输入,将处理后的 CSS 输出到 文件, 参数表示监听文件变化,当我们修改了 HTML 或 CSS 文件时,会自动重新构建。
不同的项目类型在引入 Tailwind CSS 时会有一些细微的差别,虽然原理相同,但具体操作会有所不同。让我们来看看在 HTML、React(JSX)和 Vue 这三种常见的项目类型中,如何正确地引入和使用 Tailwind CSS。
在纯 HTML 项目中引入 Tailwind CSS 是最直接的方式。这种方式适合静态网站或者不需要复杂交互的页面。
假设我们的项目结构是这样的:
|my-html-project/ ├── index.html ├── src/ │ └── input.css ├── dist/ │ └── output.css ├── tailwind.config.js └── package.json
首先,我们需要在 src/input.css 文件中引入 Tailwind 的指令:
|@tailwind base; @tailwind components; @tailwind utilities;
然后,我们使用 Tailwind CLI 来构建 CSS 文件。可以在 package.json 中添加一个脚本:
在我们的教程中,我们主要使用的是react的方式来引入和使用Tailwind CSS,如果你使用的是其他框架,也不必担心,代码案例中唯一的不同 是React语法我们使用的是className,而不是传统的class。这里我们只需要关注tailwind的类名本身即可,而不是框架的语法。
以上四种项目类型的示例,我们可以看到 Tailwind CSS 的引入方式虽然在不同框架中略有不同,但核心步骤都是一致的:在 CSS 文件中引入 Tailwind 的指令,在入口文件中引入 CSS 文件,然后在组件或 HTML 中使用 Tailwind 的类名。对于 CDN 方式,则是直接在 HTML 中引入脚本,无需额外的配置步骤。
这种一致性让 Tailwind CSS 可以轻松地集成到任何类型的项目中,无论是简单的静态网站,还是复杂的单页应用。那么现在,让我们正式进入到 Tailwind CSS 的世界吧!
./dist/output.css--watch最后,我们需要在 HTML 文件中引入生成的 CSS 文件。在 HTML 的 <head> 标签中添加:
|<link href="./dist/output.css" rel="stylesheet">
这样,我们就可以在 HTML 中使用 Tailwind CSS 的类名了。比如,我们可以创建一个简单的页面:
|<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tailwind CSS 示例</title> <link href="./dist/output.css" rel="stylesheet"> </head> <body> <div class="min-h-screen bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center"> <h1 class="text-4xl font-bold text-white">欢迎使用 Tailwind CSS</h1> </div> </body> </html>
这个例子展示了如何使用 Tailwind CSS 创建一个带有渐变背景的居中标题。min-h-screen 让容器占满整个屏幕高度,bg-gradient-to-br 创建了一个从左上到右下的渐变背景,flex items-center justify-center 让内容在容器中居中显示。
{
"scripts": {
"build:css": "tailwindcss -i ./src/input.css -o ./dist/output.css --watch"
}
}这样,我们就可以运行 npm run build:css 来构建 CSS 文件了。--watch 参数会让命令持续运行,监听文件变化并自动重新构建。
在 HTML 文件中,我们需要引入生成的 CSS 文件。在 <head> 标签中添加:
|<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的网站</title> <link href="./dist/output.css" rel="stylesheet"> </head> <body> <div class="container mx-auto px-4 py-8"> <p class="text-blue-500 text-2xl">欢迎来到Tailwind CSS</p> </div> </body> </html>