Admin Fahru

Desain Responsive - Tailwind CSS Indonesia

Logo Tailwind CSS

Tailwind CSS mendukung desain responsive secara default. Responsivitas memungkinkan kita untuk menerapkan utilitas berbeda pada setiap ukuran layar. Contoh penerapan desain responsive pada website ini adalah penggunaan 3 kolom pada layar lebar, 2 kolom pada layar sedang (seperti tablet), dan 1 kolom pada layar kecil (seperti handphone). Coba ubah ukuran browser Anda.

Batas-batas Ukuran Media

Pada Tailwind CSS terdapat 5 batas ukuran media yang terinspirasi oleh beberapa ukuran resolusi layar :

PrefixMin WidthCSS
sm640px@media (min-width: 640px) { ... }
md768px@media (min-width: 768px) { ... }
lg1024px@media (min-width: 1024px) { ... }
xl1280px@media (min-width: 1280px) { ... }
2xl1536px@media (min-width: 1536px) { ... }

Aturan Penggunaan Batas Ukuran Media

Untuk menggunakannya, kita cukup menambahkan prefix di depan utilitas lainnya. Namun terdapat aturan Mobile-first yang perlu dipatuhi agar hasil yang didapatkan maksimal.

Mobile-first dalam desain responsive maksudnya adalah mengedepankan tampilan untuk ukuran layar kecil yang kemudian diikuti oleh ukuran layar yang lebih besar. Ini dapat diketahui dari kolom CSS di tabel diatas bahwa setiap batas menggunakan minimal lebar media.

Contoh kasusnya adalah misalkan kita hendak membuat background berbeda untuk masing-masing ukuran media seperti berikut : layar handphone : merah, layar tablet : biru, layar laptop biasa : hijau, layar laptop besar : kuning.

Kode untuk kasus di atas adalah seperti berikut ini :

<div class="bg-red-600 sm:bg-blue-500 md:bg-green-500 xl:bg-yellow-500 h-10 w-auto"></div>

Contoh hasilnya adalah seperti berikut: 

Catatan : Ukuran media tidak sama dengan ukuran layar, semisal ukuran lebar layar laptop anda berukuran 1300 px namun Anda melakukan perbesaran (zoom) sampai 150% pada website ini maka ukuran media untuk website ini menjadi 962px, cobalah untuk melakukan perbesaran sampai 300%, jika Anda menggunakan browser Google Chrome, alat zoom terdapat di menu 3 titik di kanan atas.

Menargetkan Hanya Satu Breakpoint

Batas-batas ukuran media pada Tailwind hanya menggunakan min-width dan tidak menggunakan max-width, yang berarti setiap utilitas yang Anda tambahkan pada batasan yang lebih kecil juga akan diterapkan pada batasan yang lebih besar.

Contoh kasus yakni misalkan kita hendak menargetkan batasan ukuran medium (antara 768px sampai 1023px) memiliki background warna merah sedangkan ukuran lainnya memiliki background warna hijau, maka kita bisa mengaturnya sebagai berikut :

<div class="bg-red-600 md:bg-green-500 lg:bg-red-600 h-10 w-auto"></div>

hasilnya seperti berikut ini:

(coba di zoom-in sampai 150% dan 200%)

Catatan : kita tidak mengatur untuk ukuran sm, xl, dan 2xl dikarenakan ukuran tersebut telah diwakili oleh ukuran yang lebih kecil sebelumnya.


Pengaturan
Mode
Warna
Search panel