리엑트 tailwindcss 프로젝트 설정

react 프로젝트 생성 실행 순서

1. npm create-react-app projectName --template typescript

2. chance luxon @fontsource/material-icons 설치
   npm i chance luxon

3. 개발 의존성
   npm i -D @types/chance @types/luxon

4. tailwindcss 설치
   postcss, autoprefixer도 함꼐 설치 해 준다.
   npm i -D postcss autoprefixer tailwindcss@3

5. tailwindcss 구성
   npx tailwindcss init -p

6. daisyui 설치
   tailwindcss는 저수준 CSS 컴포넌트를 지원하지 않으므로, daisyui를 설치
   npm i -D daisyui@3

7. @tailwindcss/line-clamp 설치
   npm i -D @tailwindcss/line-clamp

8. tailwind.config.js 설정

   1) content 설정
   content:["./src/*/.{js.jsx,ts,tsx}"]

   2) safelist, plugins 설정
   /*
   line-clamp로 시작하는 클래스 이름을 동적으로 조합하더라도
   정상으로 동작하도록 트리 쉐이킹 대상에서 제거하는 코드
   */
   safelist : [{pattern:/^line-clamp-(\d+)$/}]
   3) line-clamp, daisyui 플러그인 등록
   plugins : [require('@tailwindcss/line-clamp'), require('daisyui')]

   /* @type {import('tailwindcss').Config} _/
   module.exports = {
   content: ["./src/*/_.{js.jsx,ts,tsx}"],
   theme: {
   extend: {},
   },
   safelist:[{pattern:/^line-clamp-(\d+)$/}]
   plugins: [require('@tailwindcss/line-clamp'), require('daisyui')],
   }

9. index.css에 tailwindcss 기능 반영
   index.css 상단에 base, components, utilities 추가
   @tailwind base;
   @tailwind components;
   @tailwind utilities;

10. 타입 스크립트 코드 작성