Tailwind CSS Vite 配置

为什么使用 Vite？

在前一节中，我们学习了如何使用 CDN 来引入 Tailwind CSS。虽然这种方式很简单，但它不适合正式项目。在真实的项目开发（Vue 或 React）中，我们一般会用到 Vite 这种 “构建工具”。

Vite 可以很好地帮助我们处理代码、刷新浏览器以及压缩文件等。其中，Vite 配合 Tailwind CSS v4 有以下显著优势：

• 极速预览：不管你的项目有多大，修改 Tailwind CSS 代码后，浏览器都能在毫秒内完成更新。
• 自动优化：在你准备上线网站时，Vite 会自动剔除没用到的 CSS 代码，让文件体积变得极小。
• 完美插件支持：只有在 Vite 环境下，VSCode 的 Tailwind CSS 类名自动提示插件才能发挥出 100% 的威力。

Vite 如何配置 Tailwind CSS？

在 Tailwind CSS v4 中，配置过程被极大地简化了。我们只需要以下简单的 3 步即可。

1. 安装 Tailwind 插件

首先，在我们的项目（一般是 Vue 或 React 项目）根目录下，通过终端运行以下命令来安装 Tailwind CSS 及其专为 Vite 打造的插件：

npm i tailwindcss @tailwindcss/vite -D

2. 配置 Vite 插件

在项目根目录下的 vite.config.js（或 vite.config.ts）文件，引入并添加 Tailwind 插件。

import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
    plugins: [
        tailwindcss(),
    ],
});

3. 导入 Tailwind CSS

首先，在你的主 CSS 文件（通常是 src/style.css 或 src/assets/main.css）的最顶部，加入下面这行代码：

@import "tailwindcss";

必须确保这个包含了 Tailwind 指令的 CSS 文件，已经被引入到了你项目的入口文件中：

• 对于 Vue 项目来说，通常是 src/main.js 或 src/main.ts。
• 对于 React 项目来说，通常是 src/main.jsx。

// Vue 项目
import { createApp } from "vue";
import "./style.css";     // 务必确保正确引入了你的全局 CSS 文件
import App from "./App.vue";

createApp(App).mount("#app");

这里可能很多小伙伴会好奇：“为什么只需要写上 @import "tailwindcss"; 这一行代码就可以了呢？”

实际上，这是因为 Vite 在编译时，@tailwindcss/vite 插件会拦截这个指令，然后自动将其替换为成千上万行功能强大的原子类 CSS。这种 “按需生成” 的机制，也正是 Tailwind CSS v4 运行速度极快的秘诀。

4. 验证是否配置成功

最后，我们需要写一段代码来测试一下是否配置成功。以 Vue 项目为例，我们打开 src/App.vue 文件，清空原有的内容，替换为以下测试代码：

<template>
    <div class="min-h-screen bg-gray-100 flex items-center justify-center">
        <h1 class="text-4xl font-bold text-blue-500 hover:text-blue-700 transition-colors cursor-pointer">
            Tailwind Vite 配置成功！
        </h1>
    </div>
</template>

在终端运行 npm run dev 启动项目。打开浏览器之后，如果你能看到一个灰底蓝字、并且鼠标放上去会变色的标题，说明 Tailwind CSS 已经完美接入 Vite 项目了。