TailwindCSS

[공식] https://tailwindcss.com/docs/installation/using-postcss
[참고] https://wonny.space/writing/dev/hello-tailwind-css

프로젝트 생성

1. 'my-tailwind-project'라는 이름의 새로운 React 프로젝트 생성하기

   npx create-react-app my-tailwind-project

2. 프로젝트 디렉토리로 이동

   cd my-tailwind-project

3. Tailwind CSS와 PostCSS 플러그인 설치

   npm install -D tailwindcss postcss autoprefixer

4. 설정 파일 생성

   npx tailwindcss init

이러고 나서 해당 프로젝트 열어서 했음

5. postcss.config.js에 tailwindcss와 autoprefixer 추가

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

6. CSS 파일 생성
   src 폴더 내에 main.css 파일을 생성하고 아래와 같이 작성

   @import 'tailwindcss/base';
   @import 'tailwindcss/components';
   @import 'tailwindcss/utilities';

7. package.json 수정

   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "build:css": "postcss src/main.css -o src/index.css"
   }

8. CSS 빌드
   src/index.css 파일이 생성되고 이 파일을 사용하여 Tailwind CSS를 적용 가능!

   npm run build:css

9. React 애플리케이션에서 사용
   src/index.js 파일을 열어서 import문 추가

   import './index.css';

   이제 Tailwind CSS가 React 애플리케이션에서 사용됨!