Sveltekit에 Tailwind CSS 적용하기

Bbok Mun·2022년 4월 23일

Svelte.js

목록 보기

2/2

Front CSS Framework 중에서 최근 가장 애용하고 있는것이 TailwindCSS 이다.
과거 부트스트랩보다 세밀하고 폭넓은 설정들을 할 수 있어서
생상성이 늘어나고 시간이 단축되고 CSS 작성할일이 거의 없어졌다.

웬만한 애니메이션까지 처리되다보니 더욱 그러하다.
정말 고난이도의 작업이 아닌이상 CSS 파일을 볼 경우가 없을것 같다.
게다가 Sveltekit 의 Component 들에서 지원하는 기능들까지 고려한다면
거의 없다. 간단한 사이트는 요소만 있다면 뚝딱?

초기 설정을 해놓으면 바로 사용할 수 있고 자주 사용해야하니 기록으로 남겨본다.

Official : TainwindCSS with Sveltekit

SvelteKit 으로 프로젝트 생성

npm init svelte@next {프로젝트명}
cd {프로젝트명}
code .

패키지로 TailwindCSS 설치

공식 홈페이지 기준으로 npm 으로 사용하였다.

npm install -D tailwindcss postcss autoprefixer

Configure TailwindCSS

Default Config 파일을 명령어를 통하여 만들어 준다.
그냥 init 을 하면 js 파일로 생성되는데, cjs 파일로 변경해주어야 하니 지정해준다.
postcss 도 js 로 생성되니 cjs 로 변경해주는 작업을 꼭 해주자.

npx tailwindcss init tailwind.config.cjs -p
mv postcss.config.js postcss.config.cjs

tailwind.config.cjs 수정

module.exports = {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {},
  },
  darkMode: 'class',	//false, media, class
  plugins: [],
}

여기까지는 항상 순조롭다. 이슈될 사항이 없다.
이제 실제 적용을 해야 하는데 app.css 에 적용하라는 설명도 있고
app.html, __layout.svelte 에 적용하라는 설명도 있다.
처음에는 제각각이여서 엄청 혼란스러웠다.

하지만 주로 layout 을 사용하기때문에 postcss 를 사용해서 적용을 했다.

layout 생성

/src/routes/ 경로에 __layout.svelte 파일을 만들어준다
해당 파일에는 <slot /> 이 있어야 페이지들 내용을 불러오니 유의하자

<slot />
<style global lang="postcss">
@tailwind base;
@tailwind components;
@tailwind utilities;
</style>

실제 작동 확인

index.svelte 에 class 들을 적용해서 작동을 확인한다

<h1 class="text-3xl font-bold underline">Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>