Tailwind CSS home page
  1. 시작하기
  2. SvelteKit에서 Tailwind CSS 설치하기

  1. 프로젝트 생성

    아직 설정하지 않았다면 새로운 SvelteKit 프로젝트를 생성하세요. 가장 일반적인 방법은 SvelteKit 시작하기 문서에 설명되어 있습니다.

    터미널
    npm create svelte@latest my-projectcd my-project

  2. Tailwind CSS 설치

    tailwindcss와 그에 필요한 의존성을 설치한 후, tailwind.config.js와 postcss.config.js 파일을 생성하세요.

    터미널
    npm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p

  3. <style> 블록에서 PostCSS 사용 활성화

    svelte.config.js 파일에서 vitePreprocess를 임포트하여 <style> 블록을 PostCSS로 처리할 수 있게 설정하세요.

    svelte.config.js
    import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter()
  },
  preprocess: vitePreprocess()
};
export default config;

  4. 템플릿 경로 설정

    tailwind.config.js 파일에 모든 템플릿 파일의 경로를 추가하세요.

    tailwind.config.js
    /** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {}
  },
  plugins: []
};

  5. CSS에 Tailwind 지시어 추가

    ./src/app.css 파일을 생성하고 Tailwind의 각 레이어에 대한 @tailwind 지시어를 추가하세요.

    app.css
    @tailwind base;
@tailwind components;
@tailwind utilities;

  6. CSS 파일 임포트

    ./src/routes/+layout.svelte 파일을 생성하고 방금 만든 app.css 파일을 임포트하세요.

    +layout.svelte
    <script>
  import "../app.css";
</script>

<slot />

  7. 빌드 프로세스 시작

    npm run dev로 빌드 프로세스를 실행하세요.

    터미널
    npm run dev

  8. 프로젝트에서 Tailwind 사용 시작

    Tailwind의 유틸리티 클래스를 사용하여 콘텐츠를 스타일링하세요. Tailwind로 처리해야 하는 <style> 블록에는 lang="postcss"를 설정해야 합니다.

    +page.svelte
    <h1 class="text-3xl font-bold underline">
  Hello world!
</h1>

<style lang="postcss">
  :global(html) {
    background-color: theme(colors.gray.100);
  }
</style>