tailwindCSS 설치 및 리액트 세팅

npm install -D tailwindcss postcss autoprefixer

터미널에 tailwindcss, postcss, autuprefixer 설치

npm install -D prettier prettier-plugin-tailwindcss

기존 headwind 확장기능 충돌 문제로 아래 tailwind 전용 prettier 모듈 설치


.prettierrc파일 문장 추가

“plugins” : ["prettier-plugin-tailwindcss"]

---

여기서 npm install 구문 설치 시 -D라는 명령어를 추가했다. 실제 package.json에 dependencies가 아닌 devDependencies항목에 설치가 되어있따.
또한 tailwind와 postcss, autuprefixer가 추가로 설치되어있는데 일단 tailwind를 사용하기 위한 설치 및 세팅에 집중하기 위해 tailwind초기화부터 해보자

npx tailwindcss init -p

tailwind 초기화 후  폴더구조를 확인해보면 postcss.config.js 와 tailwind.config.js 추가 되어있다.

postcss.config.js

export default{
	plugins:{
		tailwindcss : {},
		tautuprefixer : {},
	}
}

index.css

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