React에서 Flowbite Tailwind를 설치하는 방법

이 섹션에서는 vite 도구를 사용하여 반응에서 flowbite tailwind를 설치 및 설정합니다. 이 튜토리얼은 React에서 Flowbite Tailwind의 설치 및 구성 프로세스를 안내합니다. Flowbite에는 카드, 버튼, 알림 등과 같은 많은 구성 요소가 포함되어 있습니다.

Vite를 사용하여 반응 프로젝트 만들기

npm을 통해 react vite를 설치합니다.

npm create vite@latest

반응을 선택합니다.

✔ Project name: … flowbite-react
? Select a framework: › - Use arrow-keys. Return to submit.
  vanilla
  vue
❯  react
  preact
  lit
  svelte

다음으로 typescript를 선택합니다.

✔ Select a framework: › React
? Select a variant: › - Use arrow-keys. Return to submit.
  JavaScript
❯  TypeScript

프로젝트로 이동하고 npm을 설치 및 실행합니다.

cd flowbite-react
npm install
npm run dev

React에 Tailwind CSS 설치

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

tailwind.config.js 또는 tailwind.config.cjs

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

React에 Flowbite Tailwind CSS 설치

Tailwind Flowbite를 React에 설치하려면 터미널에서 다음 명령을 실행하세요.

npm i flowbite flowbite-react

다음으로 tailwind.config.js 또는 tailwind.config.cjs 파일 내에 플러그인으로 추가해야 합니다. 프로세스는 간단합니다. 구성 파일을 열고 아래 행을 추가하십시오.

tailwind.config.js 또는 tailwind.config.cjs

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

Flowbite 반응 구성 요소 테스트

src/App.tsx

import { Card } from 'flowbite-react';
import React from 'react';

function App() {
  return (
    <div className="h-screen flex justify-center items-center flex-col">
      <h1 className="text-2xl font-bold text-blue-600 mb-8 border-b-4 border-purple-600">
        Install Vite + React + Flowbite
      </h1>
      <div className="max-w-sm">
        <Card imgSrc="https://flowbite.com/docs/images/blog/image-1.jpg">
          <h5 className="text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
            Install & setup flowbite in react js
          </h5>
          <p className="font-normal text-gray-700 dark:text-gray-400">
            Here are the biggest enterprise technology acquisitions of 2021 so
            far, in reverse chronological order.
          </p>
        </Card>
      </div>
    </div>
  );
}

export default App;