Tailwind CSS로 Svelte를 설정하는 방법

새 Svelte 프로젝트에 Tailwind CSS를 추가하는 두 가지 예인 Svelte로 Tailwind CSS를 설정하는 방법입니다.

ℹ️ 작성 시점에 SvelteKit은 v1이 아니지만 SvelteKit이 v1로 전환되면 새 Svelte 프로젝트를 생성하는 기본 방법이 됩니다.

Vite 및 Svelte를 모두 사용하여 각 init 명령에서 기본 프로젝트 설정을 진행하겠습니다. 그런 다음 두 프로젝트의 인덱스 페이지에서 스타일을 재사용하여 Tailwind를 사용하도록 변환합니다.

두 예제 모두 Svelte Add 유틸리티를 사용하며 각 예제를 Svelte 범위 CSS에서 Tailwind로 변환하는 과정을 살펴보겠습니다.

전제 조건

따라가다가 검색을 통해 이것을 찾았다면 Node(v14+)와 터미널로 설정된 개발 환경이 이미 있다고 가정하겠습니다.

SvelteKit npm init svelte@next 사용

npm init svelte@next 명령을 사용하여 새 Svelte 프로젝트를 시작하고 이름을 tailwind-svelte 지정합니다.

npm init svelte@next tailwind-svelte

CLI에서 다음 옵션을 선택하겠습니다.

✔ Which Svelte app template? › SvelteKit demo app
✔ Use TypeScript? › No
✔ Add ESLint for code linting? › No
✔ Add Prettier for code formatting? › Yes

CLI의 지침에 따라 디렉터리를 프로젝트로 변경하고 종속성을 설치하고 git을 초기화하여 변경 사항을 강조 표시합니다.

cd tailwind-svelte
npm install # (or pnpm install, etc)
git init && git add -A && git commit -m "Initial commit" # (optional step)
npm run dev -- --open

개발 서버에서 프로젝트를 실행하면 데모 앱이 예상대로 작동하는지 빠르게 확인한 다음 Svelte Add를 사용하여 Tailwind에 추가할 수 있습니다.

# kill the dev server if it's still running with Ctrl+c
npx svelte-add@latest tailwindcss
# install the newly configured dependencies
npm i

설치 명령을 실행한 후 VS Code의 내 소스 제어 측면 패널은 다음과 같습니다.



그게 다야! Svelte 프로젝트에서 Tailwind를 사용하는 데 필요한 모든 구성! 그것이 당신이 알아야 할 전부라면 멋지다! 나머지는 Tailwind 클래스로 기존 스타일을 복제하는 것입니다.

이제 스타일을 제거하고 Tailwind를 사용하는 것으로 시작하겠습니다!

ℹ️ 처음에 언급했듯이 여기 인덱스 페이지( src/routes.index.svelte )에만 Tailwind 클래스를 적용할 것입니다.

인덱스 페이지의 <style>를 제거하는 것으로 시작하겠습니다. 다음은 src/routes.index.svelte 파일의 git diff입니다.

<script context="module">
  export const prerender = true
</script>

<script>
  import Counter from '$lib/Counter.svelte'
</script>

<svelte:head>
  <title>Home</title>
</svelte:head>

<section>
  <h1>
    <div class="welcome">
      <picture>
        <source srcset="svelte-welcome.webp" type="image/webp" />
        <img src="svelte-welcome.png" alt="Welcome" />
      </picture>
    </div>

    to your new<br />SvelteKit app
  </h1>

  <h2>
    try editing <strong>src/routes/index.svelte</strong>
  </h2>

  <Counter />
</section>

-<style>
-  section {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    flex: 1;
-  }
-
-  h1 {
-    width: 100%;
-  }
-
-  .welcome {
-    position: relative;
-    width: 100%;
-    height: 0;
-    padding: 0 0 calc(100% * 495 / 2048) 0;
-  }
-
-  .welcome img {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    display: block;
-  }
-</style>

따라서 Tailwind 클래스를 HTML 요소에 추가할 것이므로 <style> 태그의 전체 하단 섹션이 제거되었습니다.
<section> 클래스를 다시 생성하기 위해 여기에 git diff를 추가했습니다.

+<section class="flex flex-col justify-center items-center flex-1">
+  <h1 class="w-full">
+    <div class="relative w-full pb-[calc(100% * 495 / 2048)]">
      <picture>
        <source srcset="svelte-welcome.webp" type="image/webp" />
        <img src="svelte-welcome.png" alt="Welcome" />
      </picture>
    </div>

    to your new<br />SvelteKit app
  </h1>

  <h2>
    try editing <strong>src/routes/index.svelte</strong>
  </h2>

  <Counter />
