安装
Tailwind CSS 通过扫描你的所有 HTML 文件、JavaScript 组件以及其他模板中的 class 名称，生成对应的样式，并将其写入静态 CSS 文件。
它快速、灵活且可靠 —— 零运行时（zero-runtime）。
将 Tailwind CSS 作为 Vite 插件安装是与 Laravel、SvelteKit、React Router、Nuxt 和 SolidJS 等框架集成的最无缝方式。
通过 npm 安装 tailwindcss 和 @tailwindcss/vite。
npm install tailwindcss @tailwindcss/vite将 @tailwindcss/vite 插件添加到您的 Vite 配置中。
import { defineConfig } from 'vite'import tailwindcss from '@tailwindcss/vite'export default defineConfig({ plugins: [ tailwindcss(), ],})在您的 CSS 文件中添加一个导入 Tailwind CSS 的 @import。
@import "tailwindcss";使用 npm run dev 或在您的 package.json 文件中配置的任何命令运行您的构建流程。
npm run dev确保您编译后的 CSS 已包含在 <head> 中（您的框架可能会为您处理这个），然后开始使用 Tailwind 的实用类来为您的内容添加样式。
<!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>