TailwindCSS로 SvelteKit 프로젝트 시작하기

최근에 JavaScript 세계에서 Svelte이 "차세대 대작"이라는 말을 점점 더 많이 들었고 한 번 시도해 보기로 했습니다. TailwindCSS의 열렬한 팬이기 때문에 두 도구를 다음 프로젝트에 적용하기 위한 설정 절차를 공유하고 싶습니다.

SvelteKit 프로젝트 만들기

여기에 멋진 것은 없습니다. SvelteKit 문서에 작성된 the instructions을 따르십시오.

npm init svelte my-app
cd my-app

TailwindCSS 설치

다음 부분에서는 모든 것이 매우 표준적이며 the TailwindCSS documentation에 설명되어 있습니다.

# Add TailwindCSS as a dev dependency
npm install -D tailwindcss postcss autoprefixer

# Initialize the tailwind and postcss configuration files
npx tailwindcss init tailwind.config.cjs -p
mv postcss.config.js postcss.config.cjs

TailwindCSS 구성

종속성이 설치되면 구성할 수 있습니다.

새로 생성된 tailwind.config.js 파일에서 content를 변경합니다.

module.exports = {
-  content: [],
+  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

If you do not plan on using TypeScript you can remove ts from the array. Same goes for any other option.

SvelteKit은 기본적으로 app.css 파일을 생성하지 않는다는 점을 고려하여(이 기사를 작성하는 시점) app.html 옆에 생성하고 TailwindCSS 지시문을 추가합니다.

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

그런 다음 ./src/routes/__layout.svelte에서 애플리케이션의 루트 레이아웃을 생성하고 새로 생성된 app.css를 참조합니다.

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

<slot />

If this syntax does not look familiar to you, you can learn more about layouts on the official documentation

모든 것이 잘 작동하는지 평가

마지막으로 index.svelte 파일 내용을 다음과 같이 변경하여 구성을 테스트합니다.

<h1 class="flex h-screen justify-center items-center text-5xl animate-bounce">
    It works!
</h1>

화면에서 텍스트가 튀는 것을 보면 다음 프로젝트를 개발할 준비가 되었다는 뜻입니다!