1 / 5
走进Tailwind
写在最开头，不论什么时候，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 年首次发布以来，经历了多个主要版本的演进。每个版本都带来了重要的改进和新功能，让我们来看看这个框架是如何一步步发展成今天这个样子的。
最初的 v1 版本奠定了 Tailwind CSS 的基础。它引入了实用类优先的理念，提供了丰富的工具类，让开发者可以直接在 HTML 中使用这些类来构建界面。虽然这个版本已经足够强大，但在性能和功能上还有很大的提升空间。
v2 版本在 v1 的基础上进行了重大改进。它引入了更丰富的颜色系统，提供了更多的颜色选项和渐变支持。暗模式支持也得到了显著改进，让开发者可以更容易地实现深色主题。更重要的是，v2 版本开始支持 JIT（Just-In-Time）编译模式，虽然这个功能在当时还是可选的，但它为后续的性能提升奠定了基础。
v3 版本是一个重要的里程碑。它默认启用了 JIT 模式，这意味着 Tailwind CSS 只会生成我们在项目中实际使用的样式，而不是生成所有可能的样式组合。这大大减少了最终 CSS 文件的大小，也显著提升了构建速度。v3 还引入了更强大的变体系统，让我们可以更容易地创建响应式设计和状态变体。插件系统也得到了增强，让社区可以更容易地扩展 Tailwind 的功能。
现在，我们迎来了 v4 版本。这是 Tailwind CSS 历史上最重要的更新之一。v4 版本进行了核心重构，采用了全新的 CSS 引擎。它移除了对 PostCSS 和 Autoprefixer 的依赖，这意味着我们可以更直接地使用 Tailwind CSS，而不需要额外的构建工具。v4 版本还引入了对原生 CSS 变量的更好支持，让我们可以更灵活地定制主题。
选择 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 的世界吧！