[Next.js] DaisyUI

hw Y·2024년 6월 25일

DaisyUI는 Tailwind CSS를 기반으로 하는 UI 컴포넌트 라이브러리입니다. DaisyUI는 다양한 스타일과 컴포넌트를 제공하여 Tailwind CSS 프로젝트에서 빠르고 쉽게 UI 요소를 만들 수 있게 해줍니다. DaisyUI의 주요 특징과 사용법을 알아보겠습니다.

주요 특징

Tailwind CSS 기반

DaisyUI는 Tailwind CSS를 기반으로 하여, Tailwind의 유틸리티 클래스들과 함께 사용할 수 있습니다. Tailwind CSS의 강력한 기능을 그대로 활용하면서 UI 컴포넌트를 쉽게 만들 수 있습니다.

다양한 컴포넌트

DaisyUI는 버튼, 카드, 모달, 네비게이션 바, 폼, 채팅 버블 요소 등 다양한 UI 컴포넌트를 제공합니다. 이러한 컴포넌트들은 미리 스타일링 되어 있어 빠르고 편리하게 사용할 수 있습니다.
https://daisyui.com/components/

이렇게 미리보기와,html,jsx 코드를 미리 지원해줘서 사용이 매우 편리합니다.

다크 모드 지원

DaisyUI는 다크 모드를 기본적으로 지원하여, 클래스 하나만 추가하면 다크 모드로 쉽게 전환할 수 있습니다. 다크 뿐만아니라 여러가지 테마로 전환 가능합니다.

<html lang="en" data-theme="dark">

커스터마이징 가능

DaisyUI의 컴포넌트들은 Tailwind CSS의 유틸리티 클래스를 사용하여 쉽게 커스터마이징할 수 있습니다. 필요에 따라 스타일을 변경하거나 추가할 수 있습니다.
https://daisyui.com/docs/customize/

플러그인 형태

DaisyUI는 Tailwind CSS의 플러그인 형태로 제공되어, Tailwind CSS 설정 파일에 추가하여 사용할 수 있습니다.

사용법

1.설치

DaisyUI를 프로젝트에 추가하는 방법입니다. npm을 사용하여 설치할 수 있습니다.

npm install daisyui
or
yarn add -D daisyui@latest

2.Tailwind CSS 설정 파일 수정

tailwind.config.js 파일에 DaisyUI를 플러그인으로 추가합니다.

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {},
  },
  plugins: [
    require('daisyui'), // 추가
  ],
}

3.CSS 파일 수정

Tailwind CSS의 지시문을 포함한 CSS 파일에 DaisyUI를 추가합니다.

/* globals.css 상단*/
@tailwind base;
@tailwind components;
@tailwind utilities;

4.HTML에서 DaisyUI 컴포넌트 사용

HTML 파일에서 DaisyUI의 컴포넌트를 사용하여 UI 요소를 생성할 수 있습니다. 예를 들어, 버튼과 카드 컴포넌트를 사용하는 방법은 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="path/to/your/tailwind.css" rel="stylesheet">
    <title>Document</title>
</head>
<body class="bg-gray-100 p-4">
    <button class="btn btn-primary">Primary Button</button>

    <div class="card w-96 bg-base-100 shadow-xl">
        <figure><img src="image.jpg" alt="A beautiful scenery" /></figure>
        <div class="card-body">
            <h2 class="card-title">Card Title</h2>
            <p>If a dog chews shoes whose shoes does he choose?</p>
            <div class="card-actions justify-end">
                <button class="btn btn-primary">Buy Now</button>
            </div>
        </div>
    </div>
</body>
</html>