Установите Tailwind CSS с помощью SvelteKit

Настройка Tailwind CSS в проекте SvelteKit.

Создайте свой проект

Начните с создания нового проекта SvelteKit, если у вас его еще нет. Наиболее распространенный подход описан в документации SvelteKit.

Terminal

npx sv create my-projectcd my-project

Установите Tailwind CSS

Установите @tailwindcss/vite и его зависимости через npm.

Terminal

npm install tailwindcss @tailwindcss/vite

Настройте плагин Vite

Добавьте плагин @tailwindcss/vite в конфигурацию Vite.

vite.config.ts

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

Импортируйте Tailwind CSS

Создайте файл ./src/app.css и добавьте @import, который импортирует Tailwind CSS.

app.css

@import "tailwindcss";

Импортируйте CSS-файл

Создайте файл ./src/routes/+layout.svelte и импортируйте недавно созданный файл app.css.

+layout.svelte

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

Начните процесс сборки

Запустите процесс сборки с помощью npm run dev.

Terminal

npm run dev

Начните использовать Tailwind в своем проекте

Начните использовать служебные классы Tailwind для стилизации своего контента, обязательно импортируйте тему Tailwind CSS для всех блоков <style>, которые необходимо обработать с помощью 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>