安装
Tailwind CSS 通过扫描所有 HTML 文件、JavaScript 组件以及其他模板中的类名来工作,生成相应的样式,然后将其写入静态 CSS 文件。
它快速、灵活且可靠——无运行时。
将 Tailwind CSS 作为 Vite 插件安装是最无缝的方式,可将其与 Laravel、SvelteKit、React Router、Nuxt 和 SolidJS 等框架集成。
通过 npm 安装 tailwindcss
和 @tailwindcss/vite
。
npm install tailwindcss @tailwindcss/vite
在你的 Vite 配置中添加 @tailwindcss/vite
插件。
import { defineConfig } from 'vite'import tailwindcss from '@tailwindcss/vite'export default defineConfig({ plugins: [ tailwindcss(), ],})
在你的 CSS 文件中添加一个 @import
语句,用于导入 Tailwind CSS。
@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>