Tailwind CSS Plugins

2025.2.5 수요일의 공부기록

Tailwind CSS는 플러그인(Plugins) 시스템을 통해 기본 제공 유틸리티를 확장하거나, 새로운 컴포넌트와 스타일을 추가할 수 있다.
이번에는 공식 플러그인 설치 방법, 특히 daisyUI를 활용하여 빠르고 효율적인 UI 개발 방법을 중점적으로 다룬다.

---

Tailwind CSS Plugins란?

Tailwind CSS의 플러그인 시스템은 새로운 유틸리티 클래스나 컴포넌트를 추가하여 Tailwind의 기능을 확장할 수 있도록 도와준다.
공식적으로 제공되는 플러그인 외에도 커뮤니티 플러그인을 활용하거나, 사용자 정의 플러그인을 만들어 사용할 수 있다.

---

공식 플러그인 설치 및 사용법

📌 설치 방법

1. npm을 통한 플러그인 설치
   예: @tailwindcss/forms 플러그인 설치

   npm install -D @tailwindcss/forms

2. tailwind.config.js 파일에 플러그인 추가

   // tailwind.config.js
   module.exports = {
     content: ['./src/**/*.{html,js}'],
     theme: {
       extend: {},
     },
     plugins: [
       require('@tailwindcss/forms'),  // 플러그인 추가
     ],
   };

---

@tailwindcss/forms 플러그인

@tailwindcss/forms는 Tailwind CSS의 기본 스타일링 철학을 유지하면서 폼 요소의 스타일을 간단하게 재정의할 수 있도록 지원하는 플러그인이다.
이 플러그인을 통해 폼 요소의 기본 리셋과 커스터마이징이 쉬워진다.

✅ 설치 및 설정

1. 설치

   npm install -D @tailwindcss/forms

2. Tailwind 설정 파일에 플러그인 추가

   // tailwind.config.js
   module.exports = {
     plugins: [
       require('@tailwindcss/forms'),
     ],
   };

✅ 기본 사용 예제

<form class="space-y-4">
  <label class="block">
    <span class="text-gray-700">이메일</span>
    <input type="email" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm" placeholder="you@example.com" />
  </label>

  <label class="block">
    <span class="text-gray-700">메시지</span>
    <textarea class="mt-1 block w-full rounded-md border-gray-300 shadow-sm" rows="3"></textarea>
  </label>

  <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-md">
    제출하기
  </button>
</form>

📌 설명:

• 플러그인을 적용하면 기본 브라우저 스타일을 제거하고 일관된 디자인 시스템을 제공.
• rounded-md, shadow-sm 등을 사용하여 폼 필드에 Tailwind 스타일을 손쉽게 적용할 수 있다.

---

daisyUI: Tailwind CSS용 가장 인기 있는 컴포넌트 라이브러리

📌 daisyUI란?

daisyUI는 Tailwind CSS 기반의 컴포넌트 라이브러리로, UI 요소(Button, Card, Modal 등)를 간단하게 추가하고 커스터마이징할 수 있도록 설계된 플러그인이다.
Tailwind CSS의 유틸리티 기반 스타일링을 유지하면서 손쉽게 스타일이 적용된 컴포넌트를 사용할 수 있어, 개발 시간을 획기적으로 단축할 수 있다.

• 공식 사이트: daisyUI

---

✅ daisyUI 설치 방법

1. npm을 통한 설치

   npm install -D daisyui@latest

2. tailwind.config.js 파일에 플러그인 추가

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

---

✅ daisyUI 주요 특징

1. 미리 디자인된 컴포넌트 제공

   • 버튼, 카드, 모달, 폼, 네비게이션 바 등 다양한 UI 요소를 기본 제공.

2. 테마 지원

   • 다크 모드를 포함하여 다양한 테마를 지원하며, 프로젝트에 맞게 커스터마이징 가능.

3. Tailwind 유틸리티와의 호환성

   • Tailwind CSS의 기존 유틸리티 클래스와 함께 사용 가능, 필요한 경우 쉽게 오버라이드 가능.

---

daisyUI 컴포넌트 활용 예제

✅ 버튼(Button)

<button class="btn btn-primary">Primary 버튼</button>
<button class="btn btn-secondary">Secondary 버튼</button>
<button class="btn btn-accent">Accent 버튼</button>
<button class="btn btn-outline btn-error">Outline Error 버튼</button>

📌 설명:

• btn → daisyUI의 기본 버튼 클래스.
• btn-primary, btn-secondary, btn-accent → 다양한 색상 테마 적용.
• btn-outline btn-error → 외곽선 스타일 및 오류 테마 적용.

---

✅ 카드(Card)

<div class="card w-96 bg-base-100 shadow-xl">
  <figure>
    <img src="https://placeimg.com/400/225/arch" alt="건축물 이미지" />
  </figure>
  <div class="card-body">
    <h2 class="card-title">건축물 카드</h2>
    <p>이것은 daisyUI 카드 컴포넌트의 예제입니다.</p>
    <div class="card-actions justify-end">
      <button class="btn btn-primary">자세히 보기</button>
    </div>
  </div>
</div>

📌 설명:

• card, card-body, card-title, card-actions 등의 클래스를 사용해 빠르게 카드 컴포넌트를 구성할 수 있다.

---

✅ 모달(Modal)

<!-- 모달 트리거 버튼 -->
<label for="my-modal" class="btn">모달 열기</label>

<!-- 모달 본문 -->
<input type="checkbox" id="my-modal" class="modal-toggle" />
<div class="modal">
  <div class="modal-box">
    <h3 class="font-bold text-lg">모달 제목</h3>
    <p class="py-4">이것은 daisyUI 모달 컴포넌트입니다.</p>
    <div class="modal-action">
      <label for="my-modal" class="btn">닫기</label>
    </div>
  </div>
</div>

📌 설명:

• modal, modal-box, modal-action 등의 클래스를 활용해 모달 창을 구성할 수 있다.
• modal-toggle을 사용해 체크박스 기반으로 모달 열기/닫기 기능을 구현.

---

daisyUI 테마 활용

daisyUI는 다양한 테마를 제공하며, Tailwind 프로젝트에서 쉽게 적용할 수 있다.

✅ 테마 적용 방법

tailwind.config.js 파일에 테마 설정을 추가한다.

module.exports = {
  plugins: [require('daisyui')],
  daisyui: {
    themes: ['light', 'dark', 'cupcake', 'bumblebee'],  // 사용할 테마 설정
  },
};

✅ 테마 변경 방법

<div data-theme="cupcake">
  <button class="btn btn-primary">Cupcake 테마 버튼</button>
</div>

<div data-theme="dark">
  <button class="btn btn-primary">다크 테마 버튼</button>
</div>

📌 설명:

• data-theme="테마이름" 속성을 사용해 페이지나 특정 요소에 테마 적용 가능.

---

Tailwind CSS 플러그인과 daisyUI를 활용해 개발 효율성을 극대화하고, 깔끔하고 일관성 있는 UI를 빠르게 구축해보자!
자세한 내용은 daisyUI 공식 문서와 Tailwind CSS 플러그인 문서를 참고하자.