SvelteKit에 Tailwind CSS 설치하기

SvelteKit 프로젝트에 Tailwind CSS를 설정하는 방법입니다.

프로젝트 생성

아직 프로젝트를 설정하지 않았다면 새로운 SvelteKit 프로젝트를 생성하세요. 가장 일반적인 방법은 SvelteKit 문서에 설명되어 있습니다.

터미널

npx sv create my-projectcd my-project

Tailwind CSS 설치

npm을 통해 @tailwindcss/vite와 그 피어 의존성을 설치하세요.

터미널

npm install tailwindcss @tailwindcss/vite

Vite 플러그인 설정

Vite 설정에 @tailwindcss/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 파일을 생성하고 Tailwind CSS를 가져오는 @import를 추가하세요.

app.css

@import "tailwindcss";

CSS 파일 가져오기

./src/routes/+layout.svelte 파일을 생성하고 방금 만든 app.css 파일을 가져오세요.

+layout.svelte

<script>  import "../app.css";</script><slot />

빌드 프로세스 시작

npm run dev로 빌드 프로세스를 실행하세요.

터미널

npm run dev

프로젝트에서 Tailwind 사용 시작

Tailwind의 유틸리티 클래스를 사용하여 콘텐츠를 스타일링하세요. Tailwind CSS 테마를 가져와서 Tailwind로 처리해야 하는 <style> 블록에 적용하세요.

+page.svelte

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