Tulisan ini akan menggambarkan kaedah untuk menggayakan tajuk dengan menambah gaya asas dalam Tailwind.
Bagaimana untuk Menggayakan Tajuk Menggunakan Gaya Asas Tailwind?
Untuk menggayakan tajuk dalam Tailwind, lihat langkah yang diberikan:
- Buka fail CSS projek.
- Dalam fail CSS, tambahkan gaya asas pada tajuk menggunakan ' @lapisan 'arahan di bawah ' @pangkal tailwind; ” arahan.
- Buat program HTML dan gunakan elemen tajuk di dalamnya.
- Jalankan program HTML dan sahkan output.
Langkah 1: Tambahkan Gaya asas pada Tajuk dalam Fail CSS
Pertama, buka ' style.css ” fail dan tambah gaya asas pada tajuk di dalamnya menggunakan “ @lapisan ” arahan. Sebagai contoh, kami telah menambah gaya asas pada tajuk berikut:
@tailwind asas ;
@lapisan asas {
h1 {
@memohon teks-6xl ;
}
h2 {
@memohon teks-5xl ;
}
h3 {
@memohon teks-4xl ;
}
h4 {
@memohon teks-3xl ;
}
h5 {
@memohon teks-2xl ;
}
}
@tailwind komponen ;
@tailwind utiliti ;
di sini:
- “ @dasar lapisan { … } ” mentakrifkan lapisan asas baharu dan mengandungi gaya untuk komponen tajuk.
- “ h1 { @apply text-6xl; } ” terpakai “ teks-6xl 'kelas utiliti kepada' h1 ” unsur.
- Begitu juga, “ h2 ”, “ h3 ”, “ h4 ”, dan “ h5 'elemen mempunyai saiz fon mereka ditetapkan menggunakan ' @memohon ” dan kelas utiliti masing-masing (teks-5xl, teks-4xl, teks-3xl dan teks-2xl).
Langkah 2: Cipta Halaman Web HTML Menggunakan Tajuk
Kemudian, buat program HTML dan gunakan elemen tajuk di dalamnya. Di sini, kami telah menggunakan elemen tajuk berikut:
< badan >
< div kelas = 'h-screen justify-center text-center bg-violet-400' >
< h1 > Tajuk 1 < / h1 >
< h2 > Tajuk 2 < / h2 >
< h3 > Tajuk 3 < / h3 >
< h4 > Tajuk 4 < / h4 >
< h5 > Tajuk 5 < / h5 >
< / div >
< / badan >
Langkah 3: Jalankan Program HTML
Akhir sekali, jalankan program HTML dan lihat halaman web untuk pengesahan:
Output di atas telah memaparkan tajuk kerana ia adalah gaya dalam fail CSS.
Kesimpulan
Untuk menggayakan tajuk dalam Tailwind, buka fail CSS dan tambahkan gaya asas pada tajuk menggunakan ' @lapisan 'arahan di bawah ' @pangkal tailwind; ” arahan. Kemudian, buat program HTML dan gunakan elemen tajuk di dalamnya. Akhir sekali, lihat halaman web HTML untuk mengesahkan output. Tulisan ini telah menerangkan kaedah untuk menggayakan tajuk dengan menambah gaya asas dalam Tailwind.