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