이 글은 Tailwind에 기본 스타일을 추가하여 제목 스타일을 지정하는 방법을 설명합니다.
기본 스타일 Tailwind를 사용하여 제목 스타일을 지정하는 방법은 무엇입니까?
Tailwind에서 제목의 스타일을 지정하려면 제공된 단계를 확인하세요.
- 프로젝트의 CSS 파일을 엽니다.
- CSS 파일에서 '를 사용하여 제목에 기본 스타일을 추가합니다. @층 ” 아래의 지시어 @tailwind 베이스; ” 지시.
- HTML 프로그램을 만들고 그 안에 제목 요소를 사용하십시오.
- HTML 프로그램을 실행하고 출력을 확인합니다.
1단계: CSS 파일의 제목에 기본 스타일 추가
먼저 ' 스타일.css ” 파일을 만들고 “ @층 ” 지시. 예를 들어 다음 제목에 기본 스타일을 추가했습니다.
@tailwind 베이스 ;
@층 베이스 {
h1 {
@적용하다 텍스트-6xl ;
}
h2 {
@적용하다 텍스트-5xl ;
}
h3 {
@적용하다 텍스트-4xl ;
}
h4 {
@적용하다 텍스트-3xl ;
}
h5 {
@적용하다 텍스트-2xl ;
}
}
@tailwind 구성 요소 ;
@tailwind 유용 ;
여기:
- “ @레이어 베이스 { … } ”는 새 기본 레이어를 정의하고 제목 구성 요소의 스타일을 포함합니다.
- “ h1 { @apply text-6xl; } '는 '를 적용합니다. 텍스트-6xl ” 유틸리티 클래스를 “ h1 ” 요소.
- 마찬가지로 “ h2 ”, “ h3 ”, “ h4 ', 그리고 ' h5 ' 요소는 '를 사용하여 글꼴 크기를 설정합니다. @적용하다 ” 및 각각의 유틸리티 클래스(text-5xl, text-4xl, text-3xl 및 text-2xl).
2단계: 제목을 사용하여 HTML 웹 페이지 만들기
그런 다음 HTML 프로그램을 만들고 그 안에 제목 요소를 사용하십시오. 여기서는 다음 제목 요소를 사용했습니다.
< 몸 >
< 사업부 수업 = 'h-screen justify-center text-center bg-violet-400' >
< h1 > 제목 1 < / h1 >
< h2 > 제목 2 < / h2 >
< h3 > 제목 3 < / h3 >
< h4 > 제목 4 < / h4 >
< h5 > 제목 5 < / h5 >
< / 사업부 >
< / 몸 >
3단계: HTML 프로그램 실행
마지막으로 HTML 프로그램을 실행하고 확인을 위해 웹 페이지를 봅니다.
위의 출력은 CSS 파일의 스타일인 제목을 표시했습니다.
결론
Tailwind에서 제목 스타일을 지정하려면 CSS 파일을 열고 ' @층 ” 아래의 지시어 @tailwind 베이스; ” 지시. 그런 다음 HTML 프로그램을 만들고 그 안에 제목 요소를 사용하십시오. 마지막으로 HTML 웹 페이지를 보고 출력을 확인합니다. 이 글은 Tailwind에 기본 스타일을 추가하여 제목 스타일을 지정하는 방법을 설명했습니다.