Main Menu

Belajar Tailwind CSS Dasar #10: Custom Breakpoints


👍 0 ❤️ 0 💡 0 🔥 0 🙌 0 🥳 0
Belajar Tailwind CSS Dasar #10: Custom Breakpoints

Halo teman-teman semuanya, setelah kita mempelajari responsive design dengan breakpoint bawaan Tailwind CSS, sekarang saatnya kita mempelajari cara membuat custom breakpoint di Tailwind CSS versi 4.

Tailwind CSS v4 memperkenalkan pendekatan baru yang disebut CSS-first — semua konfigurasi seperti breakpoint bisa ditulis langsung di dalam file CSS menggunakan @theme, bukan lagi hanya melalui file tailwind.config.js.

1. Breakpoint Default Tailwind v4

Berikut adalah daftar breakpoint bawaan yang tersedia di Tailwind CSS v4:

Prefix Ukuran Minimum (rem) Contoh Class
sm 40rem (640px) sm:text-sm
md 48rem (768px) md:grid-cols-2
lg 64rem (1024px) lg:text-lg
xl 80rem (1280px) xl:p-8
2xl 96rem (1536px) 2xl:text-3xl

2. Menambahkan Custom Breakpoint

Untuk menambahkan breakpoint baru seperti xs atau 3xl, kita dapat menggunakan @theme seperti ini:

@import "tailwindcss";

@theme {
  --breakpoint-xs: 30rem;
  --breakpoint-3xl: 120rem;
}

Dengan konfigurasi ini, kita bisa langsung menulis class seperti:

<p class="xs:text-sm md:text-base 3xl:text-4xl">
  Ini teks yang berubah sesuai lebar layar.
</p>

Catatan Penting:


Pendekatan @theme hanya dapat digunakan dalam proyek Tailwind CLI. Jika kita menggunakan Tailwind via CDN (seperti di playground), maka @theme tidak akan berfungsi. Untuk praktek, silakan gunakan CLI setup, atau tetap gunakan breakpoint bawaan.

3. Menghapus atau Menimpa Breakpoint

Jika kita ingin menghapus semua breakpoint default, kita bisa menuliskan:

@import "tailwindcss";

@theme {
  --breakpoint-*: initial;
  --breakpoint-tablet: 36rem;
  --breakpoint-laptop: 60rem;
}

Langkah ini berguna jika kita ingin mengganti semua ukuran dengan sistem yang lebih relevan untuk proyek kita.

4. Arbitrary Breakpoints (Once-off)

Jika kita hanya butuh breakpoint tertentu satu kali tanpa konfigurasi, gunakan arbitrary value langsung di class HTML:

<div class="min-[500px]:text-xl max-[400px]:text-sm">
  Teks ini adaptif.
</div>

Pendekatan ini praktis untuk kasus satuan tanpa perlu menyentuh konfigurasi atau @theme.

Kesimpulan

Dengan pendekatan CSS-first di Tailwind CSS v4, kita bisa mengatur custom breakpoint langsung dari file CSS menggunakan @theme.

Namun, perlu diingat bahwa fitur ini hanya tersedia saat kita menggunakan Tailwind dengan CLI (bukan via CDN). Untuk eksplorasi ringan, gunakan breakpoint bawaan atau arbitrary values.

Terima Kasih


Fika Ridaul Maulayya
Full-Stack Developer, Content Creator and CO-Founder SantriKoding.com

Suka dengan tulisan di SantriKoding? Kamu bisa memberikan dukungan dengan berdonasi atau bagikan konten ini di sosial media. Terima kasih atas dukungan Anda!

KEBIJAKAN KOMENTAR

Saat memberikan komenatar silahkan memberikan informasi lengkap tentang error, seperti: screenshot, link kode, dll. Baca aturan komentar kami