Frontend/Tailwind CSS

이번 포스팅에서는 CSS 프레임워크인 Tailwind CSS에서 커스텀 컬러를 등록하는 방법을 다룬다. 1. Tailwind CSS의 컬러 커스터마이징 Tailwind는 기본값으로 지정된 Color Palette을 변경하거나, Alias를 붙이거나, 특정 색상에 이름을 붙여서 사용할 수 있게 하는 기능을 제공한다. 모든 작업은 tailwind.config.js(혹은 ts) 를 수정해서 간단하게 변경할 수 있다. 2. Color Palette 변경하기 Tailwind는 Default Color Palette를 제공해서 톤에 맞는 색상을 편하게 사용할 수 있다. 만약 기본 팔레트가 마음에 들지 않는 경우에는 변경할 수 있다. 예를 들자면 팔레트를 보다 작은 단위로 사용할 수 있게 50 단위의 색상을 추가하거..

이번 포스팅에서는 CSS 프레임워크인 Tailwind CSS에서 커스텀 폰트를 선택해 등록하는 방법을 다룬다. 1. 커스텀 폰트 찾기 프런트엔드 개발을 하다 보면 밋밋한 기본 폰트 대신 개성 있는 폰트를 적용하고 싶을 때가 있다. 눈누(https://noonnu.cc/) 는 다양한 폰트를 쉽게 찾을 수 있는 유용한 서비스다. 적용하고 싶은 폰트를 눈누에서 발견했으면 웹폰트로 사용 부분을 복사한다. 2. 폰트 등록하기 다음은 전역 CSS파일에 앞서 복사한 '웹폰트로 사용'의 @font_face를 붙여 넣는다. 전역 CSS파일은 global.css, tailwind.css, application.css 등 프로젝트 컨벤션에 따라 다르니 각자 확인 해야 한다. 나는 Remix 프레임워크로 개발 중이고 Tail..