⌘K

Command Palette

Search for a command to run...

Daftar

Kustomisasi Dasar Tailwind (CDN)

Bikin Tailwind lebih 'kamu banget'! Pelajari cara melakukan kustomisasi dasar seperti menambah warna, mengubah font, atau menyesuaikan breakpoint saat menggunakan Tailwind CSS v4.0 via CDN dengan directive `@theme`.

Tailwind Jadi "Gayamu": Kustomisasi Dasar Pake @theme (Mode CDN)

Udah bisa bikin tampilan keren dan bahkan dark mode pake utility class bawaan Tailwind? Mantap! Tapi, gimana kalau palet warna default Tailwind kurang cocok sama brand-mu? Atau kamu pengen pake font spesifik yang beda dari bawaan? Atau mungkin breakpoint responsifnya kurang pas buat desainmu?

Tenang, meskipun kita pake Tailwind via CDN (@tailwindcss/browser@4), kita tetep bisa ngelakuin kustomisasi dasar buat tema Tailwind kita. Caranya adalah dengan menggunakan directive @theme di dalem blok <style type="text/tailwindcss"> di HTML-mu.

Mengenal Directive @theme

Pas kamu pake @tailwindcss/browser, skrip itu bakal nyari blok <style type="text/tailwindcss"> di halamanmu. Di dalem blok itulah kamu bisa "ngobrol" sama konfigurasi tema Tailwind. Directive @theme dipake buat ngedefinisiin atau nge-override nilai-nilai tema default Tailwind.

  • Cara Kerja: Di bawah @theme { ... }, kamu bisa ngeset ulang atau nambahin variabel-variabel tema Tailwind. Variabel-variabel ini sebenernya adalah CSS Custom Properties (yang diawali --).
  • Skrip @tailwindcss/browser bakal ngebaca definisi tema ini dan nge-generate utility class yang relevan berdasarkan kustomisasimu.

Sintaks Dasar:

html
<head>
  <!-- ... meta tags dan skrip CDN Tailwind ... -->
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
  
  <style type="text/tailwindcss">
    @theme {
      /* Kustomisasi tema kamu di sini */
      /* Contoh: --nama-variabel-tema: nilai-baru; */
    }
 
    /* Kamu juga bisa nambahin @layer atau @utility di sini */
  </style>
</head>

Apa Aja yang Bisa Dikustomisasi dengan @theme?

Hampir semua aspek tema Tailwind bisa kamu sentuh. Ini beberapa yang paling umum:

1. Warna (Colors)

Kamu bisa nambahin warna kustommu sendiri, atau ngubah shade dari warna default Tailwind. Nama variabelnya ngikutin pola --color-{namaWarna}-{shade} atau --color-{namaWarna} untuk warna solid.

html
<style type="text/tailwindcss">
  @theme {
    /* Nambahin warna brand baru */
    --color-brand-primary: oklch(0.62 0.22 256.5); /* Biru Keunguan */
    --color-brand-secondary: oklch(0.85 0.15 90); /* Kuning Lembut */
 
    /* Ngubah salah satu shade warna abu-abu default */
    --color-gray-100: oklch(0.99 0.005 240); /* Bikin gray-100 jadi lebih terang lagi */
 
    /* Nambahin warna fungsional */
    --color-success: oklch(0.75 0.2 145); /* Hijau untuk pesan sukses */
    --color-danger: oklch(0.65 0.25 25);  /* Merah untuk pesan error */
  }
</style>
 
<!-- Cara pakenya di HTML: -->
<button class="bg-brand-primary text-white p-2">Tombol Brand</button>
<div class="bg-gray-100 p-4">Konten dengan background abu-abu sangat terang.</div>
<p class="text-success">Operasi berhasil!</p>
  • Format Warna: Kamu bisa pake format warna CSS apa aja (HEX, RGB, HSL, atau bahkan fungsi warna modern kayak oklch() seperti di contoh, yang ngasih gamut warna lebih luas).
  • Utility Class Otomatis: Pas kamu definisiin --color-brand-primary, Tailwind (via skrip browser) biasanya bakal otomatis nge-generate utility kayak bg-brand-primary, text-brand-primary, border-brand-primary, dll. Keren kan?

2. Font Family

Kamu bisa ngeset ulang tumpukan font default buat kategori sans, serif, atau mono, atau bahkan nambahin kategori font kustommu sendiri.

html
<style type="text/tailwindcss">
  @theme {
    /* Ganti font sans-serif default */
    --font-sans: "Inter", "ui-sans-serif", "system-ui", /* ... fallback lainnya */;
    
    /* Ganti font serif default */
    --font-serif: "Merriweather", "Georgia", "serif";
 
    /* Nambahin font display kustom */
    --font-display: "Lobster", "cursive"; 
  }
</style>
 
<!-- Cara pakenya di HTML: -->
<body class="font-sans"> <!-- Seluruh body pake font Inter -->
  <h1 class="font-display text-4xl">Judul Pake Font Lobster</h1>
  <p class="font-serif">Paragraf ini pake font Merriweather.</p>
</body>

Pastikan font yang kamu sebutin itu udah tersedia di sistem pengguna atau udah kamu load pake @font-face (yang juga bisa kamu definisiin di blok <style type="text/tailwindcss"> di luar @theme, atau di file CSS terpisah).

