Tailwind CSS - 安装

Tailwind CSS - 安装与设置

开始使用 Tailwind CSS 非常简单。在你的项目中，有两种主要的使用方法，每种方法都有其特定的用例：

1. Tailwind Play CDN：非常适合快速原型设计、演示或在不进行任何构建设置的情况下学习。
2. 安装 Tailwind CLI：推荐的、生产就绪的方法，提供完整的自定义、性能优化以及与现代开发工具的集成。

方法 1：使用 Play CDN

Play CDN 是开始使用 Tailwind 最快的方式。只需在 HTML 文件的 <head> 中添加一个 <script> 标签。CDN 脚本会在浏览器中即时扫描你的 HTML 以查找工具类，并生成必要的 CSS。

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind with Play CDN</title>
  <!-- Add the Play CDN script -->
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-200 flex justify-center items-center h-screen">
  <h1 class="text-3xl font-bold text-indigo-600 underline">
    Hello world from the Play CDN!
  </h1>
</body>
</html>

重要提示：Play CDN 仅用于开发目的，由于性能考虑，并非生产环境的最佳选择。对于生产站点，请始终使用 CLI 安装方法。

方法 2：安装 Tailwind CLI（推荐）

对于任何实际项目，Tailwind CLI 都是首选。它让你能够访问 Tailwind 的所有功能，包括通过 tailwind.config.js 进行自定义、使用 @apply 等指令，以及清除未使用的 CSS 以在生产环境中获得最小的文件大小。

先决条件

• Node.js 和 npm：你需要安装 Node.js，其中包含 npm 包管理器。你可以从 nodejs.org 下载。

分步安装

请按照以下步骤在项目终端中操作：

步骤 1：创建你的项目并安装 Tailwind CSS

# 导航到你的项目文件夹或创建一个新文件夹
cd my-tailwind-project

# 初始化一个 Node.js 项目
npm init -y

# 安装 Tailwind CSS 作为开发依赖
npm install -D tailwindcss

步骤 2：初始化 Tailwind

运行 init 命令以生成 tailwind.config.js 文件。此文件是你配置 Tailwind 所有方面的地方。

npx tailwindcss init

这将在你的项目根目录中创建一个最小的 tailwind.config.js 文件。

步骤 3：配置你的模板路径

这是最关键的一步。你必须告诉 Tailwind 在哪里查找你的工具类。打开 tailwind.config.js 并在 content 数组中添加所有 HTML、JavaScript 和其他模板文件的路径。

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{html,js}', // Adjust this to match your project structure
    './index.html'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

步骤 4：创建你的主 CSS 文件

创建一个 CSS 文件（例如，在 src/input.css 处），并为 Tailwind 的每个层添加 @tailwind 指令。Tailwind 将在构建过程中将生成的样式注入到这些位置。

src/input.css

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

步骤 5：启动构建过程

运行 CLI 工具来扫描你的模板文件并构建你的 CSS。--watch 标志将在你更改模板或配置文件时自动重建 CSS。

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

专业提示：为了方便起见，将此命令添加到你的 package.json 作为 npm 脚本：

package.json

{
  "scripts": {
    "dev": "tailwindcss -i ./src/input.css -o ./dist/output.css --watch"
  }
}

现在你只需运行 npm run dev 即可启动监听器。

步骤 6：在你的 HTML 中使用它

最后，在你的 HTML <head> 中链接到你编译后的 CSS 文件 (dist/output.css)，然后开始样式设计！

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Tailwind Project</title>
  <link href="./dist/output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello from my production-ready setup!
  </h1>
</body>
</html>

总结

虽然 Play CDN 非常适合学习和实验，但 CLI 安装是使用 Tailwind CSS 构建现代化、高性能和可维护网站的标准。它释放了框架的全部功能，从深度自定义到自动 CSS 清除，确保你的用户下载最小的样式表。