Bài viết này sẽ minh họa phương pháp tạo kiểu cho tiêu đề bằng cách thêm kiểu cơ sở trong Tailwind.
Làm cách nào để tạo kiểu tiêu đề bằng cách sử dụng kiểu cơ sở Tailwind?
Để tạo kiểu cho tiêu đề trong Tailwind, hãy xem các bước được cung cấp sẵn:
- Mở tệp CSS của dự án.
- Trong tệp CSS, hãy thêm kiểu cơ sở vào tiêu đề bằng cách sử dụng “ @lớp ” chỉ thị theo “ cơ sở @tailwind; ” chỉ thị.
- Tạo một chương trình HTML và sử dụng các phần tử tiêu đề trong đó.
- Chạy chương trình HTML và xác minh đầu ra.
Bước 1: Thêm kiểu cơ sở vào tiêu đề trong tệp CSS
Đầu tiên, mở “ phong cách.css ” và thêm kiểu cơ sở vào các tiêu đề trong đó bằng cách sử dụng “ @lớp ” chỉ thị. Chẳng hạn, chúng tôi đã thêm kiểu cơ sở cho các tiêu đề sau:
@Gió cùng chiều căn cứ ;
@lớp căn cứ {
h1 {
@áp dụng văn bản-6xl ;
}
h2 {
@áp dụng văn bản-5xl ;
}
h3 {
@áp dụng văn bản-4xl ;
}
h4 {
@áp dụng văn bản-3xl ;
}
h5 {
@áp dụng văn bản-2xl ;
}
}
@Gió cùng chiều các thành phần ;
@Gió cùng chiều tiện ích ;
Đây:
- “ @lớp cơ sở { … } ” xác định một lớp cơ sở mới và chứa các kiểu cho các thành phần tiêu đề.
- “ h1 { @apply text-6xl; } ” áp dụng “ văn bản-6xl ” lớp tiện ích cho “ h1 ” yếu tố.
- Tương tự, “ h2 ”, “ h3 ”, “ h4 ', Và ' h5 ” các phần tử có kích thước phông chữ được đặt bằng cách sử dụng “ @áp dụng ” và các lớp tiện ích tương ứng (text-5xl, text-4xl, text-3xl và text-2xl).
Bước 2: Tạo trang web HTML bằng tiêu đề
Sau đó, tạo chương trình HTML và sử dụng các phần tử tiêu đề trong đó. Ở đây, chúng tôi đã sử dụng các yếu tố tiêu đề sau:
< thân hình >
< div lớp học = 'h-screen justify-center text-center bg-violet-400' >
< h1 > tiêu đề 1 < / h1 >
< h2 > tiêu đề 2 < / h2 >
< h3 > tiêu đề 3 < / h3 >
< h4 > tiêu đề 4 < / h4 >
< h5 > tiêu đề 5 < / h5 >
< / div >
< / thân hình >
Bước 3: Chạy chương trình HTML
Cuối cùng, chạy chương trình HTML và xem trang web để xác minh:
Đầu ra ở trên đã hiển thị các tiêu đề như chúng là các kiểu trong tệp CSS.
Phần kết luận
Để tạo kiểu cho tiêu đề trong Tailwind, hãy mở tệp CSS và thêm kiểu cơ sở vào tiêu đề bằng cách sử dụng “ @lớp ” chỉ thị theo “ cơ sở @tailwind; ” chỉ thị. Sau đó, tạo một chương trình HTML và sử dụng các phần tử tiêu đề trong đó. Cuối cùng, xem trang web HTML để xác minh đầu ra. Bài viết này đã giải thích phương pháp tạo kiểu cho tiêu đề bằng cách thêm kiểu cơ sở trong Tailwind.