1. Getting Started
  2. Using Vite

安装

开始使用 Tailwind CSS

Tailwind CSS 通过扫描所有 HTML 文件、JavaScript 组件和其他模板中的类名,生成相应的样式,并将其写入静态 CSS 文件。

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

使用 Vite 安装 Tailwind CSS

使用 Vite 安装 Tailwind CSS 是与 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

@import 添加到 CSS 文件中,导入 Tailwind CSS。

CSS
@import "tailwindcss";
04

启动构建过程

使用 npm run devpackage.json 文件中配置的任何命令运行构建过程。package.json file.

Terminal
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>
你是否卡住了? 使用 Vite 设置 Tailwind 在不同的构建工具中可能会有所不同。 检查我们的框架指南,看看我们是否有针对您的特定设置的更具体的说明。
Copyright © 2025 Tailwind Labs Inc.·Trademark Policy