테마 구성 방법

설치

bun add -D daisyui@latest

src/styles/global.css 파일 수정

@import "tailwindcss";
@plugin "daisyui" {
    themes: light --default, dark --prefersdark;
}

기본적으로 light 모드이고 기기가 다크모드이면 다크모드를 적용한다.

<html data-theme="light">
</html>

html 태그에 data-theme 를 지정한다.

@import "tailwindcss";
@plugin "daisyui";

@layer utilities {
    .btn {
        @apply bg-primary;
    }
}

@layer components {

}

@layer base {

}

계층은 우선순위는 유틸리티 > 컴포넌트 > 베이스 순이다. daisyUI 의 btn 을 베이스에서 재정의 해봐야 안먹힌다.