⌘K

Command Palette

Search for a command to run...

Daftar

Setup Tailwind via CDN

Langsung ngoding tanpa ribet! Pelajari cara menggunakan Tailwind CSS v4.0 secara instan di halaman HTML Anda menggunakan CDN @tailwindcss/browser, termasuk konfigurasi dasar via tag <style>.

Langsung Gas! Nyobain Tailwind CSS v4 Pake CDN, Gak Pake Ribet!

Udah mulai penasaran kan gimana rasanya ngoding pake Tailwind CSS? Kabar baiknya, buat nyobain Tailwind CSS v4.0 ini, kamu gak perlu langsung pusing mikirin instalasi Node.js, npm, atau konfigurasi PostCSS yang rumit. Ada cara super gampang buat langsung pake Tailwind di halaman HTML-mu: yaitu pake CDN (Content Delivery Network)!

Tailwind nyediain skrip khusus bernama @tailwindcss/browser yang bisa kamu masukin ke HTML-mu. Skrip ini bakal "ngebaca" class-class Tailwind yang kamu pake di HTML dan nge-generate style CSS yang dibutuhin langsung di browser secara real-time. Cocok banget buat belajar, prototyping cepet, atau sekadar pengen tau "rasanya" pake Tailwind.

Langkah-langkah Setup Tailwind CSS v4 via CDN

Gampang banget, cuma butuh beberapa baris tambahan di file HTML-mu:

  1. Bikin File HTML Dasar: Buat file HTML biasa, misalnya index.html.

    html
    <!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Coba Tailwind via CDN</title>
  <!-- Kita bakal nambahin sesuatu di sini -->
</head>
<body>
  <!-- Konten kita nanti di sini -->
  <h1 class="text-3xl font-bold underline">
    Halo Tailwind!
  </h1>
</body>
</html>

    Kalau kamu buka file ini di browser sekarang, "Halo Tailwind!" bakal tampil biasa aja, tanpa style underline, font tebal, atau ukuran 3xl. Kenapa? Karena browser belum tau arti class text-3xl, font-bold, dan underline itu apa.

  2. Tambahin Skrip CDN @tailwindcss/browser: Di dalem tag <head> file HTML-mu, sebelum tag <style type="text/tailwindcss"> (yang bakal kita bahas) atau sebelum link ke file CSS-mu sendiri (kalau ada), tambahin baris skrip ini:

    html
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

    Jadi, bagian <head>-mu sekarang kurang lebih kayak gini:

    html
    <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Coba Tailwind via CDN</title>
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
  <!-- (Opsional) Konfigurasi Tailwind di sini -->
</head>

    Skrip ini yang bakal "ngaktifin" kemampuan Tailwind di browsermu.

  3. (Opsional tapi Berguna) Konfigurasi Dasar Tailwind Langsung di HTML: Tailwind CSS v4.0 via CDN ini keren banget karena kamu bisa ngasih konfigurasi dasar langsung di dalem tag <style> dengan atribut type="text/tailwindcss". Ini bukan buat nulis CSS biasa ya, tapi buat ngasih tau skrip @tailwindcss/browser gimana cara nge-generate utility-nya atau nambahin tema kustom.

    Contoh, kita mau nambahin warna kustom bernama clifford (merah khasnya Tailwind) dan ngubah font default:

    html
    <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Coba Tailwind via CDN</title>
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
  <style type="text/tailwindcss">
    @theme {
      /* Menambah atau mengubah variabel tema */
      --color-clifford: #da373d; /* Warna merah Clifford */
      --font-sans: "Inter", "sans-serif"; /* Ganti font sans-serif default */
 
      /* Kamu juga bisa ngeset ulang breakpoint, spacing, dll. di sini */
      /* --breakpoint-lg: 64rem; */ 
    }
 
    @layer base {
      /* Nambahin style dasar kustom kalau perlu */
      /* h1 {
        @apply text-clifford; 
      } */
      /* Penggunaan @apply mungkin punya batasan di mode browser, lebih aman pake class langsung atau custom utility */
    }
 
    @utility custom-underline {
        /* Bikin custom utility sederhana */
        text-decoration-line: underline;
        text-decoration-color: var(--color-clifford);
        text-decoration-thickness: 2px;
    }
  </style>
</head>
<body>
  <h1 class="text-3xl font-bold text-clifford custom-underline"> <!-- Pake warna custom dan utility custom -->
    Halo Tailwind v4 dengan CDN!
  </h1>
  <p class="font-sans mt-4">
    Ini paragraf dengan font Inter (kalau ada di sistemmu).
  </p>
  <button class="bg-primary hover:bg-blue-700 text-white p-2 rounded">Tombol Kustom</button>
