🚀 FastAPI 기반 로컬 LLM + RAG 챗봇 – Tailwind CSS 및 UI 라이브러리 설정 (DaisyUI + ShadCN 반영)

🚀 FastAPI 기반 로컬 LLM + RAG 챗봇 – 3.1.3 Tailwind CSS 및 UI 라이브러리 설정 (DaisyUI + ShadCN 반영)

이번 글에서는 Next.js에서 Tailwind CSS를 활용하여 UI를 구성하는 방법과 함께 추가적인 UI 라이브러리를 설정하는 과정을 다룹니다.
✅ Tailwind CSS를 활용한 스타일링, DaisyUI 및 ShadCN 설정 및 활용법을 소개합니다.

---

📌 1. Tailwind CSS 및 UI 라이브러리 설치

Next.js에서 Tailwind CSS와 DaisyUI, ShadCN을 사용하려면 관련 패키지를 설치해야 합니다.
아래 명령어를 실행하여 Tailwind CSS, PostCSS, DaisyUI, ShadCN을 설치합니다.

✅ 1.1 Tailwind CSS 및 DaisyUI, ShadCN 설치

npm install tailwindcss @tailwindcss/postcss daisyui@latest shadcn

ShadCN을 설정하려면 초기화를 진행해야 합니다.

npx shadcn init

설정 후 컴포넌트를 추가할 수 있습니다.
예를 들어 버튼 컴포넌트를 추가하려면 아래 명령어를 실행합니다.

npx shadcn add button

✅ 이제 Tailwind CSS, DaisyUI, ShadCN을 사용할 준비가 완료되었습니다! 🚀

---

📌 2. Tailwind CSS 및 DaisyUI 설정

반응형

설치 후, Tailwind CSS를 적용하기 위해 PostCSS 설정 파일을 추가하고 DaisyUI를 불러옵니다.

✅ 2.1 PostCSS 설정

📌 postcss.config.mjs 파일 생성 및 수정

/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};
export default config;

---

✅ 2.2 Tailwind CSS 및 DaisyUI 불러오기

Tailwind CSS와 DaisyUI를 사용하려면 전역 CSS 파일(app/globals.css)에서 불러와야 합니다.

📌 app/globals.css 수정

@import "tailwindcss";
@plugin "daisyui";

✅ 이제 Tailwind CSS와 DaisyUI를 사용할 준비가 완료되었습니다! 🚀

---

📌 3. DaisyUI 및 ShadCN UI 컴포넌트 적용 예제

DaisyUI와 ShadCN을 활용하면 버튼, 카드, 네비게이션 바 등의 UI 요소를 쉽게 구성할 수 있습니다.

✅ 3.1 DaisyUI 버튼 적용 예제

DaisyUI의 btn 클래스를 활용하면 즉시 반응형 스타일이 적용된 버튼을 사용할 수 있습니다.

📌 src/components/DaisyButton.tsx 파일 추가

export default function DaisyButton() {
  return <button className="btn btn-primary">DaisyUI 버튼</button>;
}

---

✅ 3.2 DaisyUI 카드 컴포넌트 적용 예제

📌 src/components/Card.tsx 파일 추가

export default function Card() {
  return (


## DaisyUI 카드

이것은 DaisyUI의 카드 컴포넌트 예제입니다.

더 보기

  );
}

✅ DaisyUI를 활용하면 스타일을 직접 작성하지 않고도 손쉽게 UI를 구성할 수 있습니다! 🚀

---

✅ 3.3 ShadCN 버튼 적용 예제

ShadCN에서 추가한 버튼을 사용하려면 아래와 같이 설정할 수 있습니다.

📌 src/components/ShadcnButton.tsx 파일 추가

import { Button } from "@/components/ui/button";

export default function ShadcnButton() {
  return <Button variant="default">ShadCN 버튼</Button>;
}

✅ ShadCN을 활용하면 DaisyUI보다 더욱 정교한 UI를 Tailwind 기반으로 구성할 수 있습니다. 🚀

---

📌 4. DaisyUI 및 ShadCN 적용된 UI 페이지 만들기

아래 예제에서는 Tailwind CSS + DaisyUI + ShadCN을 활용하여 UI를 구성합니다.

📌 홈 페이지에서 DaisyUI 및 ShadCN 적용 (src/app/page.tsx)

import DaisyButton from "@/components/DaisyButton";
import ShadcnButton from "@/components/ShadcnButton";
import Card from "@/components/Card";

export default function Home() {
  return (
    <div className="min-h-screen flex flex-col items-center justify-center bg-gray-100 space-y-6">
      <h1 className="text-4xl font-bold text-blue-600">Tailwind + DaisyUI + ShadCN</h1>
      <p className="text-lg text-gray-700">Next.js에서 다양한 UI 라이브러리를 활용한 예제입니다.</p>
      <div className="flex gap-4">
        <DaisyButton />
        <ShadcnButton />
      </div>
      <Card />
    </div>
  );
}

✅ 이제 Next.js에서 Tailwind CSS와 DaisyUI + ShadCN을 활용하여 더욱 멋진 UI를 만들 수 있습니다! 🚀

---

📌 5. 프로젝트 실행 및 확인

✅ 5.1 개발 서버 실행

아래 명령어를 실행하여 Next.js 프로젝트를 실행합니다.

npm run dev

✅ http://localhost:3000에서 Tailwind CSS, DaisyUI, ShadCN이 적용된 웹 페이지를 확인할 수 있습니다!

---

📌 6. 결론 및 다음 단계

✅ Tailwind CSS를 활용한 스타일링을 배웠습니다.
✅ DaisyUI 및 ShadCN을 설치하고 활용하는 방법을 익혔습니다.
✅ PostCSS 설정을 DaisyUI 및 ShadCN에 맞게 수정하였습니다.
✅ Next.js에서 DaisyUI + ShadCN 기반 UI 컴포넌트를 적용하는 방법을 실습하였습니다.

🚀 다음 글에서는 "3.2 Next.js 라우팅 및 페이지 구성"을 진행합니다!