React tailwindCSS 적용시키기

PostCSS는 웹 개발에서 CSS를 변환, 분석 및 확장하기 위한 도구입니다. 기본적으로 CSS 전처리기로 사용되지만, 다양한 플러그인을 통해 CSS를 수정하고 확장할 수 있는 강력한 도구입니다.
Autoprefixer 플러그인은 CSS에 자동으로 벤더 프리픽스를 추가하여 브라우저 호환성을 향상시킬 수 있습니다.
tailwindCSS는 PostCSS 플러그인 방식으로 동작하기 때문에
postcss, autoprefixer 와 함께 설치합니다.

npm i -D postcss autoprefixer tailwindcss

tailwindCSS는 PostCSS의 플러그 형태로 동작함으로
postcss.config.js 파일에 테일윈드 CSS 등록해야 합니다.
그리고 tailwindCSS는 PostCSS와 별도로 자신만의 구성파일이 있어야합니다.
2가지 구성 파일을 쉽게 생성할 수 있도록 다음 명령을 제공합니다.

npx tailwindcss init -p

postcss.config.js 파일이 생성됩니다.

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

tailwind.config.js 파일도 생성됐습니다.

module.exports = {
  //content 부분 수정.
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
    //**는 임의의 디렉토리를 의미하고, *는 임의의 파일 이름을 의미합니다. 
    //./src/**/*.{js,jsx,ts,tsx}는 src 디렉토리와 그 하위 디렉토리에 있는 
    //모든 JavaScript, JSX, TypeScript, TypeScript JSX 파일들을 포함합니다.
  theme: {
    extend: {},
  },
    //tailwind 플러그인 설치시 적용,require('받은 플러그인')
  plugins: [require('daisyui')],
}

마지막으로 가장 상위 CSS 파일 (src/index.css)에 다음 3줄을 추가하면 됩니다.

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