Basic Utility Part 1 | Tailwind CSS

Spacing

Dalam bahasa Inggris Spacing berarti Jarak, maksudnya spacing dipergunakan untuk memberikan jarak, baik itu jarak diluar elemen ataupun jarak di dalam elemen dan diantara elemen tersebut. Pada Tailwind sendiri basic utility di kategori spacing diantaranya adalah padding, margin, dan Space Beetwen. Dimana, ketiga bagian tersebut sering dipergunakan untuk memberikan jarak antar komponen pada HTML.

Margin

Memberi jarak diluar elemen, jarak batas pinggir dengan elemen dari HTML. Cara kita untuk mengontrol penggunaan margin pada TailwindCSS bisa menggunakan `m{t|r|b|l}-{size}`. M didefinisikan untuk margin, t untuk top atau atas, r untuk right atau kanan b untuk bottom atau bawah dan l untuk left atau kiri. Kemudian untuk sizenya bisa di tambahkan sesuai yang di inginkan. Untuk lebih jelas tentang sizenya temen-temen bisa liat di bagian dokumentasi untuk margin : Doumentasi Margin

Selain kontroling salah satu side nya saja, untuk pengontrolan secara horizontal bisa menggunakan mx dimana size kiri dan kananya akan ditambahkan margin. Sedangkan untuk arah vertical bisa menggunakan my maka side atas dan bawahnya akan di tambahkan margin. Namun, bila ingin menambahkan seluruh side dengan nilai yang sama kita bisa menggunakan m-size. Maka seluruh side akan ditambahkan margin dengan nilai yang sama. Selain itu, penggunaan margin di Tailwind juga sudah mensupport untuk negative values dan auto.

Padding

Berbeda dengan margin, padding untuk memberi jarak didalam elemen. Secara konsep margin dan padding konsepnya serupa, hanya saja bedanya margin dengan padding, padding menggunakan p sebagai pengganti m pada margin. Kemudian, padding tidak mensupport untuk negative values dan auto.

Space Between

Memberikan jarak antar elemen, hanya saja penggunaan space between ini bisa digunakan apabila kita menggunakan layouting flex. Untuk lebih jelasnya akan dijelaskan di bagian layouting. Secara, konsep space beetween tidak jauh dari margin dan padding dimana space-x di gunakan untuk memberi jarak antar element secara horizontal dan space-y digunakan untuk memberi jarak antar element secara vertical.

Sizing

Sizing atau volume yang di kontrol dalam sizing ini adalah ukuran dari si element dimana dalam sizing terdapat width, max width, min width, height, max-height, dan min-height. Width seperti namanya untuk mengontrol lebar elemen dan di simbolkan dengan w, sedangkan height untuk mengatur tinggi dan disimbolkan dengan h, dimana baik width ataupun height bisa memiliki ukuran tetap minimal ataupun ukuran tetap maximalnya, yang dalam penggunaannya dituliskan
min-w untuk minimal width
max-w untuk maximal-width
min-h untuk minimal height
max-h untuk maximal height
Untuk dokumentasi lebih jelasnya : Dokumentasi sizing

Typography

Banyak sekali utility dalam Typography hanya saja yang sering di gunakan yaitu : Font-family, font-size, Font-weight, Text-align, text-color, text-decoration, text-transform dan text-overflow