본문 바로가기

TailwindCSS

TailwindCSS(0) 시작하기

우선 tailwindcss를 다운하자

npm i -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

 

다운 이후 tailwind.config.js 파일에서 content를 설정해줘야 하는데 여기서는 어디서 tailwindcss를 사용할 건지 알려줘야 한다

여기서 필자는 모든 pages 폴더 안에 js jsx ts tsx 파일들 모두 tailwindcss를 적용시킬 거 기 때문에 line 4에 설정을 해주었다

line 5에서는 pages 폴더와 비슷하게 components 폴더 안에 모두 적용시킬 거 기 때문에 설정을 또 해준걸 볼 수 있다

 

마지막으로 styles/globals.css 파일로 가서

d

이렇게 tailwind 설정을 마지막으로 해주면 끝난다