Posting ini menguraikan prosedur lengkap untuk menambahkan celah antar kolom di Tailwind.
Bagaimana Cara Menambahkan Celah Antar Kolom di Tailwind?
Untuk menambahkan celah antar kolom di Tailwind, gunakan “ celah-{ukuran} ' kegunaan. Ini menentukan nilai integer yang mewakili celah antara kolom secara horizontal dan vertikal. Mari kita lakukan tugas ini secara praktis dengan bantuan contoh yang disebutkan.
Struktur File Proyek
“ celah-{ukuran} ” Utilitas dapat diimplementasikan di salah satu proyek Tailwind yang mengikuti struktur file yang diberikan:
Mari kita mulai dengan contoh pertama.
Contoh 1: Gunakan Utilitas “gap-{size}” untuk Menambahkan Kesenjangan yang Sama Antara Baris dan Kolom
Contoh ini menerapkan utilitas “gap-{size}” untuk menambahkan celah yang sama secara horizontal dan vertikal di antara kolom yang diberikan.
Kode HTML
Ikhtisar kode berikut:
< kepala >
< tautan href = '/dist/keluaran.css' rel = 'lembar gaya' >
< / kepala >
< tubuh >
< h1 kelas = 'text-3xl font-bold text-center underline text-orange-600' > Selamat datang di Linuxint! < / h1 >< br >
< div kelas = 'mx-2 grid grid-cols-3 gap-4' >
< div kelas = 'perbatasan-2 perbatasan-oranye-600' > Tutorial Pertama < / div >
< div kelas = 'perbatasan-2 perbatasan-oranye-600' > Tutorial Kedua < / div >
< div kelas = 'perbatasan-2 perbatasan-oranye-600' > Tutorial Ketiga < / div >
< div kelas = 'perbatasan-2 perbatasan-oranye-600' > Tutorial Keempat < / div >
< div kelas = 'perbatasan-2 perbatasan-oranye-600' > Tutorial Kelima < / div >
< div kelas = 'perbatasan-2 perbatasan-oranye-600' > Tutor Keenam < / div >
< div kelas = 'perbatasan-2 perbatasan-oranye-600' > Tutor Ketujuh < / div >
< div kelas = 'perbatasan-2 perbatasan-oranye-600' > Tutorial Kedelapan < / div >
< / div >
Pada baris kode di atas:
- Pertama, tautkan file CSS utama “ /dist/output.css ” dengan file HTML yang ada “ index.html ' menggunakan '
” tag di bagian 'kepala'. - Selanjutnya, bagian “body” membuat elemen “
” yang menggunakan elemen “ Ukuran huruf ”, “ Berat Font ”, “ Perataan Teks ”, “ Dekorasi Teks ”, dan “ Warna teks ” Kelas Tailwind, masing-masing.
- Setelah itu, elemen “” ditambahkan yang menerapkan “ kisi ” untuk menyetel kontennya dalam jumlah tata letak kisi yang disebutkan, opsi “ batas ” untuk mengatur margin horizontal, dan “ celah ” utilitas untuk menambahkan celah yang ditentukan di antara kolom.
- Di bagian badan elemen “
”, selanjutnya disertakan delapan elemen “” yang menggunakan elemen “ Lebar Perbatasan ” dan “ Warna Perbatasan ” kelas, masing-masing.Keluaran
Jalankan kode HTML di atas di server langsung dan analisis hasilnya:
Seperti yang terlihat, output menambahkan celah yang ditentukan antara kolom di kedua dimensi dengan tepat.
Contoh 2: Gunakan Utilitas “gap-{size}” untuk Menambahkan Celah Antara Baris dan Kolom Secara Mandiri
“ celah-{ukuran} Utilitas juga dapat diimplementasikan dengan dimensi “x(horizontal)” dan “y(vertical)” sebagai “gap-x-{size}” untuk baris, dan “gap-y-{size}” untuk kolom untuk menambahkan kesenjangan antara mereka secara individual.Mari kita lihat implementasi praktisnya.
Kode HTML
< kepala >
Lihat kode yang diberikan:
< tautan href = '/dist/keluaran.css' rel = 'lembar gaya' >
< / kepala >
< tubuh >
< div kelas = 'mx-2 grid grid-cols-4 gap-x-4 gap-y-6' >
< div kelas = 'perbatasan-2 perbatasan-oranye-600' >Tutorial Pertama< / div >
< div kelas = 'perbatasan-2 perbatasan-oranye-600' >Tutorial Kedua< / div >
< div kelas = 'perbatasan-2 perbatasan-oranye-600' >Tutorial Ketiga< / div >
< div kelas = 'perbatasan-2 perbatasan-oranye-600' >Tutorial Keempat< / div >
< div kelas = 'perbatasan-2 perbatasan-oranye-600' >Tutorial Kelima< / div >
< div kelas = 'perbatasan-2 perbatasan-oranye-600' >Tutorial Keenam< / div >
< div kelas = 'perbatasan-2 perbatasan-oranye-600' >Tutorial Ketujuh< / div >
< div kelas = 'perbatasan-2 perbatasan-oranye-600' >Tutorial Kedelapan< / div >
< / div >
< tubuh >Di sini, “ celah-x-{ukuran} ” Utilitas menambahkan celah antara baris dan ' celah-y-{ukuran} ” menambahkan celah yang ditentukan antar kolom secara mandiri.
Keluaran
Hasil di atas memverifikasi bahwa celah antara baris dan kolom diterapkan sesuai.
Kesimpulan
“Tailwind CSS” menyediakan “ celah-{ukuran} ” utilitas untuk menambahkan celah di antara kolom. Itu juga dapat digunakan untuk menambahkan celah antara baris dan kolom secara terpisah melalui ' celah-x-{ukuran} ” dan “ celah-y-{ukuran} ' keperluan. Posting ini memberikan prosedur lengkap untuk menambahkan celah antar kolom di Tailwind.
- Di bagian badan elemen “