3. Ukuran Font (Font Size)

Kamu bisa nambahin atau ngubah skala ukuran font. Nama variabelnya --text-{namaSkala} atau --font-size-{namaSkala} (cek dokumentasi v4 untuk konvensi pasti).

html
<style type="text/tailwindcss">
  @theme {
    /* Nambahin ukuran font kustom */
    --font-size-hero: 3.5rem; /* buat utility text-hero */
    --line-height-hero: 1.1;
 
    /* Ngubah ukuran text-lg default (contoh, mungkin gak perlu) */
    /* --font-size-lg: 1.25rem; */ 
  }
</style>
 
<h1 class="text-hero leading-hero">Judul Hero Super Gede!</h1>
<p class="text-lg">Teks large yang ukurannya mungkin udah kita ubah.</p>
  • Tailwind v4 menggunakan sistem variabel yang lebih modular. Untuk font-size, kamu biasanya mendefinisikan --font-size-{key} dan bisa juga --line-height-{key} yang terkait. Utility-nya akan jadi text-{key}.

4. Breakpoint Responsif (Screens)

Kamu bisa ngubah nilai breakpoint default atau nambahin breakpoint baru. Nama variabelnya --breakpoint-{namaBreakpoint}.

html
<style type="text/tailwindcss">
  @theme {
    /* Ngubah breakpoint md */
    --breakpoint-md: 50rem; /* (800px, defaultnya 768px) */
 
    /* Nambahin breakpoint baru buat layar super kecil */
    --breakpoint-xs: 25rem; /* (400px) */
  }
</style>
 
<!-- Cara pakenya di HTML: -->
<div class="w-full xs:w-1/2 md:w-1/3">
  <!-- Di layar xs ke atas, lebarnya 1/2. Di md ke atas, lebarnya 1/3 -->
</div>

Setelah nambahin breakpoint xs, kamu jadi bisa pake prefix xs: di utility class-mu.

5. Spacing, Sizing, dan Skala Lainnya

Kamu juga bisa ngustomisasi skala default buat padding, margin, width, height, border-radius, box-shadow, dll. Biasanya nama variabelnya ngikutin pola --spacing-{key}, --size-{key}, --radius-{key}, --shadow-{key}. Selalu cek dokumentasi Tailwind v4 terbaru untuk nama variabel tema yang paling akurat.

html
<style type="text/tailwindcss">
  @theme {
    /* Nambahin skala spacing baru */
    --spacing-128: 32rem; /* buat p-128, m-128, dll. */
 
    /* Kustomisasi radius */
    --radius-card: 0.75rem; /* buat rounded-card */
  }
</style>
 
<div class="p-128 m-auto">Padding super gede!</div>
<div class="rounded-card shadow-lg">Kartu dengan sudut kustom.</div>

Pentingnya Dokumentasi Tailwind

Karena nama-nama variabel tema ini bisa banyak dan spesifik, sumber terbaikmu adalah dokumentasi resmi Tailwind CSS v4. Di sana dijelasin semua variabel tema default yang bisa kamu override dan gimana cara ngelakuinnya.

Cari bagian "Theme" atau "Configuration" di dokumentasi v4.

Kapan Kustomisasi via CDN Ini Cukup?

  • Proyek Kecil & Prototyping: Kalau kamu cuma butuh ngubah beberapa warna dasar, font, atau breakpoint, cara ini udah oke banget dan cepet.
  • Belajar & Eksperimen: Sangat cocok buat nyoba-nyoba kustomisasi tanpa ribet setup build tool.

Kapan Perlu Setup Build Tool buat Kustomisasi Lebih Lanjut?

Kalau kustomisasimu udah makin kompleks, atau kamu butuh:

  • Pake plugin Tailwind pihak ketiga.
  • Optimasi file CSS final (PurgeCSS/JIT yang lebih terkontrol).
  • Integrasi yang lebih dalem sama framework JavaScript.
  • Struktur konfigurasi yang lebih modular (misal, misahin tema ke file sendiri).

Maka, saatnya kamu beralih ke setup Tailwind CSS dengan build process (pake PostCSS, Vite, atau Tailwind CLI). Di situ, kamu bakal punya file konfigurasi khusus (biasanya tailwind.config.js di v3 atau file CSS yang mengimpor tailwindcss/theme dan tailwindcss/utilities di v4) yang ngasih kontrol jauh lebih gede.

Tapi, buat belajar dasar dan kustomisasi simpel, @theme di mode browser ini udah jadi alat yang sangat berguna!

Dengan @theme, kamu bisa "nyetel" Tailwind biar lebih pas sama identitas visual proyekmu, bahkan tanpa perlu keluar dari file HTML pas lagi pake CDN. Ini ngebuka pintu buat desain yang lebih unik sambil tetep nikmatin kemudahan utility-first.

Jangan ragu buat ngoprek bagian @theme ini. Coba ganti warna, font, atau breakpoint, terus liat gimana utility class-mu langsung nyesuaiin!

Kuis Kustomisasi Dasar Tailwind (CDN)

Pertanyaan 1 dari 4

Saat menggunakan Tailwind CSS v4.0 via CDN (`@tailwindcss/browser`), directive apa yang Anda gunakan di dalam blok `<style type="text/tailwindcss">` untuk mendefinisikan atau mengubah variabel tema?