테일윈드에 대한 좋은 점은
원한다면 커스텀(사용자 정의) 할 수 있다는 것입니다
많은 구성과 맞춤 옵션들이 있고
공식 문서들이 그것에 대한 모든 것을 배우는
최고의 장소입니다
이제 여기서 저는 두 가지를 하고 싶습니다
예쁜 배경을 다시 불러오고 커스텀 폰트를 추가하는 것입니다
이를 위해 저는 index.css 파일로 돌아갑니다
그리고 여기에서 우리는 이 입력을 유지해야 합니다
그러나 그래도 우리는 고유의 css 선택자와
규칙을 이곳에 추가할 수 있습니다
테일윈드를 사용한다고 이것이 금지되지 않습니다
따라서 우리는 우리의 고유한 규칙을 설정할 수 있습니다
그리고 여기서 예를 들어
바디를 스타일링 하는 규칙을
다음과 같이 멋진 배경 이미지를 불러오기 위해 다시 호출합니다
이제 커스텀 폰트의 경우에는
저는 여기 index html 파일로
구글 폰트로부터 커스텀 폰트를 불러오고 있습니다
따라서 여전히 테일윈드 css 를 사용하더라도
이것은 import 됩니다
그리고 이제 테일윈드 css에
구성 파일의 도움을 받아 커스텀 폰트를 사용할 수 있도록 하는
새로운 유틸리티 클래스를 생성합니다
이를 위해 extend 아래 theme 설정에서
우리는 fontFamily 키를 추가할 수 있고
우리가 선택한 어느 식별자를
새로운 fontFamily로 등록할 수 있습니다
따라서 여기 fontFamily 라는 식별자는 우리가 정하지 않습니다
이것은 여기서 가지고 있는 제공된 폰트의 목록을 확장하고 싶다는 것을
테일윈드에게 말해줄 때 필요합니다
그러나 여기 title은
제가 테일윈드에 추가하고 싶은 새로운 폰트의 새로운 이름입니다
그리고 그것을 위한 값은 배열로
우리가 단일 따옴표 속 이중 따옴표 사이에서
폰트의 이름을 정해야 합니다
이것은 이상하게 보일 수 있지만
이것이 테일윈드가 작동하기 위해 필요로 되는 것입니다
그리고 이 cursive가 대체 메시지가 될 수 있습니다
그리고 이중 따옴표는 여기
구글로부터 불러온 특별한 폰트를 위해서만 필요합니다
이것이 추가된 후 이 파일을 저장하면
여러분은 돌아가서 여기 title에서
이 header.jsx 파일에서 h1 요소에
우리는 이제 font-title을 추가할 수 있습니다
그리고 보다시피 여기서 추천도 받습니다
그리고 이 fonttitle 클래스는
제가 구성에 새로운 타이틀인 font-family를 추가하였기에 가능합니다
이를 통해 이 모든 것을 저장하면
여기에 다음과 같은 모습을 얻게 됩니다
그리고 이제 이 paragraph의 모습을 개선할 수 있습니다
바로 paragraph로 돌아가서 text-stone 500과 같은
className을 줌으로써 말입니다
이것은 제가 여기서 사용하고 싶은 또 다른 내장 색상입니다
이로써 여러분은 이 바탕에
회색빛의 색깔이 있는 것을 볼 수 있습니다
이제 보다시피
테일윈드를 사용하는 것은
다음과 같이 유틸리티 클래스를 추가하는 것과 같고
따라서 당연히 잠재적 단점은
여기와 같이 긴 리스트의 classes를 마주하게 된다는 것입니다
만약 이것이 여러분이 선호하지 않는 것이라면
테일윈드는 가장 좋은 옵션이 아닐 수도 있습니다