Cài đặt Tailwind CSS với SvelteKit

Thiết lập Tailwind CSS trong dự án SvelteKit.

Tạo dự án của bạn

Bắt đầu bằng cách tạo một dự án SvelteKit mới nếu bạn chưa thiết lập. Cách phổ biến nhất được đề cập trong tài liệu SvelteKit.

Terminal

npx sv create my-projectcd my-project

Cài đặt Tailwind CSS

Cài đặt @tailwindcss/vite và các peer dependencies thông qua npm.

Terminal

npm install tailwindcss @tailwindcss/vite

Cấu hình Vite Plugin

Thêm plugin @tailwindcss/vite vào cấu hình Vite của bạn.

vite.config.ts

import { sveltekit } from '@sveltejs/kit/vite';import { defineConfig } from 'vite';import tailwindcss from '@tailwindcss/vite';export default defineConfig({  plugins: [    tailwindcss(),    sveltekit(),  ],});

Import Tailwind CSS

Tạo file ./src/app.css và thêm @import để import Tailwind CSS.

app.css

@import "tailwindcss";

Import file CSS

Tạo file ./src/routes/+layout.svelte và import file app.css vừa tạo.

+layout.svelte

<script>  let { children } = $props();  import "../app.css";</script>{@render children()}

Bắt đầu quá trình build

Chạy quá trình build với npm run dev.

Terminal

npm run dev

Bắt đầu sử dụng Tailwind trong dự án của bạn

Bắt đầu sử dụng các utility class của Tailwind để style nội dung của bạn, đảm bảo import theme Tailwind CSS cho bất kỳ khối <style> nào cần được xử lý bởi Tailwind.

+page.svelte

<h1 class="text-3xl font-bold underline">  Hello world!</h1><style lang="postcss">  @reference "tailwindcss";  :global(html) {    background-color: theme(--color-gray-100);  }</style>