[Tailwind CSS] daisyUI

daisyUI

들어가며

• 테일윈드 CSS의 확장 UI 라이브러리인 dasiyUI에 대해 정리해본다.

 

daisyUI

개념

• 테일윈드 CSS를 확장한 UI 라이브러리
• 다양한 기본 스타일을 제공하여 빠르게 UI를 구성할 수 있도록 도와준다.
• 테일윈드 CSS의 유틸리티 클래스와 함께 사용된다.
• 버튼, 카드, 모달, 알림, 폼 요소 등 여러 가지 컴포넌트 스타일을 미리 정의해 둔 상태로 제공한다.
• daisyUI를 이용하면 UI를 쉽게 커스터마이징하고, 일관성 있는 디자인을 유지하면서 빠르게 개발할 수 있다.

 

특징

• 테일윈드 CSS와 완벽하게 호환되며, 추가적인 스타일링 없이 유틸리티 클래스를 사용할 수 있다.
• 일관된 디자인 시스템을 기반으로 하기 때문에, 프로젝트 전반에 걸쳐 일관된 UI를 유지할 수 있다.
• 버튼, 알림, 모달, 카드 등 UI 요소를 미리 정의된 클래스로 바로 사용할 수 있다.
• 기본적으로 모바일 및 데스크톱 환경에 맞춘 반응형 디자인을 지원한다.
• 자동으로 다크 모드를 지원하며, 간단한 설정으로 테마를 전환할 수 있다.
• 기본 스타일을 쉽게 덮어쓸 수 있어 프로젝트의 디자인에 맞게 수정할 수 있다.

 

개발 환경 구축하기

설치하기

$ npm install daisyui    # yarn add daisyui

 

daisyUI를 사용하기 위해서는 테일윈드 CSS가 설치되어 있어야 한다.

 

플러그인 추가하기 (@tailwind.config.js@)

• 테일윈드 CSS 설정 파일인 @tailwind.config.js@에 daisyUI를 플러그인(@plugin@)으로 추가해준다.

./tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [
    require('daisyui'),    // daisyUI 추가
  ],
}

 

사용하기

• 아래의 코드는 테일윈드 CSS만 사용한 코드이다.

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Primary Button
</button>

 

• 아래의 코드는 daisyUI를 이용한 코드이다.

<button class="btn btn-primary">
  Primary Button
</button>

 

dasiyUI를 이용하면 미리 정의된 컴포넌트 클래스를 사용하여 코드가 간결해진다.

 

 

참고 사이트

daisyUI — Tailwind CSS Components ( version 4 update is here )

Install daisyUI as a Tailwind CSS plugin — Tailwind CSS Components ( version 4 update is here )