Belajar Tailwind CSS Dasar #14: Variabel & Extend Theme

• 1. Apa Itu Variabel Tema (@theme)?
• 2. Menambah Token Lain: Spacing, Font, Breakpoints...
• 3. Extend Tema Menggantikan tailwind.config.js
• 4. Dynamic & Arbitrary Values
• Kesimpulan

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