安装
在 SvelteKit 项目中设置 Tailwind CSS。
如果你还没有设置项目,首先创建一个新的 SvelteKit 项目。最常见的方法在 SvelteKit 文档中概述。
npx sv create my-projectcd my-project
通过 npm 安装 @tailwindcss/vite
及其同等依赖。
npm install tailwindcss @tailwindcss/vite
将 @tailwindcss/vite
插件添加到你的 Vite 配置中。
import { sveltekit } from '@sveltejs/kit/vite';import { defineConfig } from 'vite';import tailwindcss from '@tailwindcss/vite';export default defineConfig({ plugins: [ tailwindcss(), sveltekit(), ],});
创建一个 ./src/app.css
文件,并添加一个 @import
语句来导入 Tailwind CSS。
@import "tailwindcss";
创建一个 ./src/routes/+layout.svelte
文件,并导入新创建的 app.css
文件。
<script> let { children } = $props(); import "../app.css";</script>{@render children()}
使用 npm run dev
运行你的构建过程。
npm run dev
开始使用 Tailwind 的实用类来设置你的内容样式,确保为任何需要由 Tailwind 处理的 <style>
块导入你的 Tailwind CSS 主题。
<h1 class="text-3xl font-bold underline"> Hello world!</h1><style lang="postcss"> @reference "tailwindcss"; :global(html) { background-color: theme(--color-gray-100); }</style>