TODO LIST - 6.tailwind 커스터마이징, 전역 글꼴 설정

tailwind extend 를 통해 본인이 원하는 색상과 크기를 변수로 저장할수 있다

 

 

tailwind.config.js파일에서 extend 객체를 이용하면된다 

 

extend를 통해 기본 설정을 확장할수 있다. 기존 설정을 덮어쓰지 않고, 추가적인 값이나 옵션을 병합할때 유용하다

https://tailwindcss.com/docs/theme

Theme Configuration - Tailwind CSS

https://github.com/tailwindlabs/tailwindcss/blob/main/stubs/config.full.js

(defualt theme을 확인해 원하는 설정을 바꿔주자)

tailwindcss/stubs/config.full.js at main · tailwindlabs/tailwindcss

 

 

extend를 통해 색상, fontWeight, 반응형 디자인 픽셀들을 정의해줬다

 

 

원하는 곳에서 커스터마이징한 대로 tailwind를 사용하면 된다

스타일링이 적용된 모습

 

 

 

프로젝트 진행을 위해 Pretendard 글꼴을 전역 글꼴로 설정해주기로 했다

 

 

 

 

우선 index.html 파일에 link 태그로 pretendard 글꼴 cdn을 넣어준다

 

theme을 통해 기본 스타일링 설정을 정의하거나 수정할수 있는데 그걸 이용해 기본 글꼴을 바꿔준다

 

그리고 tailwind.config파일에서 theme 객체안에 fontFamilt를 설정 해주면 되는데 처음으로는 내가 전역으로 설정할 Pretendard 글꼴을 넣어주고 그 글꼴에 설정 안될때를 대비해 기본 글꼴을 저장해주면 완료!