이 도움말에서는 다음 개요를 사용하여 Tailwind에서 텍스트 스타일을 지정하기 위한 가이드를 제공합니다.
Tailwind에서 텍스트 정렬 클래스를 사용하는 방법은 무엇입니까?
텍스트 내용의 스타일을 지정하는 동안 텍스트의 위치는 장식만큼 중요합니다. 텍스트가 제대로 정렬되지 않으면 웹페이지 전체 디자인이 이상해 보입니다. Tailwind에서 텍스트를 정렬하려면 다음 클래스가 사용됩니다.
텍스트- { 조정 }
정렬 옵션에는 ' 센터 ', ' 왼쪽 ', ' 오른쪽 ', 그리고 ' 신이 옳다고 하다 '. 아래 데모를 사용하여 이러한 각 정렬을 이해해 보겠습니다.
< 피 수업 = '텍스트 센터 bg-slate-200' > 이것은 샘플 텍스트이며 TEXT CENTER 정렬과 함께 제공됩니다. < / 피 >
< br >
< 피 수업 = ' 텍스트 오른쪽 bg-slate-200' > 이것은 샘플 텍스트이며 TEXT RIGHT 정렬로 제공됩니다. < / 피 >
< br >
< 피 수업 = ' 텍스트 왼쪽 bg-slate-200' > 이것은 샘플 텍스트이며 TEXT LEFT 정렬과 함께 제공됩니다. < / 피 >
< br >
< 피 수업 = ' 텍스트 양쪽 정렬 bg-slate-200' > 이것은 샘플 텍스트이며 TEXT JUSTIFY 정렬과 함께 제공됩니다. < / 피 >
위 코드에 대한 설명은 다음과 같습니다.
- 4개” 피 ” 요소는 줄 바꿈으로 생성되고 구분됩니다.
- 4개의 p 요소의 텍스트는 '를 사용하여 특정 위치에 정렬됩니다. 텍스트-{정렬} ' 수업.
- “ bg-{색상}-{번호} ” 클래스는 각 “에 배경색을 제공합니다. 피 ' 요소.
산출
아래 출력에서 각 정렬 클래스가 텍스트 위치에 어떤 영향을 미치는지 확인할 수 있습니다. 첫 번째 요소의 텍스트가 가운데로 정렬되고, 두 번째 요소가 오른쪽으로, 세 번째 요소가 왼쪽으로 정렬되고, 네 번째 요소가 정렬된 텍스트를 표시하는 것을 볼 수 있습니다.
Tailwind에서 텍스트 콘텐츠에 색상을 제공하는 방법은 무엇입니까?
색상은 요소의 텍스트 콘텐츠 스타일을 지정하는 데 중요한 역할을 합니다. 적절한 색상을 선택하지 않으면 텍스트를 읽기 어려워질 수 있습니다. 이는 레이아웃 디자인에 부정적인 영향을 미칩니다. Tailwind에서 텍스트 색상을 설정하려면 아래 클래스를 사용하세요.
텍스트- { 색상 } - { 숫자 }위에 정의된 구문에서 사용자는 색상 이름과 지정된 색상의 음영을 담당하는 숫자를 제공해야 합니다.
아래 제공된 데모에는 세 가지 ' 피 다양한 텍스트 색상 클래스를 사용하여 스타일이 지정된 요소:
< 피 수업 = '텍스트-보라색-500 텍스트-센터' > 보라색 색상의 텍스트입니다. < / 피 >< 피 수업 = '텍스트-빨간색-500 텍스트-센터' > 이것은 빨간색 텍스트입니다. < / 피 >
< 피 수업 = '텍스트-녹색-500 텍스트-센터' > 녹색 색상의 텍스트입니다. < / 피 >
위 코드에 사용된 클래스는 다음과 같습니다.
- 첫번째 ' 피 ” 요소는 “를 사용하여 보라색 색상으로 제공됩니다. 텍스트-{색상}-{번호} ' 수업.
- 두 번째, 세 번째 ' 피 ” 요소에는 동일한 방법으로 빨간색과 녹색 색상을 제공합니다.
- “ 텍스트 센터 ” 클래스는 텍스트 내용을 요소의 중앙에 배치합니다.
산출
아래 출력에서 텍스트의 기본 검정색이 text-{color}-{number} 클래스를 사용하여 지정된 색상으로 변경되는 것이 분명합니다.
Tailwind에서 다양한 글꼴 모음을 사용하는 방법은 무엇입니까?
텍스트 요소의 글꼴을 사용하여 특정 텍스트를 강조할 수 있습니다. 각 글꼴에는 고유한 특성이 있습니다. Tailwind에서 요소의 글꼴을 변경하려면 다음 클래스를 활용하세요.
폰트- { 가족 }Tailwind는 세 가지 기본 글꼴 모음을 제공합니다. 즉, ' 없이 ', ' 가는 장식 선 ', 그리고 ' 단핵증 '. 각 글꼴 모음에는 서로 다른 글꼴 스타일이 있습니다.
마찬가지로, “ 글꼴-{가중치} ” 클래스를 사용하여 텍스트를 굵게, 밝게 또는 보통으로 만들 수 있습니다. 데모를 통해 Tailwind의 다양한 글꼴 모음에 글꼴 두께를 제공해 보겠습니다.
< 피 수업 = '글꼴-모노 글꼴-엑스트라볼드 텍스트-센터' > MONO 글꼴의 매우 굵은 텍스트입니다. < / 피 >< 피 수업 = ' 글꼴-세리프 글꼴-세미볼드 텍스트-센터' > 이것은 Font SERIF의 약간 굵은 텍스트입니다. < / 피 >
< 피 수업 = ' 글꼴-산 글꼴-extralight 텍스트-센터' > Font SANS의 매우 가벼운 텍스트입니다. < / 피 >
코드에 대한 설명:
- 세 가지 “ 피 ' 요소는 'mono', 'serf' 및 'sans' 글꼴 모음에서 제공됩니다. 글꼴-{가족} ' 수업.
- 마찬가지로 세 가지 “ 피 '요소는 '로 제공됩니다. 극단적인 ', ' 세미볼드 ', 그리고 ' 특별히 빛나다 ” “를 사용하여 글꼴 두께 글꼴-{가중치} ' 수업.
- 이러한 모든 요소는 ' 텍스트 센터 ” 요소의 중앙에 텍스트를 배치하는 클래스입니다.
산출
주어진 출력은 모든 ' 피 ” 요소에는 다른 글꼴 모음과 글꼴 두께가 있습니다.
Tailwind의 텍스트에 밑줄 장식을 제공하는 방법은 무엇입니까?
다양한 유형의 밑줄을 추가하여 텍스트 요소의 스타일을 지정할 수도 있습니다. 텍스트의 일부를 강조하는 데 사용할 수 있습니다. 텍스트 요소에 밑줄을 제공하려면 다음 클래스가 사용됩니다.
밑줄 장식- { 스타일 }“라는 단어 밑줄 ”는 요소에 기본 밑줄을 제공하고 “ 장식-{style} ” 클래스는 밑줄에 다양한 스타일을 제공하는 데 사용됩니다. 아래 제공된 데모를 사용하여 이를 이해해 보겠습니다.
< 피 수업 = '밑줄 장식-단색 텍스트-가운데' > 이 텍스트에는 실선 밑줄이 있습니다. < / 피 >< 피 수업 = ' 밑줄 장식-이중 텍스트-가운데' > 이 텍스트에는 이중 밑줄이 있습니다. < / 피 >
< 피 수업 = ' 밑줄 장식 - 물결 모양 텍스트 - 중앙 ' > 이 텍스트에는 물결 모양 밑줄이 있습니다. < / 피 >
< 피 수업 = ' 밑줄장식-점선텍스트-가운데' > 이 텍스트에는 점선 밑줄이 있습니다. < / 피 >
위의 코드에는 4개의 “ 피 ”에서 제공하는 요소 단단한 ', ' 더블 ', ' 떨리는 ', 그리고 ' 점이 찍힌 ” 스타일의 밑줄.
산출:
다음 출력에서는 밑줄이 그어진 다양한 장식 클래스를 사용하여 요소의 스타일이 지정되었음을 알 수 있습니다.
Tailwind에서 텍스트에 들여쓰기를 제공하는 방법은 무엇입니까?
모든 텍스트 문서에서 들여쓰기는 텍스트 내용의 형식을 지정하는 데 사용됩니다. Tailwind는 다음 클래스를 사용하여 텍스트 콘텐츠에 들여쓰기를 제공하는 기본 클래스도 제공합니다.
톱니 모양- { 너비 }위에서 정의한 구문의 너비는 텍스트 콘텐츠에 제공되는 들여쓰기 여백의 크기를 담당합니다.
두 개의 텍스트 요소에 서로 다른 들여쓰기 값을 할당하여 스타일을 지정하고 결과를 살펴보겠습니다.
< 피 수업 = ' 들여쓰기-4 py-12' > 'indent-4' 클래스를 이용하여 Indentation을 제공하는 샘플 텍스트입니다. < / 피 >< 피 수업 = ' 들여쓰기-28 ' > 'indent-28' 클래스를 이용하여 Indentation을 제공하는 샘플 텍스트입니다. < / 피 >
위 코드에서는 두 개의 ' 피 '에는 너비 '의 들여쓰기가 제공됩니다. 4 ” & “ 28 ' 각각. 첫 번째 요소에는 '를 사용하여 상하 패딩도 제공됩니다. p-12 ' 수업.
산출:
아래 출력에서 두 번째 텍스트 요소는 들여쓰기 너비가 더 크기 때문에 텍스트 시작 부분의 여백이 더 크다는 것을 알 수 있습니다.
Tailwind를 사용하여 텍스트 스타일을 지정하는 것이 전부입니다.
결론
Tailwind는 텍스트 요소 스타일을 지정하기 위한 다양한 클래스를 제공합니다. Tailwind에서 텍스트 스타일을 지정하려면 사용자는 ' 텍스트-{색상}-{번호} ', ' 텍스트-{정렬} ', ' 밑줄 장식-{style} ', 그리고 ' 들여쓰기-{너비} ' 수업. 이 도움말에서는 Tailwind의 다양한 클래스를 사용하여 텍스트 스타일을 지정하는 방법에 대한 가이드를 제공했습니다.