Namun artikel ini akan menguraikan dua golongan tertentu yaitu bangun proporsional dan bangun tabel. Ini digunakan untuk menata nilai numerik di Tailwind dan mengatur serta mewakili data numerik dengan cara yang menarik bagi desain dokumen.
Artikel ini akan menguraikan angka proporsional dan tabel di Tailwind CSS dengan menggunakan garis besar berikut:
- Bagaimana Cara Menggunakan Angka Proporsional di Tailwind CSS?
- Bagaimana Cara Menggunakan Gambar Tabular di Tailwind CSS?
- Perbedaan Antara Angka Proporsional dan Tabel
Bagaimana Cara Menggunakan Angka Proporsional di Tailwind CSS?
Kelas angka proporsional akan menetapkan konvensi pada elemen di mana setiap angka tidak memiliki lebar yang sama.
Sintaksis
Sintaks penggunaan angka proporsional di Tailwind adalah sebagai berikut:
< div kelas = 'angka proporsional' >
< div / >
Dalam sintaks yang disediakan di atas, “ angka proporsional ” kelas harus diberikan kepada elemen untuk menggunakan angka proporsional.
Mari kita lihat contoh praktis dari bilangan proporsional.
Dalam kode yang disediakan di bawah ini, dua “ P ” elemen terkandung dalam “ div ” elemen yang menggunakan kelas angka proporsional:
< div kelas = 'angka-proporsional pusat teks bg-slate-200 teks-xl' >< P > 121212 < / P >
< P > 838383 < / P >
< / div >
Penjelasan kode yang diberikan di atas adalah sebagai berikut:
- “ div Elemen ” menggunakan “ angka proporsional kelas ” yang akan menerapkan properti bilangan proporsional pada bilangan tersebut.
- “ pusat teks Kelas ” memposisikan teks di tengah elemen.
- “ bg-{warna}-{angka} Kelas ” bertanggung jawab atas warna latar belakang elemen.
- “ teks-xl Kelas ” menyediakan ukuran font ekstra besar untuk teks.
- Selanjutnya, dua “ P ” elemen dibuat mengandung nomor yang berbeda.
Keluaran
Dapat dilihat pada output bahwa angka pada detik “ P ” Elemen memiliki lebar sedikit lebih besar dari yang pertama. Hal ini disebabkan oleh kelas angka proporsional:
Bagaimana Cara Menggunakan Gambar Tabular di Tailwind CSS?
Gambar tabel di Tailwind menetapkan konvensi ke elemen yang setiap angkanya memiliki ukuran lebar yang sama. Ini menciptakan representasi angka seperti tabel yang simetris.
Sintaksis
Sintaks penggunaan gambar tabel adalah sebagai berikut:
< div kelas = 'angka-tabel' >< div / >
Dalam sintaks yang disediakan di atas, “ angka tabel Kelas ” disediakan kepada elemen untuk menggunakan gambar tabel.
Mari kita lihat bagaimana “ angka tabel ” mempengaruhi nilai numerik dalam dokumen HTML. Untuk demonstrasi ini, dua “ P ” dengan nilai numerik dibuat dan terkandung dalam “ div ” elemen yang menggunakan kelas angka tabel:
< div kelas = ' tabular-nums pusat teks bg-slate-200 teks-xl' >< P > 121212 < / P >
< P > 838383 < / P >
< / div >
Dalam kode di atas, “ angka tabel ” kelas disediakan untuk “ div ” elemen yang akan memberikan gaya gambar tabel kepada anak “ P ” elemen.
Keluaran:
Terlihat pada output di atas bahwa nilai numerik pada kedua elemen sejajar sempurna karena ukuran lebar digitnya sama.
Info Bonus: Perbedaan Angka Proporsional dan Tabel di Tailwind CSS
Mari kita lihat demonstrasi yang membedakan pengaruh kelas angka tabular dan proporsional pada nilai numerik. Dalam demonstrasi ini, elemen akan diberi kelas angka proporsional sebagai default. Selanjutnya, dengan menggunakan status hover, elemen akan diberi kelas gambar tabel:
< div kelas = 'angka-proporsional pusat teks bg-slate-200 teks-xl hover:angka-tabular' >< P > 121212 < / P >
< P > 838383 < / P >
< / div >
Dapat dilihat pada kode di atas bahwa “ div ” elemen disediakan dengan “ angka proporsional ”, yang akan menjadi konvensi default yang akan diikuti oleh nilai numerik.
Demikian pula, karena “ arahkan kursor: angka tabel kelas ”, nilai numerik akan mengikuti konvensi angka tabel setiap kali pengguna mengarahkan kursor mouse ke elemen “div”.
Keluaran
Dalam keluaran yang diberikan, lebar nilai numerik berubah ketika pengguna mengarahkan mouse ke elemen. Ini memberikan perbedaan visual antara angka proporsional dan tabel di Tailwind:
Sekian tentang angka proporsional dan tabular di Tailwind.
Kesimpulan
Untuk menggunakan angka proporsional di Tailwind, “ angka proporsional kelas ” digunakan. Angka proporsional menggunakan konvensi dimana setiap nilai numerik mempunyai ukuran lebar yang berbeda-beda. Untuk menggunakan gambar tabel di Tailwind, tombol “ angka tabel kelas ” digunakan. Gambar tabel menggunakan konvensi dimana setiap nilai numerik memiliki ukuran lebar yang sama. Artikel ini telah menjelaskan tata cara penggunaan angka proporsional dan tabel di Tailwind.