Tailwind CSS 프로젝트 셋팅

1. 프로젝트 셋팅하기 (feat. Tailwind CSS)

평소처럼 React + typescript로 프로젝트를 셋팅했다.

다만, 이번에는 항상 쓰던 styled-components가 아닌 TailwindCSS를 사용해보기로 결정!

 

테일윈드 공식문서

 

1) tailwindcss, postcss, autoprefixer 설치

 

tailwindcss: Tailwind CSS 프레임워크
postcss: CSS 빌드 프레임워크
autoprefixer: 브라우저 호환 설정

npm install -D tailwindcss postcss autoprefixer

 

2) 설정파일 생성 (tailwind.config 파일이 생성된다)

npx tailwindcss init

 

 

3) index.css 파일 내용을 지우고 아래 내용 작성 

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

 

이제 적용이 되었다.. 괜히 블로그글 같은 걸 이것저것 보다가 삽질을 많이 했다...

믿고 따라가자 공식문서...

이제 className에 이것저것 넣어보며 테스트 해보면 끝~!

<div className="text-3xl font-bold underline text-yellow-500">
  Hello world!
</div>

 

 

 

* tailwind setup 과정에서 삽질한 부분

1) craco를 설치하라는 블로그 글들이 많았는데, 아마도 tailwind 2.xx 버전에서 적용되는 부분이었던 것 같다...

2022.02.06 기준 최신버전인 tailwind 3.0.18에서는 craco 같은 것 설치할 필요 없었음...

 

 

 

2) package.json에 css파일을 build하는 과정을 추가하는 것 또한 필요 없는 일이었음

 

(npx tailwindcss -i ./css 경로/본인 파일.css -o ./저장할 경로/출력 파일.css ... 뭐 이런 과정)