Belajar Tailwind CSS - Responsive Design & Breakpoints

#Pendahuluan

Website tidak lagi dilihat hanya di layar desktop. Responsive design adalah syarat mutlak, dan Tailwind membuatnya natural lewat sistem breakpoint. Episode 5 membahas screens di config, pendekatan mobile-first, cara memakai utility per breakpoint, dan pola kompleks untuk kasus edge.

Konsep utamanya sederhana: tulis utility tanpa prefix untuk gaya dasar mobile, lalu tambahkan prefix breakpoint seperti md: dan lg: untuk menyesuaikan tampilan di layar yang lebih besar. Ini berbeda dari cara tradisional yang menulis media query max-width di CSS.

#Sistem screens di Config

Tailwind menyediakan lima breakpoint default:

Screens default

screens: {
  sm: "640px",
  md: "768px",
  lg: "1024px",
  xl: "1280px",
  "2xl": "1536px",
}

Semua breakpoint berbasis min-width. Artinya md: aktif saat viewport minimal 768px dan berlaku ke atas, hingga diganti breakpoint berikutnya. Kalian bisa menambahkan nama sendiri atau mengubah nilai default di theme.extend.screens:

Menambah breakpoint custom

theme: {
  extend: {
    screens: {
      "3xl": "1920px",
      tablet: "820px",
    },
  },
},

#Mobile-First Approach

Mobile-first berarti gaya dasar (tanpa prefix) ditulis untuk layar terkecil, lalu ditingkatkan dengan prefix. Contohnya:

Layout mobile-first

<div class="grid grid-cols-1 gap-4 p-4 md:grid-cols-2 lg:grid-cols-3">
  <div class="bg-gray-100 p-4">Kartu 1</div>
  <div class="bg-gray-100 p-4">Kartu 2</div>
  <div class="bg-gray-100 p-4">Kartu 3</div>
</div>

grid-cols-1 adalah default untuk mobile, md:grid-cols-2 untuk tablet, dan lg:grid-cols-3 untuk desktop. Pola md:grid-cols-2 ini adalah pola responsive paling umum di Tailwind.

#Utility Responsive per Breakpoint

#Pola Dasar

Hampir semua utility bisa diberi prefix breakpoint: md:p-8, lg:text-2xl, xl:flex-row. Yang sering dilupakan: hidden dan flex juga responsif:

Menampilkan dan menyembunyikan

<div class="hidden md:block">Sidebar desktop</div>
<div class="md:hidden">Menu mobile</div>

md:block memunculkan elemen mulai layar md, dan md:hidden menyembunyikannya pada layar yang sama — teknik standar untuk navigasi adaptif.

#Nilai Arbitrer dan Range

Untuk viewport di luar default, gunakan breakpoint arbitrer:

Breakpoint arbitrer

<div class="min-[700px]:grid-cols-2">Mulai dua kolom di 700px</div>
<div class="max-lg:block">Tampil di bawah lg</div>

Prefix max- mengubah breakpoint menjadi max-width, sehingga gaya berlaku ke bawah, bukan ke atas. Kombinasi min-md:max-lg:flex bisa menyasar rentang viewport tertentu — berguna untuk kasus yang benar-benar khusus.

#Pola Breakpoint Kompleks

Kombinasi breakpoint dan variants memberi fleksibilitas besar:

Responsive dengan variants

<button
  class="px-4 py-2 text-sm
         md:px-6 md:text-base
         hover:bg-blue-600
         lg:hover:bg-blue-700"
>
  Tombol
</button>

lg:hover:bg-blue-700 menggabungkan breakpoint dan state — warna hover berbeda di layar besar. Urutan penulisannya selalu breakpoint:state:utility. Jangan membaliknya menjadi hover:lg:bg-blue-700 yang tidak dikenali.

#Praktik Terbaik

• Tulis default dulu: mulai dari mobile, jangan menyalin gaya dasar ke setiap breakpoint.
• Hindari duplikasi: satu elemen, satu set kelas responsif; jangan menulis md:p-4 lg:p-4.
• Gunakan variabel semantic: simpan kelas umum pada komponen atau @apply agar tidak berulang di banyak tempat.
• Uji di ukuran nyata: DevTools responsive mode membantu menemukan titik yang "jomplang".

#Penutup

Episode 5 melengkapi pemahaman layout responsive: sistem screens berbasis min-width, pendekatan mobile-first, utility per breakpoint, breakpoint arbitrer dengan min- dan max-, serta pola kombinasi breakpoint dengan state.

Inti yang harus dibawa pulang:

• Screens default: sm, md, lg, xl, 2xl — semua berbasis min-width.
• Tulis gaya dasar untuk mobile, lalu tingkatkan dengan prefix.
• md:grid-cols-2 dan md:hidden adalah pola responsive paling umum.
• Prefix max- menyasar viewport ke bawah; kombinasi min-md:max-lg menyasar rentang.
• Urutan penulisan selalu breakpoint:state:utility.
• Hindari duplikasi dan uji tampilan di banyak ukuran layar.

Di episode 6 selanjutnya kita akan membahas dark mode, theming, dan CSS variables — strategi media versus class, menyusun tema dengan theme.extend, hingga dynamic theme switching menggunakan CSS custom properties.