1. 开始使用
  2. 使用 Vite

安装

开始使用 Tailwind CSS

Tailwind CSS 的工作原理是扫描您的所有 HTML 文件、JavaScript 组件和任何其他模板中的类名,生成相应的样式,然后将它们写入静态 CSS 文件。

它快速、灵活且可靠 — 零运行时。

将 Tailwind CSS 安装为 Vite 插件

将 Tailwind CSS 安装为 Vite 插件是将其与 Laravel、SvelteKit、React Router、Nuxt 和 SolidJS 等框架集成的最无缝方式。

01

安装 Tailwind CSS

通过 npm 安装 tailwindcss@tailwindcss/vite

终端
npm install tailwindcss @tailwindcss/vite
02

配置 Vite 插件

@tailwindcss/vite 插件添加到您的 Vite 配置中。

vite.config.ts
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [
tailwindcss(),
],
})
03

导入 Tailwind CSS

在您的 CSS 文件中添加 @import,以导入 Tailwind CSS。

CSS
@import "tailwindcss";
04

启动您的构建流程

使用 npm run dev 或在您的 package.json 文件中配置的任何命令运行您的构建流程。

终端
npm run dev
05

开始在您的 HTML 中使用 Tailwind

确保您的编译后的 CSS 已包含在 <head>(您的框架可能会为您处理此问题),然后开始使用 Tailwind 的实用程序类来设置您的内容样式。

HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/src/styles.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>
您遇到困难了吗? 在不同的构建工具中设置 Tailwind 与 Vite 可能略有不同。查看我们的框架指南,看看我们是否有针对您的特定设置的更具体说明。
版权所有 © 2025 Tailwind Labs Inc.·商标政策