</section>

이 파일은 여기까지입니다. 프로젝트의 나머지 부분을 처리하려면 src/app.css 파일에 특히 유의하십시오. 많은 전역 스타일이 정의되어 있습니다.

Vite로 작업을 진행합니다!

SvelteKit npm init vite@latest 사용

이제 Vite CLI로 동일한 프로세스를 진행합니다. npm init vite@next 명령으로 시작하여 이름을 지정합니다 vite-tailwind-svelte .

npm init svelte@next vite-tailwind-svelte

CLI에서 다음 옵션을 선택하겠습니다.

? Select a framework: › - Use arrow-keys. Return to submit.
    vanilla
    vue
    react
    preact
    lit
❯   svelte

그런 다음 svelte .

? Select a variant: › - Use arrow-keys. Return to submit.
❯   svelte
    svelte-ts

Vite CLI의 지침은 Svelte의 지침과 거의 동일합니다.

Done. Now run:

  cd vite-tailwind-svelte
  npm install
  npm run dev

프로젝트가 문제 없이 실행되고 있음을 확인한 후 git을 초기화하여 코드의 변경 사항을 강조 표시합니다.

git init && git add -A && git commit -m "Initial commit"

이제 Svelte를 사용하여 Tailwind에 추가할 시간입니다. 추가:

# kill the dev server if it's still running with Ctrl+c
npx svelte-add@latest tailwindcss
# install the newly configured dependencies
npm i

이제 이 프로젝트에 있는 인덱스 페이지에서 변경할 수 있습니다src/App.svelte.

페이지에서 <style>를 다시 제거하면 다음과 같은 git diff가 있습니다.

<script>
  import logo from './assets/svelte.png'
  import Counter from './lib/Counter.svelte'
</script>

<main>
  <img src={logo} alt="Svelte Logo" />
  <h1>Hello world!</h1>

  <Counter />

  <p>
    Visit <a href="https://svelte.dev">svelte.dev</a> to learn how to build Svelte
    apps.
  </p>

  <p>
    Check out <a href="https://github.com/sveltejs/kit#readme">SvelteKit</a> for
    the officially supported framework, also powered by Vite!
  </p>
</main>

-<style>
-  :root {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
-      Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-  }
-
-  main {
-    text-align: center;
-    padding: 1em;
-    margin: 0 auto;
-  }
-
-  img {
-    height: 16rem;
-    width: 16rem;
-  }
-
-  h1 {
-    color: #ff3e00;
-    text-transform: uppercase;
-    font-size: 4rem;
-    font-weight: 100;
-    line-height: 1.1;
-    margin: 2rem auto;
-    max-width: 14rem;
-  }
-
-  p {
-    max-width: 14rem;
-    margin: 1rem auto;
-    line-height: 1.35;
-  }
-
-  @media (min-width: 480px) {
-    h1 {
-      max-width: none;
-    }
-
-    p {
-      max-width: none;
-    }
-  }
-</style>

그런 다음 HTML 요소에 Tailwind 클래스를 추가합니다.

<script>
  import logo from "./assets/svelte.png";
  import Counter from "./lib/Counter.svelte";
</script>

+<main class="m-auto text-center p-4">
+  <img class="m-auto h-64 w-64" src={logo} alt="Svelte Logo" />
+  <h1
+    class="font-thin mx-auto max-w-none my-8 text-[#ff3e00] text-6xl uppercase md:max-w-56 md:leading-5"
+  >
    Hello world!
  </h1>

  <Counter />

+  <p class="mx-auto max-w-none my-4 max-w-56 md:leading-5">
    Visit <a href="https://svelte.dev">svelte.dev</a> to learn how to build Svelte
    apps.
  </p>

+  <p class="mx-auto max-w-none my-4 max-w-56 md:leading-5">
    Check out <a
+      class="underline underline-dark-500"
      href="https://github.com/sveltejs/kit#readme">SvelteKit</a
    > for the officially supported framework, also powered by Vite!
  </p>
</main>

완료.

결론

Vite와 Svelte 모두에 대해 npm init 명령을 사용하여 몇 가지 예제 프로젝트를 만들었습니다. Svelte Add을 사용하여 Tailwind 지원에 추가되었으며 각각의 인덱스 페이지 스타일을 Tailwind 스타일로 교체했습니다.