[SvelteKit] Tailwind 설치 및 설정

스벨트킷에서 Tailwind를 설치하고 설정해 보자!

 

1. npm tailwind 설치

npm install -D tailwindcss postcss autoprefixer

 

2. config 파일 생성

npx tailwindcss init tailwind.config.cjs -p

 

3. config 파일 내용 설정

/** @type {import('tailwindcss').Config} */

module.exports = {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {
      colors: {
        'my-color': '#403d39', // 커스텀 색상 들어갈 부분
      },
      fontFamily: {
        
      }
    },
  },
  plugins: [require("daisyui")],
}

 

4. app.css 파일 생성 후 코드 작성

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

- 설정 파일 경로 : src/app.css

- src 폴더에서 app.css 파일 생성

 

5. +layout.svelte 파일에서 app.css 파일 import

import “../app.css”;

- 설정 파일 경로 : routes/+layout.svelte

- routes 폴더의 +layout.svelte 파일에 작성

 

이렇게 설정해 주면 끝난다.

이제 적용이 되는지 확인해 보자!

 

<h1 class="text-rose-400">적용 테스트</h1>

- class에 Tailwind가 정의한 클래스명을 입력하면 스타일이 적용됨

[참조]

Customizing Colors - Tailwind CSS