이 문서에서는 Tailwind 유틸리티를 사용하여 요소의 글꼴 모음을 제어하는 절차를 제공합니다.
Tailwind 유틸리티를 사용하여 요소의 글꼴 모음을 제어하는 방법은 무엇입니까?
Tailwind에서 요소의 글꼴 모음을 제어하려면 요소에 다음 유틸리티를 제공해야 합니다.
폰트- { 글꼴 모음 }
위에 제공된 유틸리티를 사용하여 설정할 수 있는 세 가지 기본 글꼴 모음이 있습니다. 여기에는 “ 가는 장식 선 ', ' 없이 ', 그리고 ' 단핵증 '.
'를 사용한 데모에서 이러한 글꼴 모음을 사용해 보겠습니다. 글꼴-{글꼴군} ” 클래스를 통해 작동 방식을 확인하세요.
< div 수업 = ' 글꼴-세리프 둥근-xl 그림자-lg 텍스트-센터 py-2 my-2 bg-green-100 ' >
FONT-SERIF 제품군입니다.
< / div >
< div 수업 = ' 글꼴-산 반올림-xl 그림자-lg 텍스트-센터 py-2 my-2 bg-blue-100' >
FONT-SANS 제품군입니다.
< / div >
< div 수업 = '글꼴-모노 반올림-xl 그림자-lg 텍스트-센터 py-2 my-2 bg-red-100' >
FONT-MONO 제품군입니다.
< / div >
위 코드에 대한 설명은 다음과 같습니다.
- '를 사용하여 생성된 세 개의 div 요소가 있습니다. ”이며 다양한 글꼴 모음이 제공됩니다.
- “ 글꼴-{가족} ” 클래스는 요소의 텍스트에 지정된 글꼴 모음을 제공합니다.
- “ 반올림-xl ” 클래스는 div 요소의 모서리를 둥글게 만듭니다.
- “ 섀도우-LG ” 클래스는 div 요소에 큰 그림자를 제공합니다.
- “ 텍스트 센터 ”는 텍스트를 요소의 중앙에 정렬합니다.
- “ py-2 ' 그리고 ' 내-2 ” 수업은 “을 제공합니다 8px ” 요소의 상단 및 하단 방향의 패딩 및 여백.
- “ bg-{색상}-{번호} ” 클래스는 요소의 배경을 지정된 색상으로 설정하는 역할을 담당합니다.
출력에서 각 요소마다 다른 글꼴 모음이 있음이 분명합니다.
호버 기능을 사용하여 요소의 글꼴 모음을 동적으로 변경할 수도 있습니다. 설명을 위해 아래 코드를 살펴보세요.
< div 수업 = 'my-2 rounded-xl bg-slate-100 py-2 텍스트 센터 글꼴-모노 섀도우-lg hover:font-serif' >이것은 기본적으로 FONT-MONO 제품군입니다< / div >위에 제공된 코드에서 ' hover: 글꼴-{가족} ” 유틸리티는 마우스 커서를 해당 요소 위로 가져가자마자 해당 요소의 글꼴 모음을 변경하는 역할을 합니다. 사용자가 텍스트 위로 마우스 커서를 가져가면 텍스트의 글꼴 모음이 변경되는 것을 출력에서 볼 수 있습니다.
이는 Tailwind에서 요소의 글꼴 모음을 제어하는 것입니다.
결론
Tailwind에서는 '를 사용하여 요소에 글꼴 모음을 할당할 수 있습니다. 글꼴-{가족} ' 수업. Tailwind에서 제공하는 세 가지 기본 글꼴 모음이 있습니다. 즉, ' 없이 ', ' 가는 장식 선 ', 그리고 ' 단핵증 '. 사용자는 요소 상태가 변경되면 요소의 글꼴 모음을 변경할 수도 있습니다. 이 도움말에서는 Tailwind에서 요소의 글꼴 모음을 제어하는 절차를 제공했습니다.