1. 快速开始
  2. 使用 Vite

安装

开始使用 Tailwind CSS

Tailwind CSS 通过扫描你的所有 HTML 文件、JavaScript 组件以及其他模板中的 class 名称,生成对应的样式,并将其写入静态 CSS 文件。

它快速、灵活且可靠 —— 零运行时(zero-runtime)。

将 Tailwind CSS 作为 Vite 插件安装

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

01

安装 Tailwind CSS

通过 npm 安装 tailwindcss@tailwindcss/vite

Terminal
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 文件中添加一个导入 Tailwind CSS 的 @import

CSS
@import "tailwindcss";
04

启动构建流程

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

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