Tailwind CSS - 生产优化

Tailwind CSS 生产优化

Tailwind CSS 将性能视为首要任务。现代 Tailwind 项目利用 Just-in-Time (JIT) 引擎，通过扫描项目文件按需生成 CSS。这意味着最终的生产环境 CSS 文件只包含你实际使用的样式，从而产生极小的文件大小（通常 gzip 压缩后小于 10kB）。

例如，像 Netflix Top 10 这样的高流量网站使用 Tailwind，并提供了一个仅有 6.5kB 的 CSS 文件。这种优化水平消除了对复杂策略（如按页面拆分 CSS）的需求。你可以发布一个由浏览器缓存的单一、微小的 CSS 文件。

优化的核心：JIT 引擎

JIT 引擎通过扫描模板文件（HTML、JS、Vue、React 等）来查找类名。要启用它，你必须在 tailwind.config.js 文件中配置 content 路径。这告诉 Tailwind 在何处查找你的类。

第 1 步：安装 Tailwind CSS

首先，确保你的项目已设置 Node.js 和包管理器（npm、yarn 或 pnpm）。安装 Tailwind CSS 并生成其配置文件。

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

# 生成 tailwind.config.js 和 postcss.config.js 文件
npx tailwindcss init -p

第 2 步：配置模板路径

这是最关键的一步。打开你的 tailwind.config.js，并指定所有编写 Tailwind 类的文件的路径。

/** @type {import('tailwindcss').Config} */
module.exports = {
  // 'content' 数组告诉 JIT 引擎要扫描哪些文件
  content: [
    './src/**/*.{html,js,jsx,ts,tsx,vue}', // 扫描 'src' 文件夹中的所有相关文件
    './public/index.html' // 也扫描主 HTML 文件
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

第 3 步：创建主 CSS 文件

创建一个 CSS 文件（例如 ./src/input.css），并使用 @tailwind 指令注入 Tailwind 的基础样式、组件样式和工具样式。

./src/input.css

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

构建和压缩 CSS

配置完成后，你现在可以生成优化后的 CSS 文件了。主要有两种方法。

1. 使用 Tailwind CLI

Tailwind CLI 是编译 CSS 最简单的方法。使用 --minify 标志来确保输出在生产环境中被压缩。

# 运行此命令以构建生产就绪的 CSS
npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify

最佳实践是将其添加到 package.json 文件的 scripts 部分：

// package.json 文件
{
  "scripts": {
    "build:css": "tailwindcss -i ./src/input.css -o ./dist/output.css --minify",
    "dev:css": "tailwindcss -i ./src/input.css -o ./dist/output.css --watch"
  }
}

2. 使用 PostCSS

如果你正在使用像 Vite、Next.js 或 Laravel 这样的框架，Tailwind 很可能已经作为 PostCSS 插件集成。要压缩输出，你可以将 cssnano 添加到你的 PostCSS 配置中。首先，安装它：

npm install -D cssnano

然后，更新你的 postcss.config.js，以便在生产环境中条件性地包含 cssnano。

// postcss.config.js 文件
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    // 只在生产环境中运行 cssnano
    ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {})
  }
}

你的构建工具（例如 Vite）在创建生产构建时会自动将 NODE_ENV 设置为 production，从而激活 cssnano 进行压缩。