使用 Vite 安装 Tailwind CSS
将 Tailwind CSS 作为 Vite 插件安装，是与 Laravel、SvelteKit、React Router、Nuxt 和 SolidJS 等框架集成的最顺畅方式。
创建项目
如果还没有 Vite 项目，先创建一个。最常见的做法是使用 Create Vite。
Terminal
shellnpm create vite@latest my-project
cd my-project安装 Tailwind CSS
通过 npm 安装 tailwindcss 和 @tailwindcss/vite。
Terminal
shellnpm install tailwindcss @tailwindcss/vite配置 Vite 插件
将 @tailwindcss/vite 插件加入 Vite 配置。
vite.config.ts
jsimport { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [
tailwindcss(),
],
})导入 Tailwind CSS
在 CSS 文件中添加 @import 以导入 Tailwind CSS。
CSS
css@import "tailwindcss";启动构建
使用 npm run dev 或 package.json 中配置的命令运行构建流程。
Terminal
shellnpm run dev在 HTML 中使用 Tailwind
确保已编译的 CSS 包含在 <head> 中 （你的框架可能已自动处理），然后使用 Tailwind 的工具类为内容添加样式。
HTML
html<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/src/style.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>