</body>
</html>

    Penjelasan blok <style type="text/tailwindcss">:

    • type="text/tailwindcss": Ini penting! Ngasih tau skrip @tailwindcss/browser buat ngeproses isi tag <style> ini sebagai konfigurasi Tailwind, bukan CSS biasa.
    • @theme { ... }: Di sini kamu bisa ngedefinisiin atau nge-override variabel-variabel tema Tailwind. Variabel ini sebenernya jadi CSS Custom Properties (misal, --color-clifford). Kamu bisa liat daftar lengkap variabel tema di dokumentasi Tailwind.
    • @layer base { ... }: Buat nambahin style dasar ke elemen HTML (kayak Preflight-nya Tailwind, tapi versi kustommu). Penggunaan @apply di sini mungkin punya batasan di mode browser, jadi hati-hati.
    • @utility custom-nama { ... }: (Fitur v4) Cara baru buat bikin class utility kustommu sendiri.

  4. Buka File HTML di Browser: Sekarang, coba buka file HTML-mu itu di browser. Voila! Teks "Halo Tailwind!"-mu harusnya udah jadi gede (text-3xl), tebel (font-bold), dan ada garis bawah warna clifford (text-clifford custom-underline). Paragrafnya juga pake font sans-serif yang udah kita set. Ajaib kan? Gak ada file CSS eksternal, semua diproses langsung di browser!

Cara Kerja @tailwindcss/browser (Singkatnya)

Skrip CDN ini canggih banget:

  1. Pas halaman dimuat, dia nge-scan semua class yang kamu pake di elemen HTML-mu.
  2. Dia juga ngebaca konfigurasi yang kamu tulis di <style type="text/tailwindcss">.
  3. Terus, dia nge-generate style CSS yang relevan buat class-class dan konfigurasi itu secara on-the-fly (langsung pas itu juga).
  4. Style CSS yang di-generate itu disuntikkin ke halaman, jadi browser bisa nampilinnya.

Ini semua terjadi otomatis di belakang layar!

Kelebihan dan Kekurangan Pake CDN

Kelebihan:

  • Super Gampang Buat Mulai: Gak perlu instal apa-apa, gak perlu setup build tool. Tinggal tambahin satu baris skrip. Cocok banget buat belajar, nyoba-nyoba, atau bikin prototipe cepet.
  • Langsung Liat Hasil: Kamu bisa langsung liat efek class utility-nya di browser.
  • Konfigurasi Dasar Bisa: Kamu tetep bisa ngelakuin kustomisasi tema dasar lewat blok <style type="text/tailwindcss">.

Kekurangan:

  • Performa: Karena CSS-nya di-generate di sisi klien (browser) pas halaman dimuat, ini bisa lebih lambat dibanding pake Tailwind yang udah di-compile jadi file CSS statis pas proses build. Mungkin ada sedikit jeda sebelum style-nya nongol (Flash of Unstyled Content - FOUC), apalagi di koneksi lambat.
  • Ukuran Skrip: Kamu nge-load skrip @tailwindcss/browser yang ukurannya lumayan, padahal mungkin kamu cuma pake sedikit utility.
  • Fitur Terbatas: Gak semua fitur canggih Tailwind (kayak plugin kompleks atau optimasi PurgeCSS yang ngilangin utility gak kepake secara otomatis) bisa jalan maksimal di mode browser ini.
  • Ketergantungan Sama CDN: Kalau CDN-nya lagi down (jarang banget sih buat CDN gede kayak jsDelivr/unpkg), Tailwind-mu gak bakal jalan.
  • Gak Cocok buat Produksi Proyek Besar: Buat proyek beneran yang mau di-deploy ke publik dan butuh performa optimal, sangat disarankan buat pake setup Tailwind dengan build process (misal, pake PostCSS, Vite, atau Tailwind CLI). Dengan build process, semua utility CSS-mu bakal di-compile jadi file CSS statis yang udah dioptimasi.

Kapan Pake CDN Ini?

  • Belajar Tailwind: Ini cara paling pas buat kamu yang baru mau kenalan dan nyoba-nyoba Tailwind tanpa ribet.
  • Prototyping Cepat: Mau bikin mock-up atau demo cepet? CDN ini oke banget.
  • Proyek Kecil Sederhana: Buat halaman statis simpel yang gak terlalu mikirin performa atau ukuran file, ini bisa jadi solusi.
  • Nyisipin di Platform Terbatas: Kadang di platform online editor kayak CodePen atau JSFiddle, pake CDN ini cara paling gampang buat nambahin Tailwind.

Jadi, dengan @tailwindcss/browser via CDN, kamu udah bisa langsung terjun dan ngerasain asyiknya ngoding pake utility classes Tailwind v4.0. Ini adalah "gerbang masuk" yang super ramah buat pemula.

Di materi-materi berikutnya, kita bakal mulai ngoprek berbagai macam utility class yang disediain Tailwind buat ngatur spacing, tipografi, warna, layout, dan banyak lagi. Siap buat "nyusun LEGO" desainmu?

Kuis Setup Tailwind CSS via CDN

Pertanyaan 1 dari 4

Apa cara termudah untuk mulai menggunakan Tailwind CSS v4.0 di sebuah file HTML tanpa perlu instalasi atau build tool?