Tailwind CSS 플러그인 daisyUI 소개: “클래스만으로” 빠르게 UI 만들기
Tailwind CSS는 유틸리티 클래스 기반이라 자유도가 높지만, 버튼/카드/모달 같은 컴포넌트를 매번 조합해서 만드는 과정이 번거로울 수 있습니다. daisyUI는 Tailwind 위에 “컴포넌트 클래스 + 테마”를 얹어, 설계·스타일링 시간을 크게 줄여주는 플러그인입니다.
설치 및 설정 방법은 사용하는 프레임워크(Next.js, Vite, Remix 등)마다 조금씩 다릅니다. 이 글에서는 설치가 완료되어 있다는 가정으로 설명합니다. 설치부터 진행해야 한다면 daisyUI 공식 문서의 설치 가이드를 참고하세요:
daisyUI란?
daisyUI는 Tailwind CSS의 플러그인으로, 자주 쓰는 UI 패턴을 “컴포넌트 클래스”로 제공합니다. 즉, Tailwind의 유틸리티를 일일이 조합해 만드는 버튼/카드/모달 같은 것들을 btn, card처럼 의미 있는 짧은 클래스로 바로 꺼내 쓰는 방식입니다.
- 컴포넌트 클래스:
btn,card,navbar,modal등 바로 쓸 수 있는 UI 패턴 - 테마 시스템:
data-theme="light"같은 방식으로 테마를 쉽게 전환 - Tailwind와의 자연스러운 결합: Tailwind 유틸리티로 미세 조정 가능
처음 접했을 때 가장 크게 체감되는 장점은 하나입니다.
- 렌더링 결과는 비슷하게 만들되, HTML 작성은 훨씬 짧아진다
아래 예시는 같은 “Primary 버튼”과 “카드 + 액션 버튼”을 만든다고 가정했을 때, daisyUI를 쓰는 경우와 안 쓰는 경우의 HTML 차이를 보여줍니다.
daisyUI를 쓸 때 vs 안 쓸 때: 결과는 같고, HTML은 얼마나 줄어들까?
1) Primary 버튼
(A) Tailwind만 사용 — 스타일을 만들기 위해 유틸리티를 조합해야 합니다.
<button
class="inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium
bg-blue-600 text-white shadow-sm hover:bg-blue-700
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
disabled:opacity-50 disabled:pointer-events-none"
>
Primary
</button>
(B) daisyUI 사용 — 같은 버튼을 더 짧은 컴포넌트 클래스로 표현합니다.
<button class="btn btn-primary">Primary</button>
포인트는 “Tailwind가 불가능해서”가 아니라, 매번 반복되는 조합을 daisyUI가 기본값으로 묶어준다는 점입니다. 그래서 화면을 빨리 채우고, 이후에 Tailwind로 디테일을 조정하는 흐름이 자연스럽습니다.
2) 카드 + 액션 버튼
(A) Tailwind만 사용 — 카드 컨테이너/타이틀/본문/액션 영역을 각각 조합합니다.
<div class="w-96 rounded-2xl bg-white shadow-xl">
<div class="p-6">
<h2 class="text-lg font-semibold">Card title</h2>
<p class="mt-2 text-sm text-slate-600">
같은 형태의 카드를 여러 곳에서 쓰다 보면 클래스가 길어지고 중복이 늘어납니다.
</p>
<div class="mt-4 flex justify-end">
<button
class="inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium
bg-blue-600 text-white shadow-sm hover:bg-blue-700
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
>
확인
</button>
</div>
</div>
</div>
(B) daisyUI 사용 — 카드의 “역할”을 나타내는 클래스가 먼저 보이고, 필요한 경우 Tailwind로 보완합니다.
<div class="card w-96 bg-base-100 shadow-xl">
<div class="card-body">
<h2 class="card-title">Card title</h2>
<p>
daisyUI는 반복되는 UI 골격을 컴포넌트 클래스로 제공해 HTML이 짧아집니다.
</p>
<div class="card-actions justify-end">
<button class="btn btn-primary">확인</button>
</div>
</div>
</div>
정리하면, daisyUI는:
- 클래스 길이를 줄여 가독성을 올리고
- 반복되는 UI 패턴의 기본값을 통일해주며
- 테마까지 포함한 일관성을 빠르게 확보하게 해줍니다.
다음 섹션에서 이 “테마”가 왜 특히 편한지 이어서 보겠습니다.
테마 시스템: 다크모드/브랜드 테마가 쉬워지는 이유
daisyUI의 강점은 테마 전환입니다. 기본적으로 CSS 변수 기반 테마를 제공해서, 앱 전반의 색/배경/텍스트 톤이 자연스럽게 바뀝니다.
HTML에 테마 적용
<html data-theme="light">
<body>
<button class="btn btn-primary">Hello</button>
</body>
</html>
자바스크립트로 테마 토글 예시
const html = document.documentElement;
function toggleTheme() {
const next = html.getAttribute("data-theme") === "dark" ? "light" : "dark";
html.setAttribute("data-theme", next);
}
이 방식의 장점:
- 컴포넌트별로 색상을 다시 지정하기보다 전역 테마 전환으로 해결
- 디자인 시스템(색/톤)을 프로젝트 초반에 빠르게 안정화 가능
Tailwind와 daisyUI를 함께 쓰자!
daisyUI는 “기본 형태”를 빠르게 잡고, Tailwind로 “디테일”을 맞추는 데 좋습니다.
예를 들어 버튼에 여백/정렬/반응형만 Tailwind로 추가:
<button class="btn btn-primary w-full sm:w-auto px-6">
저장
</button>
btn btn-primary: 컴포넌트 스타일(일관성)w-full sm:w-auto px-6: 레이아웃·반응형·미세 조정
언제 daisyUI가 특히 유리할까?
- MVP/프로토타이핑: “일단 예쁘게 동작하는 화면”을 빨리 만들고 싶을 때
- 대시보드/관리자 페이지: 반복되는 UI 패턴(테이블, 카드, 입력폼)이 많을 때
- 소규모 팀/1인 개발: 디자인 시스템에 시간을 많이 쓰기 어려울 때
- 테마가 중요한 서비스: 다크모드, 브랜드별 스킨을 쉽게 운영하고 싶을 때
고려할 점
- 클래스 네이밍이 daisyUI 방식으로 추가됩니다.
(예:
btn,card,navbar등) → 팀 컨벤션과 충돌 여부 체크 - 디자인 커스터마이징이 매우 특이한 경우엔 “기본 컴포넌트 스타일”이 오히려 제약이 될 수 있습니다. 다만 Tailwind 유틸리티로 대부분 해결 가능하고, 필요하면 컴포넌트 단위를 재정의하는 접근도 가능합니다.
마무리
daisyUI는 Tailwind의 생산성을 더 끌어올리는 “실전형” 플러그인입니다. 컴포넌트 클래스와 테마 시스템 덕분에, UI를 빠르게 구축하고 일관된 스타일을 유지하기 쉬워집니다.
다음 글에서는:
- 프로젝트에 맞는 테마 선택/커스터마이징
- daisyUI에서 제공하는 테마란 무엇이고, 테마의 전환이 쉬운 이유는 무엇일까?
같은 내용을 더 깊게 다뤄볼 수 있습니다.