🌿 SvelteKit에 Tailwind CSS 통합하기: 처음부터 끝까지 완벽 가이드

SvelteKit 프로젝트에 Tailwind CSS를 설정하는 가장 깔끔하고 공식적인 방법을 소개합니다. 최신 문서를 기준으로 정리했으며, 실제 코드와 설정 예시를 포함했습니다.

---

✅ 01. SvelteKit 프로젝트 생성

SvelteKit 프로젝트가 아직 없다면, 아래 명령어로 새로 만들어 주세요.
공식 문서에서도 안내하는 가장 표준적인 방법입니다:

npx sv create my-project
cd my-project

---

✅ 02. Tailwind CSS 설치

Tailwind CSS와 관련된 플러그인을 설치합니다.

npm install tailwindcss @tailwindcss/vite

---

✅ 03. Vite 설정 파일 수정

vite.config.ts 또는 vite.config.js에 Tailwind 플러그인을 추가합니다:

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [
    tailwindcss(),
    sveltekit(),
  ],
});

---

✅ 04. Tailwind CSS import 파일 생성

src/app.css 파일을 만들고 다음을 추가하세요:

@import "tailwindcss";

이 파일은 Tailwind의 기본 스타일, 컴포넌트, 유틸리티 클래스를 포함하는 핵심 파일입니다.

---

✅ 05. CSS를 SvelteKit 레이아웃에 import

SvelteKit은 기본적으로 src/routes/+layout.svelte에서 전역 CSS를 로드합니다.
파일을 생성하고 아래처럼 작성하세요:

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

<slot />

+layout.svelte는 모든 페이지에 공통 적용되는 전역 UI 및 CSS를 담당합니다.

---

✅ 06. 개발 서버 실행

설정이 끝났다면, 개발 서버를 실행해서 Tailwind가 잘 작동하는지 확인합니다:

npm run dev

브라우저에서 http://localhost:5173을 열어 확인하세요.

---

✅ 07. Tailwind CSS 사용 시작

이제 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>

• class="text-3xl font-bold": Tailwind의 텍스트 크기와 굵기 설정
• <style lang="postcss">: Tailwind에서 스타일을 처리할 수 있도록 PostCSS 사용
• @reference와 theme() 함수: Tailwind 변수 사용

---

🧠 마무리 정리

항목	설명
설정 방식	공식 문서 기반의 Vite 플러그인 통합 방식
스타일 적용	HTML 클래스 기반 유틸리티 방식
확장성	PostCSS, JIT 모드, 테마 커스터마이징 가능
기타	모든 설정은 커스터마이징 가능, 설정 파일로 조정 가능

---

🎁 다음 글 예고

• 다크 모드 및 사용자 테마 적용하기
• daisyUI, Flowbite 등 UI 라이브러리 추가하기
• SvelteKit + Tailwind로 포트폴리오 사이트 만들기

---

샘플 프로젝트 zip 파일을 만들었습니다. 아래 링크에서 다운로드하실 수 있어요:

이 프로젝트에는 다음이 포함되어 있습니다:

• vite.config.js에서 @tailwindcss/vite 플러그인 설정
• src/app.css에 Tailwind import
• +layout.svelte에서 CSS 전역 import
• +page.svelte에 Tailwind 유틸리티 클래스 및 PostCSS 예시 포함

---

---

⚡ Vite란?

Vite는 차세대 프론트엔드 개발 빌드 도구입니다.
Vue.js의 창시자 Evan You가 만들었으며, 현재는 React, Svelte, Preact 등 다양한 프레임워크에서 폭넓게 사용되고 있어요.

---

💡 한 줄 요약

Vite는 빠른 개발 서버와 최적화된 프로덕션 빌드를 제공하는 모던 빌드 도구입니다.

---

🧠 Vite의 주요 특징

특징	설명
⚡ 빠른 개발 서버	모듈 단위로 요청을 처리해서 즉시 반영됨 (Hot Module Replacement)
🧱 모듈 기반	ES 모듈(ESM)을 사용하여 브라우저가 직접 모듈 불러옴
🛠️ 빌드 도구 통합	Rollup을 내부적으로 사용해서 최적화된 프로덕션 빌드 제공
🔌 플러그인 시스템	다양한 Vite 플러그인과 통합 가능 (예: Tailwind, React, Svelte 등)
📦 경량 설정	vite.config.js 또는 vite.config.ts로 간단하게 설정 가능

---

🧪 Vite와 SvelteKit의 관계

• SvelteKit는 내부적으로 Vite를 빌드 도구로 사용합니다.
• 우리가 작성한 vite.config.js는 SvelteKit의 동작 방식이나 플러그인을 커스터마이징할 때 쓰입니다.

예:

import { sveltekit } from '@sveltejs/kit/vite';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [
    tailwindcss(),   // Tailwind 플러그인 등록
    sveltekit(),     // SvelteKit 사용 선언
  ],
});

---

🧩 Vite로 가능한 일

작업	명령어
개발 서버 실행	npm run dev
빌드	npm run build
빌드 결과 미리 보기	npm run preview
플러그인 추가	vite-plugin-xxx 형태로 설치 가능

---

📁 vite.config.js 위치와 역할

• 프로젝트 루트 디렉토리에 존재 (vite.config.js 또는 vite.config.ts)
• 주요 역할:
  • 플러그인 설정
  • 별칭(alias) 정의
  • 빌드 경로 설정
  • 개발 서버 옵션 설정

---

✅ 마무리 정리

항목	설명
Vite	빠른 개발 서버 + Rollup 기반 빌드 도구
SvelteKit	내부적으로 Vite를 사용함
Tailwind 통합	Vite 플러그인을 통해 쉽게 설정 가능
설정 파일	vite.config.js에서 플러그인 및 설정 조정

---