⋆ ₊ Svelte ₊ ⋆

[SvelteKit] daisyUI 설치 및 설정

딩쵸 2024. 1. 11. 16:20

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

 

우선, daisyUI는 Tailwind 기반이기 때문에 Tailwind를 설치해 줘야 한다.

 

[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('tailw

codingchyo.tistory.com

- Tailwind 설치 방법

 

1. npm daisyui 설치

npm install daisyui

 

2. tailwind.config.cjs 파일 수정

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

module.exports = {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  plugins: [require("daisyui")],
  daisyui: {
    themes: [
      'pastel', // 사용할 테마
    ],
  }
}

- 기존 파일에서 content와 같은 선상에 plugins: [require("daisyui")] 추가

 

이렇게 하면 daisyUI 설치 및 설정이 끝난다.