Halo teman-teman semuanya, setelah sebelumnya kita belajar Transisi & Animasi, sekarang kita akan mengenal cara membuat Variable dan Extend Theme di Tailwind CSS v4 menggunakan sistem CSS‑first.
Dengan @theme
, kita bisa menambahkan warna, ukuran, atau token lainnya langsung di CSS—tanpa perlu tailwind.config.js
—dan menghasilkan utilitas baru otomatis.
1. Apa Itu Variabel Tema (@theme
)?
Di Tailwind v4, @theme
adalah cara untuk mendefinisikan design token berupa variabel CSS yang otomatis menghasilkan kelas utilitas seperti bg-*
, text-*
, dan lain-lain.
Contoh mendefinisikan warna mint
:
@import "tailwindcss";
@theme {
--color-mint-500: oklch(0.72 0.11 178);
}
Setelah itu, kita bisa menggunakan:
<div class="bg-mint-500 text-mint-500">
Ini elemen dengan warna mint.
</div>
2. Menambah Token Lain: Spacing, Font, Breakpoints...
Bukan hanya warna—variabel tema bisa digunakan untuk apa saja: spasi, font, breakpoint, easing, dan lain-lain .
Contoh:
@import "tailwindcss";
@theme {
--spacing-72: 18rem;
--font-display: "Satoshi", sans-serif;
--breakpoint-3xl: 120rem;
}
Label spacing‑72
menghasilkan utilitas p-72
, m-72
, dan seterusnya; font-display
mendukung kelas seperti font-display
; breakpoint-3xl
memunculkan prefix seperti 3xl:
.
3. Extend Tema Menggantikan tailwind.config.js
Sebelumnya, untuk menambah tema kita edit tailwind.config.js
. Sekarang cukup tulis @theme
di CSS:
@import "tailwindcss";
@theme {
--color-primary: hsl(200, 80%, 50%);
--spacing-72: 18rem;
}
4. Dynamic & Arbitrary Values
Tailwind v4 mendukung handling kelas yang fleksibel lewat variabel ini. Misalnya:
@theme {
--breakpoint-my: 55rem;
}
Kemudian bisa digunakan sebagai:
<div class="my:bg-pink-200">...</div>
atau
<div class="min-[500px]:text-lg">...</div>
Kesimpulan
Dengan model CSS‑first @theme
di Tailwind v4, kita bisa menambahkan desain token langsung dari CSS. Ini menggantikan kebutuhan konfigurasi JS dan mendorong workflow yang lebih konsisten dan ringan. kita dapat membuat kelas utilitas baru seperti bg-brand
, p-72
, atau font-display
hanya dengan menuliskan variabel CSS.
Terima Kasih