[SvelteKit] 스벨트 킷에 테일윈드CSS 적용하기 (SvelteKit + tailwindCSS)

스벨트를 사용하고 싶어졌다.

 

리액트도 있지만 최근 뜨고 있는 스벨트라는 프레임워크에 더 관심이 간다.

 

스벨트의 장점인 빠른 개발 속도를 살리기 위해 tailwindCSS를 적용하면 시너지가 좋을 것 같다는 생각이 들었다.

 

이미 만들어진 디자인을 클래스 형식으로 사용할 수 있기 때문에 간단한 페이지를 만드는데는 도움이 많이 될 것 같다.

---

1. Svelte 프로젝트 생성하기

스벨트는 npm을 사용해서 프로젝트를 생성할 수 있다.

 

npm create svelte@latest 프로젝트이름

위의 명령어를 통해 프로젝트 생성을 할 수 있다.

 

순서가 진행되며 여러가지를 물어보는데 선호하는 옵션을 선택하면 된다.

 

프로젝트가 완성되었다면 해당 디렉토리로 이동하여 npm install을 입력한다.

 

그럼 패키지들이 자동으로 설치되고 프로젝트를 시작할 수 있다.

 

npm run dev를 입력하면 실시간으로 변경사항을 볼 수 있으므로 개발에 활용하면 좋을 것 같다.

 

(추가적으로 VITE을 사용하기 때문에 매우 빠르다)

---

2. tailwindCSS 설치하기

npm install -D tailwindcss postcss autoprefixer

우선 위의 명령어를 통해 프로젝트에 tailwindCSS를 설치한다.

 

npx tailwindcss init tailwind.config.cjs -p

이후, tailwind 관련 설정들을 하기 위해 위의 명령어를 입력한다.

 

그 다음으로 프로젝트 디렉토리 내부에 있는 svelte.config.js 파일에 아래 코드를 추가한다.

(아마 기본으로 해당 코드가 있을 가능성이 높음)

preprocess: vitePreprocess()

 

그 다음으로 tailwindCSS를 적용시키기 위해 아까 생성된 tailwind.config.cjs 파일의 content 부분에 아래와 같이 내용을 추가한다.

content: ['./src/**/*.{html,js,svelte,ts}']

---

3. tailwindCSS 적용하기

마지막으로 프로젝트에서 사용할 수 있도록 적용해야 한다.

 

스벨트킷 프로젝트의 ./src 경로에 app.css 파일을 생성한 뒤 아래 내용을 추가한다.

@tailwind base;
@tailwind components;
@tailwind utilities;

 

(위의 단계 까지만 해도 tailwindCSS가 적용되는 것 같다)

 

하지만 공식 문서에 의하면 추가적인 절차가 필요하다.

 

./src/routes 경로에 +layout.svelte 파일을 생성한 뒤 app.css를 불러온다.

이 과정을 통해 tailwindCSS를 적용할 수 있고 Svelte의 기본 디자인을 제거할 수 있다.

---

4. 번외

스벨트킷 + tailwindCSS를 사용할 때 좋은 VSC 익스텐션이 있다.

우선 스벨트를 설치해야 할 것이다.

 

다음으로 유용한 기능은 tailwindCSS의 자동완성을 도와주는 기능이다.

해당 익스텐션이 있다면 tailwindCSS를 사용하기 위해 class를 작성하는 동안 자동완성을 도와주며, 각 단위와 수치도 볼 수 있다.

---

5. 참고자료

아래는 SvelteKit과 tailwindCSS의 공식 문서이다.
(tailwindCSS의 경우 사용할 수 있는 옵션이 매우 많기 때문에 공식문서를 참고하는 것이 좋을 듯 하다)

Introduction • Docs • SvelteKit

Installation - Tailwind CSS