安装
开始使用 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
。
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 文件中添加一个 @import
以导入 Tailwind CSS。
CSS
@import "tailwindcss";
04
开始构建过程s
使用 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 在不同构建工具上可能略有不同。查看我们的框架指南,了解我们是否有针对您的特定设置的更具体说明。