react에서 tailwind 사용법

공식페이지
https://tailwindcss.com/docs/installation

1. 테일윈드 설치
   npm install -D tailwindcss
   yarn add tailwindcss

2. tailwind.config.js 파일 생성하기
   npx tailwindcss init

3. tailwind.config.js의 content부분 변경

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

4. css에 테일윈드 적용
   index.css 파일에 다음 세줄을 추가해 테일윈드를 적용시킨다.

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

5. jsx에서 테일윈드 써보기
   기본 index.css 가 모든 파일에 적용되도록 App.js에서 css파일을 추가한다.

import "./index.css";

<div className="logout bg-blue-700" onClick={logoutClick}>로그아웃</div>

참고
https://www.youtube.com/watch?v=arftp8kFBBg

https://velog.io/@hokim/React-2-React-Tailwind-%EC%84%B8%ED%8C%85