React 예제에 DaisyUI 설치

이 섹션에서는 데이지 UI를 react js에서 tailwind css 구성 요소로 사용하는 방법을 살펴봅니다.

도구 사용

리액트 JS

순풍 CSS 3.v

DaisyUI(플러그인)

예 1

ReactJS에서 Daisy UI 단계별 설치
reactjs에 tailwind css v3를 설치 및 설정합니다. tailwind css doc을 읽거나 아래 기사를 읽을 수 있습니다.

Install & Setup Vite + React + Typescript + Tailwind CSS 3

데이지유이 설치

npm i daisyui

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [require("daisyui")],
}

서버 실행

npm run dev

예 2

Create TW를 사용하여 React에 Daisy UI Tailwind 설치
npx로 react js 프로젝트 생성:

npx create-tw@latest
# OR
npx create-tw@latest <project-name> --template <id>

원사로 반응 js 프로젝트를 만듭니다.

yarn create tw
# OR
yearn create tw <project-name> --template <id> 

ReactJS를 선택합니다.

? Project name reactjs-daisyui
? App type (Use arrow keys)
 Next.js (create-next-app) 
 Vanilla (create-vite) 
 ❯ React (create-vite) 
 Vue (create-vite) 
 Astro (create-astro) 
 Svelte Kit (create-svelte) 
 Preact (create-vite) 
 Solid (degit solidjs/templates/js) 

타이프스크립트를 선택합니다.

? What language will your project be written in? (Use arrow keys)
❯ TypeScript 
 JavaScript 

Daisy UI 플러그인을 선택합니다.

? Which plugins would you like to include? (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
 ◯ @tailwindcss/typography
 ◯ @tailwindcss/forms
 ◯ @tailwindcss/aspect-ratio
 ◯ @tailwindcss/line-clamp
❯◯ daisyui
 ◯ prettier-plugin-tailwindcss

프로젝트로 이동하여 서버를 실행합니다.

cd reactjs-daisyui
npm run dev

src/App.tsx

import React from "react";

function App() {

  return (
    <div>
      <div className="h-screen justify-center items-center flex flex-col">
        <div className="card w-96 bg-base-100 shadow-xl">
          <figure>
            <img src="https://placeimg.com/400/225/arch" alt="Daisy UI with React" />
          </figure>
          <div className="card-body">
            <h2 className="card-title">Install Daisy UI Plugin in React JS</h2>
            <p>
            install & setup tailwind daisyui in React JS
            </p>
            <div className="card-actions justify-end">
              <button className="btn btn-primary">Buy Now</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;