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