4. 用 Vite 安装 Tailwind CSS

本节目标：从零开始，用 Vite + Tailwind CSS 搭出一个能跑的项目，写出第一个用工具类的页面。

Vite 是官方推荐的接入方式，配置最少、体验最好。直接开始吧。

前提条件

Node.js 18+ 已安装
终端能跑 npm 命令

步骤 1：创建 Vite 项目

npm create vite@latest my-tailwind-app
cd my-tailwind-app

创建过程中会问你选什么框架。选 Vanilla（纯 JS）或者 React 都行，这里不影响 Tailwind 的安装。

如果选的是 TypeScript，配置文件会是 vite.config.ts；纯 JS 则是 vite.config.js。

步骤 2：安装 Tailwind CSS

npm install tailwindcss @tailwindcss/vite

两个包都要装：tailwindcss 是核心，@tailwindcss/vite 是 Vite 插件。

步骤 3：配置 Vite 插件

打开 vite.config.ts（或 .js），加上 Tailwind：

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

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

就这么简单，不需要 react() 之类的插件也认识 Tailwind。

步骤 4：引入 Tailwind 到 CSS

打开项目里的 src/style.css（或 src/index.css），把内容替换成：

@import "tailwindcss";

Note

这是 v4 的写法。v3 时代要写三行 @tailwind base/components/utilities，现在一行搞定。

如果你的 CSS 文件里还有其他自定义样式，可以在 @import 之后继续写：

@import "tailwindcss";

/* 你的自定义样式 */
body {
  font-family: 'Inter', sans-serif;
}

步骤 5：启动开发服务器

npm run dev

终端会输出一个本地地址，通常是 http://localhost:5173。打开浏览器访问它。

步骤 6：用工具类写页面

打开 index.html，找到 <body> 里的内容，改成：

<h1 class="text-3xl font-bold underline text-blue-600">
  Hello Tailwind CSS!
</h1>

保存文件，浏览器应该会自动刷新，看到一个蓝色、加粗、带下划线的大标题。

验证安装成功

在终端里按 Ctrl+C 停掉 dev server，跑一下生产构建：

npm run build

如果构建成功，说明 Tailwind 已经正确配置。你会在 dist/assets/ 里找到编译后的 CSS 文件，里面只包含你实际用到的工具类。

常见问题

Q：写完类名没效果？ 检查 CSS 文件里是不是写了 @import "tailwindcss";，以及这个 CSS 文件有没有被入口 JS 引入。

Q：VS Code 里类名没有提示？ 装 Tailwind CSS IntelliSense 插件，下一章会详细讲。

Q：热更新不生效？ 确保 vite.config.ts 里 tailwindcss() 没有拼写错误，然后重启 dev server。

Tip

如果你用的是 React 或 Vue，记得在入口文件（main.tsx / main.js）里 import './style.css'，否则 CSS 不会被加载。

下一章我们看 PostCSS 方式怎么装。