Artikel ini akan mengilustrasikan metode menata judul dengan menambahkan gaya dasar di Tailwind.
Bagaimana Menata Judul Menggunakan Tailwind Gaya Dasar?
Untuk menata judul di Tailwind, lihat langkah-langkah yang diberikan:
- Buka file CSS proyek.
- Di file CSS, tambahkan gaya dasar ke judul menggunakan “ @lapisan ” direktif di bawah “ @ basis penarik angin; ' pengarahan.
- Buatlah program HTML dan gunakan elemen heading di dalamnya.
- Jalankan program HTML dan verifikasi hasilnya.
Langkah 1: Tambahkan Style dasar ke Judul di File CSS
Pertama, buka “ style.css ” dan tambahkan gaya dasar ke judul di dalamnya menggunakan tombol “ @lapisan ' pengarahan. Misalnya, kami telah menambahkan gaya dasar ke judul berikut:
@tailwind basis ;
@lapisan basis {
h1 {
@menerapkan teks-6xl ;
}
h2 {
@menerapkan teks-5xl ;
}
h3 {
@menerapkan teks-4xl ;
}
h4 {
@menerapkan teks-3xl ;
}
h5 {
@menerapkan teks-2xl ;
}
}
@tailwind komponen ;
@tailwind keperluan ;
Di Sini:
- “ @lapisan dasar { … } ” mendefinisikan lapisan dasar baru dan berisi gaya untuk komponen tajuk.
- “ h1 { @terapkan teks-6xl; } ” menerapkan “ teks-6xl ” kelas utilitas ke “ h1 ” elemen.
- Demikian pula, “ h2 ”, “ h3 ”, “ h4 ', Dan ' h5 ” elemen memiliki ukuran font yang diatur menggunakan “ @menerapkan ” dan kelas utilitas masing-masing (text-5xl, text-4xl, text-3xl, dan text-2xl).
Langkah 2: Buat Halaman Web HTML Menggunakan Judul
Kemudian, buatlah program HTML dan gunakan elemen heading di dalamnya. Di sini, kami telah menggunakan elemen tajuk berikut:
< tubuh >
< div kelas = 'pusat teks justify-center layar-h bg-violet-400' >
< h1 > Tajuk 1 < / h1 >
< h2 > Tajuk 2 < / h2 >
< h3 > Tajuk 3 < / h3 >
< h4 > Tajuk 4 < / h4 >
< h5 > Tajuk 5 < / h5 >
< / div >
< / tubuh >
Langkah 3: Jalankan Program HTML
Terakhir, jalankan program HTML dan lihat halaman web untuk verifikasi:
Output di atas telah menampilkan judul sebagaimana gaya dalam file CSS.
Kesimpulan
Untuk menata judul di Tailwind, buka file CSS, dan tambahkan gaya dasar ke judul menggunakan tombol “ @lapisan ” direktif di bawah “ @ basis penarik angin; ' pengarahan. Kemudian, buatlah program HTML dan gunakan elemen heading di dalamnya. Terakhir, lihat halaman web HTML untuk memverifikasi hasilnya. Artikel ini telah menjelaskan metode menata judul dengan menambahkan gaya dasar di Tailwind.