요즘 tailwind CSS를 사용해서 스타일을 적용하고 있는데 기존에 사용하던 CSS와는 달라
스타일을 적용하다가 막히는 부분이 생긴다.
그래서 공식 문서를 참고하여 적용하고 있다.
아래 사진과 같이 기존 css 문법에 해당하는 TailWind CSS 문법을 알려줘서 굉장히 보기가 편하다.
[Custom Font 사용하기 ]
여러 사이트에서 무료 폰트들을 많이 제공하고 있다.
나는 보통 https://noonnu.cc/ 여기서 많이 사용한다.
다양한 예쁜 폰트들을 무료로 제공해줘서 매우 유용하게 쓰고있다.
원하는 폰트를 찾아 클릭해서 들어가면 사진과 같이 font-face 값이 제공된다.
해당 값을 그대로 복사하여 nextJS 프로젝트의 globals.css 파일에 넣어주면 된다.
그리고 추가한 폰트를 nextJs 프로젝트에 존재하는 tailwind.config.js 파일에 사진과 같이 넣어주면 된다.
그리고 실제 코드에서 아래와 같이 사용하면 된다.
<ul className="font-establishRetrosansOTF">
[Custom Color 사용하기 ]
마찬가지로 원하는 색상을 적용하고 싶으면 tailwind.config.js 파일에 아래와 같이 원하는 색상을 등록해주면 된다.
아래 코드와 같이 등록한 색상을 사용하면 된다.
<ul className="text-customBlue">