Panduan Penggunaan Tailwind CSS V4 dari Dasar Hingga Menengah

Daftar Isi

  • Pendahuluan
  • Mengapa Tailwind CSS v4
    • Mesin Super Cepat dan Konfigurasi Minimalis
    • CSS-First Configuration: Kustomisasi Langsung di File CSS kamu
    • Dirancang untuk Web Modern
  • Apa yang Baru di Tailwind CSS v4
    • Konfigurasi Tanpa tailwind.config.js
    • Penggunaan @theme
      1. @import "tailwindcss";
      2. body { ... }
      3. @theme { ... }
    • ⭐ Warna Kustom
    • ⭐ Ketebalan Font Kustom
    • ⭐ Keluarga Font Kustom
    • Optimasi Performa
  • Memulai dengan Tailwind CSS v4
    • Menggunakan CDN
    • Menggunakan Package Manager (npm CLI)
      • ⭐ npm install
      • ⭐ tailwindcss
      • ⭐ @tailwindcss/cli
      • ⭐ Jadi, Gunanya Apa?
    • Struktur Proyek Dasar
    • Menambahkan Tailwind CSS ke Proyek kamu
    • Kesimpulan Gunanya Apa?
  • Konsep Dasar Tailwind CSS v4
    • Utilitas-First
      • ⭐ Apa itu Konsep Utilitas-First?
      • ⭐ Jadi, Apa Keuntungan Utamanya?
    • Responsif dengan Utilitas
    • Pseudokelas dan Atribut
  • Menggunakan Fitur Baru Tailwind CSS v4
    • Memanfaatkan @theme untuk Kustomisasi
    • Menggunakan Variabel CSS dengan @theme
    • Contoh Kustomisasi Warna
    • Contoh Kustomisasi Font
    • Peran Minimal tailwind.config.js
    • Kapan Menggunakan tailwind.config.js di v4?
    • Contoh Konfigurasi Minimal
  • Membangun Komponen dengan Tailwind CSS v4
    • Membuat Tombol Kustom
    • Mendesain Kartu Produk
    • Membangun Navigasi Responsif
  • Kelas Rekomendasi BuildWithAngga
    • 🔥 1. Belajar dari Real Project, Bukan Teori Doang
    • 🔥 2. Visual Interaktif & UI Keren
    • 🔥 3. Materi Up-to-date & Fokus ke Industri
    • 🔥 4. Penjelasan Simpel, Bahasa Indonesia
    • 🔥 5. Mentoring & Sertifikat Karier
  • Penutup

Pendahuluan

Halo, para pejuang kode! Pernahkah kamu merasa frustrasi saat berhadapan dengan styling website? Ingin membuat sebuah tombol sederhana, namun prosesnya terasa serumit meluncurkan roket ke bulan. Belum lagi, berjibaku dengan file CSS yang bercabang dan saling menimpa (specificity wars), yang seringkali membuat kita ingin menyerah di tengah jalan.

Jika skenario di atas terasa familier, kamu berada di tempat yang tepat! Artikel ini akan menjadi "pelatih pribadi" kamu untuk berkenalan dengan Tailwind CSS v4, sebuah pembaruan besar yang dirancang untuk merevolusi cara kita menulis CSS. Lupakan kerumitan dan sambutlah sebuah alur kerja (workflow) yang lebih cepat, intuitif, dan jauh lebih menyenangkan. Siap-siap, karena produktivitas kamu akan segera melesat ke level berikutnya.

Mengapa Tailwind CSS v4

Learn Tailwind CSS

Mungkin ada yang bergumam, "Ah, versi baru lagi. Pasti lebih rumit belajarnya." Buang jauh-jauh pikiran itu! Justru, Tailwind CSS v4 hadir untuk membereskan segala keribetan yang mungkin kamu temui di versi-versi sebelumnya. Jika versi lama sudah mempermudah hidup kita, versi 4 ini membawanya ke tingkat yang sama sekali baru.

Bayangkan jika sebelumnya kita harus meracik bumbu dari nol, menyiapkan preprocessor, mengatur konfigurasi bundler yang kompleks, dan mendefinisikan setiap detail kecil. Kini, dengan v4, bumbu-bumbu utama terbaik sudah disiapkan untuk kamu. Tugas kita hanya tinggal meraciknya menjadi sebuah masakan yang lezat. Mari kita bedah apa saja "bumbu" ajaib tersebut:

1. Mesin Super Cepat dan Konfigurasi Minimalis

Salah satu terobosan terbesar di v4 adalah mesin performa tinggi baru yang ditulis dengan Rust. Hasilnya? Proses build bisa 5x lebih cepat dan rebuild saat ada perubahan kecil bahkan 100x lebih ngebut, hanya dalam hitungan mikrodetik! Selain itu, proses instalasinya disederhanakan secara drastis:

  • Minim dependensi: Ucapkan selamat tinggal pada daftar package.json yang membengkak.
  • Tanpa Konfigurasi Awal: kamu tidak lagi wajib membuat file tailwind.config.js. Semuanya berjalan "langsung dari kotaknya".
  • Deteksi Konten Otomatis: V4 secara cerdas akan memindai file-file templat kamu tanpa perlu menentukannya secara manual.

2. CSS-First Configuration: Kustomisasi Langsung di File CSS kamu

Ini adalah perubahan paradigma yang signifikan. Lupakan keharusan untuk bolak-balik antara file JavaScript dan CSS. Di v4, kamu bisa melakukan kustomisasi dan ekstensi framework langsung di dalam file CSS kamu menggunakan native CSS features seperti @theme dan variabel CSS.

/* Langsung kustomisasi di CSS kamu! */
@import "tailwindcss";

@theme {
  --font-display: "Satoshi", "sans-serif";
  --breakpoint-3xl: 1920px;
  --color-brand-primary: oklch(65.62% 0.224 259.35);
}

.btn-primary {
  @apply bg-brand-primary text-white;
}

Pendekatan ini tidak hanya lebih rapi, tetapi juga lebih selaras dengan standar web modern.

3. Dirancang untuk Web Modern

Tailwind CSS v4 dibangun di atas fitur-fitur CSS modern yang kini didukung oleh peramban-peramban terbaru. Ini termasuk:

  • Cascade Layers (@layer): Memberi kamu kontrol penuh atas urutan prioritas style tanpa pusing soal specificity.
  • Container Queries: Membuat komponen yang responsif berdasarkan ukuran "wadahnya", bukan hanya layar viewport.
  • Palet Warna Modern (OKLCH): Menghadirkan warna-warna yang lebih cerah dan konsisten di berbagai perangkat.

Singkatnya, Tailwind CSS v4 bukan sekadar pembaruan. Ia adalah sebuah perombakan cerdas yang membuang semua bagian yang membosankan dan lambat dari proses styling, sehingga kita bisa fokus pada bagian yang paling penting: menciptakan antarmuka pengguna yang indah dan fungsional dengan lebih efisien.

Apa yang Baru di Tailwind CSS v4

Oke, sekarang kita masuk ke bagian yang paling asyik: apa aja sih fitur-fitur baru yang bakal bikin kamu melongo di Tailwind CSS v4 ini? Siap-siap, ya!

Konfigurasi Tanpa tailwind.config.js

code overview

Ini adalah perubahan paradigma terbesar. kamu tidak lagi memerlukan file tailwind.config.js untuk kustomisasi dasar.

  • Tanpa tailwind.config.js: Untuk memulai, kamu tidak perlu membuat file konfigurasi sama sekali.
  • Kustomisasi dengan @theme: kamu bisa menambahkan warna, font, breakpoint, atau nilai tema lainnya langsung di dalam file CSS utama kamu menggunakan at-rule @theme. Ini membuat alur kerja lebih terpusat di CSS.
/* input.css */
@import "tailwindcss";

@theme {
  --color-brand: #5f43b2;
  --font-sans: "Inter", sans-serif;
  --breakpoint-3xl: 1920px;
}

Penggunaan @theme

how to use @theme

Menyinggung lagi yang namanya @theme. Ini fitur keren banget buat kamu yang suka kustomisasi tapi enggak mau ribet. Dengan @theme, kamu bisa ngatur tema warnamu, ukuran font, atau spacing cuma dengan modal variabel CSS. Jadi, enggak perlu lagi nulis utility class panjang-panjang kalau mau ngubah tema. Lebih hemat waktu dan tenaga, biar bisa ngopi-ngopi ganteng atau cantik. Lihat kode ini, kode ini itu kode yang sama kayak gambar di atas:

@import "tailwindcss";

body {
  font-family: "Poppins";
  background-color: #DAE1E9;
}

@theme {
  --color-empty-bg: #FAFAFA;
  --color-empty-black: #1F1449;
  --color-empty-grey: #9698A9;

  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --font-family-body: 'Inter', sans-serif;
  --font-family-heading: 'Poppins', serif;
}

Penjelasannya:

1. @import "tailwindcss";

Ini adalah baris pembuka yang paling penting di Tailwind CSS v4.

  • Maksudnya apa?

Ini seperti kamu bilang ke file CSS-mu, "Woi, panggil semua kekuatan dan jurus-jurus sakti dari Tailwind CSS ke sini!". Perintah ini secara otomatis akan memasukkan semua bagian inti dari Tailwind: base (reset CSS dasar), components (kelas untuk komponen), dan utilities (ribuan kelas utilitas seperti mt-4, flex, text-center, dll).

  • Kenapa keren?

Di versi sebelumnya, kamu mungkin perlu mengimpor beberapa bagian secara terpisah atau pakai arahan @tailwind. Di v4, cukup satu baris ini saja, semua sudah beres. Super simpel!

2. body { ... }

body {
  font-family: "Poppins";
  background-color: #DAE1E9;
}

Ini adalah blok CSS biasa, sama seperti yang biasa kamu tulis tanpa framework apa pun.

  • Maksudnya apa?

Di sini kamu mengatur gaya dasar untuk seluruh halaman web-mu (elemen <body>).

  1. font-family: "Poppins";: Kamu menetapkan bahwa, secara default, semua teks di website-mu akan menggunakan font "Poppins".
  2. background-color: #DAE1E9;: Kamu memberi warna latar belakang seluruh halaman dengan kode warna #DAE1E9 (warna abu-abu kebiruan yang lembut).
  • Kenapa ini ada?

Ini menunjukkan bahwa kamu tetap bisa mencampur CSS biasa dengan Tailwind. Jadi, untuk gaya-gaya global yang berlaku di semua halaman, menuliskannya di body adalah praktik yang bagus.

3. @theme { ... }

Nah, ini dia bagian ajaib dan fitur kamulan dari Tailwind CSS v4!

@theme {
  /* ... isinya di sini ... */
}
  • Maksudnya apa? Anggap @theme ini sebagai "dapur kustom" kamu. Di sinilah kamu bisa menambahkan, mengubah, atau memperluas "buku menu" bawaan Tailwind. Semua yang kamu definisikan di dalam blok ini akan secara otomatis diubah oleh Tailwind menjadi kelas-kelas utilitas yang bisa langsung kamu pakai di HTML.

Mari kita lihat isi "dapur"-nya:

⭐ Warna Kustom

--color-empty-bg: #FAFAFA;
--color-empty-black: #1F1449;
--color-empty-grey: #9698A9;
  • Maksudnya: Kamu lagi nambahin tiga warna baru ke palet warnamu.
    • Kamu kasih nama empty-bg untuk warna putih pudar (#FAFAFA).
    • Kamu kasih nama empty-black untuk warna hitam keunguan (#1F1449).
    • Kamu kasih nama empty-grey untuk warna abu-abu (#9698A9).
  • Cara pakainya gimana? Setelah ini, kamu bisa langsung pakai kelas seperti bg-empty-bg, text-empty-black, atau border-empty-grey di HTML-mu.

⭐ Ketebalan Font Kustom

--font-weight-regular: 400;
--font-weight-semibold: 600;
--font-weight-bold: 700;
  • Maksudnya: Kamu membuat alias untuk nilai ketebalan font.
  • Cara pakainya? Tailwind akan membuatkan kelas font-regular, font-semibold, dan font-bold untukmu. Jadi, daripada nulis font-[400], kamu bisa pakai font-regular yang lebih gampang diingat.

⭐ Keluarga Font Kustom

  --font-family-body: 'Inter', sans-serif;
  --font-family-heading: 'Poppins', serif;
  • Maksudnya: Kamu mendefinisikan dua grup font utama.
    • Satu grup bernama body yang pakai font 'Inter'.
    • Satu grup lagi bernama heading yang pakai font 'Poppins'.
  • Cara pakainya? Sekarang kamu punya kelas super berguna: font-body untuk semua teks paragraf dan font-heading untuk semua judul (h1, h2, dll). Ini membuat desainmu lebih konsisten.

Kesimpulannya, kode yang kamu punya ini adalah contoh sempurna alur kerja di Tailwind v4: kamu mengimpor semua kekuatan Tailwind, mengatur sedikit CSS dasar, lalu menambahkan 'resep' kustom kamu sendiri langsung di dalam satu file CSS yang sama. Semuanya jadi lebih rapi dan terpusat.

Optimasi Performa

Faster Tailwind CSS documentation

Dan yang terakhir, tapi enggak kalah penting, performa-nya itu lho! Di versi 4 ini, Tailwind CSS udah dioptimasi habis-habisan biar website kamu makin ngebut dan ringan. Ibaratnya, kalau dulu kamu ngangkut barang pakai truk tua, sekarang kamu pakai mobil sport yang super ngebut tapi irit bensin.

Jadi, pengunjung website kamu enggak bakal kabur duluan karena nunggu loading yang lama. Mantap jiwa.

Memulai dengan Tailwind CSS v4

Nah, sekarang setelah kita kenalan dan tahu kenapa Tailwind CSS v4 ini patut dicoba, saatnya kita langsung praktik. Ibarat mau masak, kita udah tahu resepnya dan bahan-bahannya, sekarang tinggal nyalain kompor dan mulai eksekusi! Enggak perlu takut, langkah-langkahnya gampang banget kok, dijamin enggak bikin jidat berkerut.

Yang namanya mulai dari awal, pasti kita butuh "pondasi" dulu, kan? Di Tailwind CSS v4, ada beberapa cara buat masang atau "nginstal" biar dia bisa jalan di proyek kita. Pilih aja yang paling nyaman buat kamu!

Menggunakan CDN

CDN tailwind CSS

Oke, ini cara paling cepet dan gampang buat nyobain Tailwind CSS v4 tanpa ribet instal-instal ini itu. Cocok banget buat kamu yang mau cepet-cepet lihat hasilnya atau lagi belajar dan enggak mau pusing sama setup proyek.

Tinggal tambahin satu baris kode ini di <head> HTML kamu, dan voilà! Tailwind CSS langsung siap dipakai. Ini ibaratnya kayak kamu pesen makanan delivery, tinggal tunggu di rumah, enggak perlu masak sendiri.

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

Menggunakan Package Manager (npm CLI)

Tailwind CLI documentation

Nah, kalau kamu tipe yang serius dan mau bikin proyek beneran (bukan cuma coba-coba), cara ini lebih direkomendasikan. Kita bakal pakai npm, package manager yang sering banget dipake sama para developer. Ini kayak kamu ngumpulin semua bahan makanan dari supermarket, lebih lengkap dan bisa dikelola dengan baik.

Pertama, buka Terminal atau Command Prompt kamu, terus masuk ke folder proyek kamu. Kalau udah, ketik salah satu perintah ini:

Via npm:

npm install tailwindcss @tailwindcss/cli

Perintah ini bisa kita pecah jadi tiga bagian:

⭐ npm install

  • npm itu apa?

Anggap aja npm itu kayak "Toko Aplikasi" atau "Supermarket Raksasa" buat para programmer. Di sana ada jutaan "paket" atau "alat-alat" gratis yang bisa kita unduh untuk ngebantuin kita ngoding.

  • install itu apa?

Ya artinya "pasang" atau "unduh".

Jadi, npm install itu perintah kamu ke komputer: "Hei komputer, tolong pergi ke supermarket npm dan ambilkan barang-barang yang aku sebutin setelah ini, lalu pasang di proyekku."

⭐ tailwindcss

Ini adalah "barang" pertama yang kamu minta dari supermarket.

  • Ini apaan?

Ini adalah "Otak" atau "Kamus Besar"-nya Tailwind. Isinya adalah semua logika, aturan, dan definisi dari ribuan kelas-kelas ajaib Tailwind (kayak pt-4, flex, bg-red-500, dan lain-lain).

  • Analogi LEGO-nya:

Kalau kamu mau merakit LEGO, tailwindcss ini adalah buku panduannya sekaligus pabrik yang menciptakan semua jenis balok LEGO yang ada di dunia. Baloknya ada ribuan jenis, dari yang kotak, bulat, panjang, transparan, dan sebagainya.

⭐ @tailwindcss/cli

Ini adalah "barang" kedua yang kamu minta.

  • Ini apaan?cli itu singkatan dari Command-Line Interface. Gampangnya, ini adalah "Alat Kerja" atau "Tangan Robot"-nya.
  • Analogi LEGO-nya: Kalau tadi kamu sudah punya buku panduan dan pabrik baloknya, nah @tailwindcss/cli ini adalah tangan robot yang akan mengambil balok-balok yang kamu butuhkan dari pabrik, lalu menyusunnya sesuai instruksi di buku panduan untuk membangun karyamu.

⭐ Jadi, Gunanya Apa?

Kalau digabungin, perintah:

npm install tailwindcss @tailwindcss/cli

Artinya adalah:

"Tolong pasang 'Pabrik Balok' Tailwind (tailwindcss) beserta 'Tangan Robot'-nya (@tailwindcss/cli) ke dalam proyek saya."

Intinya: Kamu butuh dua hal itu agar bisa pakai Tailwind. Kamu butuh "Otak"-nya untuk tahu ada kelas apa saja, dan kamu butuh "Alat Kerja"-nya untuk menjalankan perintah-perintah Tailwind, seperti memindai kodemu dan secara otomatis membuat file CSS akhir yang siap dipakai oleh websitemu.

Tanpa menjalankan perintah ini, komputermu bakal bingung dan bilang, "bg-blue-500 itu apaan? Aku nggak kenal." Perintah ini adalah langkah paling pertama dan wajib sebelum kamu bisa mulai "bermain" dengan kelas-kelas Tailwind. Setelah selesai, Tailwind CSS bakal terinstal di proyek kamu, siap buat diolah.

Struktur Proyek Dasar

structure folder code

Setelah berhasil install, sekarang kita siapin "wadah" buat kode-kode kita. Struktur proyek dasar ini penting biar kerjaan kita rapi dan gampang dicari kalau ada apa-apa. Enggak perlu ribet-ribet, cukup kayak gini aja:

TAILWINDCSS/
├── node_modules/
├── src/
│   ├── assets/
│   ├── js/
├── index.html
├── input.css
├── output.css
├── .gitignore
├── package-lock.json
├── package.json

Penjelasannya:

  • TAILWINDCSS/: Ini folder utama proyek kamu, bisa kamu ganti namanya sesuai keinginan. Di sinilah semua file proyek kamu berada.
  • node_modules/: Folder ini otomatis dibuat setelah kamu install package dengan npm install. Isinya semua library dan dependensi yang kamu butuhkan, termasuk Tailwind CSS.
  • src/: Folder ini berfungsi sebagai tempat file sumber utama kamu.
    • assets/: Di sini tempat nyimpen file statis kayak gambar, ikon, atau font.
    • js/: Folder untuk file JavaScript. Biasanya file-file ini dipakai buat interaktivitas website kamu, misalnya toggle menu, animasi, dll.
  • index.html: Ini file HTML utama kamu. Semua struktur halaman, elemen, dan referensi ke CSS/JS ada di sini.
  • input.css: File CSS awal kamu. Di sinilah kamu biasanya mengimpor Tailwind (@tailwind base;, @tailwind components;, @tailwind utilities;) dan bisa juga nambahin style custom sendiri.
  • output.css: File CSS hasil kompilasi dari Tailwind. Ini yang nanti dipakai di index.html, dan biasanya dibuat otomatis lewat perintah npx tailwindcss -i ./input.css -o ./output.css.
  • .gitignore: File ini berisi daftar file atau folder yang nggak mau kamu upload ke Git (misalnya node_modules, output.css, dll).
  • package.json: File ini dibuat otomatis waktu kamu jalankan npm init atau install Tailwind via npm. Isinya info proyek, daftar dependensi (library yang kamu pakai), dan script npm.
  • package-lock.json: File ini otomatis dibuat oleh npm buat ngunci versi setiap package yang kamu pakai, biar nggak berubah-ubah di komputer orang lain.

Menambahkan Tailwind CSS ke Proyek kamu

Terakhir, kita perlu "ngasih tahu" proyek kita kalau kita mau pakai Tailwind CSS. Caranya gampang banget.

  1. Buka file src/input.css (atau buat kalau belum ada).
  2. Tambahin baris sakti ini di paling atas file input.css:
@import "tailwindcss";

Baris ini kayak mantra yang bilang ke Tailwind CSS, "Oke, siap-siap ya, kita mau pakai semua base style, component style, dan utility class kamu!"

  1. Terus, sambungin file output.css nya ke index.html kamu. Buka src/index.html, terus tambahin baris ini di dalam tag <head>:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Belajar Tailwind CSS di buildwithangga</title>
    <link rel="stylesheet" href="./output.css"> </head>
<body>
    <h1>Halo Dunia, dengan Tailwind CSS v4</h1>
    <p class="text-blue-500 font-bold text-lg">Teks ini udah pakai Tailwind! di pandu buildwithangga</p>
</body>
</html>

Bayangin kamu lagi nulis surat pakai bahasa kode rahasia. Di suratmu (file HTML), kamu nulis instruksi kayak gini:

  • text-blue-500 (artinya: "Tolong warnai teks ini jadi biru, ya!")
  • font-bold (artinya: "Tolong tebalkan teks ini!")
  • text-lg (artinya: "Tolong perbesar sedikit ukuran teks ini!")

Nah, surat ini mau kamu kasih ke temanmu. Sebut saja temanmu ini si Browser (Chrome, Firefox, dll).

Masalahnya: Si Browser ini polos banget. Dia nggak ngerti bahasa kode rahasiamu. Kalau kamu kasih surat itu langsung, dia bakal bingung, "Hah? text-blue-500 itu apaan?" Akhirnya, tulisanmu bakal tampil biasa aja tanpa gaya sama sekali.

Di sinilah peran si output.css. Sebelum kamu kasih suratmu ke Browser, kamu pakai "mesin penerjemah" dulu. Mesin ini adalah Tailwind. Tugas Tailwind adalah:

  1. Membaca seluruh file HTML-mu.
  2. Melihat semua "kode rahasia" (kelas Tailwind) yang kamu pakai.
  3. Menerjemahkan setiap kode itu menjadi bahasa yang dimengerti oleh si Browser (yaitu CSS biasa).

Misalnya:

  • text-blue-500 diterjemahkan menjadi color: #3b82f6;
  • font-bold diterjemahkan menjadi font-weight: 700;

Semua hasil terjemahan ini dikumpulkan dan ditulis dalam sebuah fail baru. Fail inilah yang dinamakan output.css. Isinya adalah CSS murni yang siap pakai.

Nah, sekarang kita sampai ke pertanyaan utamamu, apa gunanya baris ini?

<link rel="stylesheet" href="./output.css">

Baris ini adalah instruksi yang kamu selipkan di kepala suratmu (di dalam <head>), yang isinya bilang:

"Hei Browser, untuk semua urusan gaya dan penampilan di halaman ini, kamu nggak usah pusing sama kode-kode rahasiaku. Kamu cukup lihat dan baca aja contekan di file yang namanya output.css. Di situ udah ada semua terjemahan gaya dalam bahasa yang kamu pahami."

Jadi, kesimpulan santainya:

  • HTML-mu: Berisi instruksi gaya dalam "bahasa Tailwind".
  • output.css: Adalah "kamus contekan" yang berisi terjemahan dari bahasa Tailwind ke bahasa CSS biasa.
  • <link ...>: Adalah jembatan yang menghubungkan HTML-mu dengan kamus contekan itu, biar si Browser tahu harus lihat ke mana untuk menata halamanmu.

Tanpa jembatan itu, halaman web-mu bakal tampil polos tanpa gaya apa pun.

Lalu untuk menjalankan proyeknya kamu bisa ketikkan perintah ini

npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch

Perintah ini adalah instruksi lengkap yang kamu berikan kepada si "Koki" atau "Mesin Penerjemah" Tailwind (@tailwindcss/cli) yang sudah kamu pasang sebelumnya. Anggap saja kamu lagi jadi sutradara yang lagi ngasih arahan ke aktornya.

  • npx @tailwindcss/cli

Ini adalah caramu memanggil si "Koki". Kamu bilang, "Oke Koki, siap-siap ya, ada kerjaan buatmu!". npx memastikan perintah ini dijalankan menggunakan alat yang sudah ada di dalam proyekmu.

  • i ./src/input.css

i adalah singkatan dari input (sumber/masukan). Ini arahan pertamamu: "Tolong lihat file resep utamaku ya, Koki. Lokasinya ada di dalam folder src, dan nama filenya input.css. Semua bahan mentah dan instruksi kustom dariku ada di sana."

Di file input.css inilah biasanya kamu menulis @import "tailwindcss"; dan gaya-gaya CSS kustom lainnya.

  • o ./src/output.css

o adalah singkatan dari output (hasil/keluaran). Ini arahan keduamu: "Setelah kamu selesai 'memasak' resep dari input.css tadi, tolong hasil jadinya (file CSS yang sudah matang dan bisa dimengerti Browser) ditaruh di folder src juga, ya. Kasih nama filenya output.css."

  • -watch

Nah, ini adalah bagian paling ajaib dan yang membuat hidupmu jadi mudah! 🪄 -watch artinya "awasi terus". Ini adalah instruksi spesialmu di akhir: "Eh, Koki, jangan langsung pulang setelah selesai masak, ya! Tetap standby di sini dan awasi terus semua file-ku. Setiap kali aku mengubah sesuatu di input.css atau setiap kali aku menambahkan kelas Tailwind baru di file HTML-ku, kamu harus langsung otomatis masak ulang dan perbarui file output.css-nya. Jangan nunggu aku suruh lagi!"

Kesimpulan Gunanya Apa?

Secara keseluruhan, perintah ini menyuruh Tailwind untuk:

  1. Membaca file input.css kamu.
  2. Menerjemahkan semua kelas Tailwind yang kamu pakai menjadi CSS biasa.
  3. Menyimpan hasilnya ke dalam file output.css.
  4. Dan yang terpenting, mengawasi proyekmu secara terus-menerus, lalu secara otomatis mengulangi proses ini setiap kali ada perubahan.

Jadi, kamu cukup jalankan perintah ini sekali saja di terminal, lalu kamu bisa fokus ngoding tanpa perlu bolak-balik menjalankan perintah kompilasi secara manual. Sangat menghemat waktu!

Hasilnya bakal kayak gini di proyek kita

result run the code

Selesai! Sekarang kamu udah siap banget buat ngulik dan bikin website kece pakai Tailwind CSS v4. Coba deh buka index.html di browser kamu, terus iseng tambahin class Tailwind kayak bg-blue-500 atau p-4 di elemen HTML kamu. Pasti langsung kelihatan perubahannya! Siap buat eksplorasi lebih dalam?

Konsep Dasar Tailwind CSS v4

Oke, setelah sukses pasang dan setup Tailwind CSS v4 di proyek kamu, sekarang saatnya kita menyelami "filosofi" di baliknya. Ibarat mau jadi koki handal, enggak cukup cuma tahu cara nyalain kompor, tapi juga harus paham kenapa bahan ini dicampur itu, atau kenapa masakan ini harus dimasak dengan api segitu.

Nah, konsep dasar ini penting banget biar kamu bisa "ngobrol" lancar sama Tailwind dan bikin website yang enggak cuma bagus, tapi juga efisien.

Utilitas-First

Bayangin kamu mau bikin kue. Ada dua cara:

  1. Cara Tradisional (Beli Kue Jadi): Kamu pergi ke toko dan beli kue bolu cokelat yang sudah jadi. Cepat, praktis, tapi ya gitu-gitu aja. Kalau kamu mau kuenya setengah keju atau pakai hiasan stroberi, susah. Kamu harus bongkar kuenya, dan hasilnya bisa jadi aneh.
  2. Cara Tailwind (Siapin Bahan Sendiri): Kamu nggak beli kue jadi. Sebaliknya, kamu punya dapur super lengkap dengan semua bahan dasar: tepung, telur, gula, cokelat bubuk, keju, mentega, vanila, dll. Kamu bisa meracik bahan-bahan ini untuk membuat kue apa pun yang kamu mau. Mau bolu cokelat? Bisa. Mau cheesecake? Bisa. Mau kue lapis legit? Bisa banget!

Nah, konsep "Utilitas-First" itu persis seperti cara nomor 2.

⭐ Apa itu Konsep Utilitas-First?

Kalau kita terjemahin, "Utilitas-First" artinya "Mendahulukan Kelas-Kelas Utilitas". Kelas utilitas itu adalah kelas CSS yang punya satu tugas spesifik dan kecil. Kayak bahan-bahan kue tadi.

  • p-4 -> tugasnya cuma ngasih padding (jarak di dalam) sebesar 1rem.
  • flex -> tugasnya cuma bikin elemen jadi flexbox.
  • text-center -> tugasnya cuma bikin teks jadi rata tengah.
  • bg-red-500 -> tugasnya cuma ngasih warna latar belakang merah.

Setiap kelas punya satu fungsi. Nggak lebih. Mari kita bandingkan dengan cara tradisional (sering disebut Component-First) yang dipakai framework lain seperti Bootstrap:

✳ Cara Tradisional (Component-First / Kue Jadi): Kamu dikasih kelas yang sudah jadi "paket komponen". Contohnya:

<button class="btn btn-primary">Klik Aku</button>

Kelas btn dan btn-primary ini adalah sebuah paket. Di dalamnya sudah ada aturan untuk warna latar, warna teks, padding, border, box-shadow, dan lain-lain. Praktis, tapi kalau kamu mau ubah sedikit saja (misalnya, padding-nya mau lebih besar), kamu harus menulis kode CSS tambahan untuk "menimpa" aturan bawaan. Lama-lama, CSS-mu jadi tumpukan kode "timpa-menimpa" yang bikin pusing.

✳ Cara Tailwind (Utility-First / Bahan Sendiri): Kamu merakit sendiri tombolmu dari kelas-kelas utilitas (bahan-bahan dasar).

<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded">Klik Aku</button>

Lihat? Kamu meraciknya satu per satu:

  • bg-blue-500: "Aku mau latar belakangnya biru."
  • text-white: "Teksnya warna putih ya."
  • font-bold: "Tebalkan tulisannya."
  • py-2: "Kasih jarak atas-bawah."
  • px-4: "Kasih jarak kiri-kanan."
  • rounded: "Sudutnya dibikin agak melengkung."

Kamu punya kendali penuh 100% atas tampilan tombolmu, langsung dari HTML.

⭐ Jadi, Apa Keuntungan Utamanya?

  1. Nggak Perlu Mikirin Nama Kelas: Pernah pusing mikirin nama kelas yang bagus? .main-content-wrapper, .user-profile-card-header, .button-submit-primary... Lupakan semua itu! Kamu cukup fokus pada "gaya apa yang mau aku terapkan?".
  2. Nggak Perlu Gonta-ganti File: Kamu bisa menata gaya sepenuhnya tanpa pernah meninggalkan file HTML-mu. Alur kerjamu jadi super cepat karena nggak perlu bolak-balik antara file HTML dan CSS.
  3. CSS Kamu Nggak Membengkak: Karena kamu pakai ulang kelas yang sama terus-menerus (p-4, flex, dll), file CSS akhirmu ukurannya tetap kecil dan nggak akan tumbuh jadi monster yang sulit dikelola, tidak peduli seberapa besar websitemu.
  4. Lebih Aman untuk Diubah: Mau mengubah gaya satu tombol? Kamu tinggal ubah kelas di tombol itu saja. Kamu nggak perlu takut perubahanmu akan merusak tampilan tombol lain di halaman yang berbeda, karena gayanya tidak terikat pada satu nama kelas global.

Intinya: Konsep "Utilitas-First" mengubah caramu berpikir. Bukan lagi "Benda ini aku kasih nama apa?", tapi "Benda ini mau aku kasih gaya seperti apa?". Kamu diberi kebebasan seperti seorang seniman dengan palet warna yang lengkap, bukan seorang tukang cat yang cuma punya tiga warna kalengan.

Konsep "Utilitas-First" yaitu jantungnya Tailwind CSS kalau di css vanilla. Kalau kamu biasanya nulis CSS kayak gini:

/* Di file input.css */
.my-button {
    background-color: blue;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
}

Terus di HTML-nya manggil class="my-button", nah di Tailwind CSS kita bakal sedikit "balik badan". Kita enggak lagi bikin class kustom yang isinya banyak properti CSS. Justru, kita langsung pakai class-class kecil yang udah disediain sama Tailwind, yang masing-masing class itu cuma ngurusin satu properti CSS aja.

Contohnya, kalau mau bikin tombol kayak di atas, di HTML-nya kita nulisnya gini:

<button class="bg-blue-500 text-white py-2 px-4 rounded-md">
    Klik Saya!
</button>

Hasilnya

utility first simulation

Lihat kan? Setiap class kayak bg-blue-500 (buat warna latar belakang biru), text-white (buat warna teks putih), py-2 (buat padding vertikal), px-4 (buat padding horizontal), dan rounded-md (buat sudut membulat) itu punya tugasnya masing-masing.

Ini kayak kamu punya banyak banget "perkakas kecil" di kotak alat, dan setiap kali butuh, kamu tinggal ambil perkakas yang pas. Awalnya mungkin kelihatan panjang, tapi percayalah, ini bikin kamu jadi super cepat dan konsisten dalam styling! Enggak perlu lagi bolak-balik file CSS cuma buat ngubah satu properti.

Responsif dengan Utilitas

responsive design

Di zaman sekarang, website itu wajib banget bisa tampil cakep di berbagai ukuran layar, dari HP mungil sampai monitor gede. Nah, Tailwind CSS ini udah nyiapin "senjata" khusus buat urusan responsif ini, dan lagi-lagi, semua pakai utility class!

Mereka punya breakpoint standar (ukuran layar tertentu) yang bisa kamu pakai:

  • sm (Small): Untuk layar kecil (biasanya > 640px)
  • md (Medium): Untuk layar menengah (biasanya > 768px)
  • lg (Large): Untuk layar besar (biasanya > 1024px)
  • xl (Extra Large): Untuk layar super besar (biasanya > 1280px)
  • 2xl (Double Extra Large): Untuk layar ultra lebar (biasanya > 1536px)

Cara pakainya gampang banget, tinggal tambahin prefix breakpoint di depan utility class yang kamu mau. Contoh:

<div class="text-right sm:text-center md:text-left w-full">
    buildwithangga
</div>

Ketika Lebar Layar terkecil

handphone breakpoints

Ketika Lebar Layar Menengah

tablet breakpoints

Ketika Lebar Layar Lebih Tinggi

laptop breakpoints

Artinya:

  • Secara default (untuk layar sangat kecil), teksnya akan rata kanan (text-right).
  • Kalau layarnya udah masuk kategori sm (small ke atas), teksnya bakal jadi rata tengah (md:text-center).
  • Dan kalau layarnya udah md (medium ke atas), teksnya bakal rata kiri (lg:text-left).

Keren kan? Kamu bisa ngatur tampilan website kamu di berbagai perangkat cuma dengan nambahin beberapa class aja, tanpa perlu nulis @media query yang panjang-panjang di CSS. Ini bikin website kamu fleksibel banget, kayak bunglon yang bisa menyesuaikan warna kulitnya.

Pseudokelas dan Atribut

border if hover

Selain responsif, Tailwind CSS juga mempermudah kita buat ngatur styling berdasarkan interaksi pengguna (kayak pas hover mouse atau focus di input field) dan status elemen (kayak disabled atau checked). Ini namanya pseudokelas dan atribut.

Sama kayak responsif, cara pakainya juga pakai prefix di depan utility class. Beberapa contoh yang sering dipakai:

  • hover:: Styling pas mouse diarahkan ke elemen.
  • focus:: Styling pas elemen lagi di-focus (misal: input text diklik).
  • active:: Styling pas elemen lagi ditekan (misal: tombol).
  • disabled:: Styling pas elemen dalam kondisi disabled.
  • first:, last:, odd:, even:: Untuk styling elemen dalam daftar (misal: li di ul).

Contoh:

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
    Tombol Hover
</button>

<input type="text" class="border border-gray-300 focus:border-blue-500 focus:ring focus:ring-blue-200 rounded-md p-2">

Hasilnya

result code

Di contoh tombol, pas di-hover, warna birunya bakal jadi lebih gelap (hover:bg-blue-700). Keren, kan? Kamu bisa bikin interaksi yang halus dan menarik cuma dengan nambahin class ini. Ini bikin website kamu jadi lebih "hidup" dan responsif terhadap sentuhan pengguna.

Menggunakan Fitur Baru Tailwind CSS v4

Nah, kalau tadi kita udah bahas pondasi dan cara kerja Tailwind CSS secara umum, sekarang saatnya kita ngomongin "pernak-pernik" baru yang bikin Tailwind CSS v4 ini beda dan makin canggih. Ini kayak kamu udah bisa nyetir mobil, tapi sekarang kita mau belajar pakai fitur-fitur modernnya, kayak cruise control atau parking assist. Dijamin bakal bikin hidup kamu (dan workflow ngoding kamu) jauh lebih mudah!

Memanfaatkan @theme untuk Kustomisasi

theme configurations

Ini dia salah satu bintang utama di Tailwind CSS v4: @theme. Kalau dulu kamu suka pusing mikirin cara custom warna, ukuran font, atau spacing biar sesuai sama desain yang kamu mau, sekarang ada @theme yang siap jadi "juru penyelamat". Konsepnya sederhana tapi powerful banget: kita pakai variabel CSS atau properti kustom CSS untuk mendefinisikan token desain kita.

Jadi, ketimbang ngutak-ngatik file tailwind.config.js yang panjang lebar, kamu bisa langsung definisiin variabel-variabel ini di file CSS utamamu (src/input.css).

Menggunakan Variabel CSS dengan @theme

Pada dasarnya, @theme memungkinkan kamu buat mendefinisikan nilai-nilai kustom yang kemudian bisa kamu pakai di mana aja dengan utility class Tailwind. Ini bikin kamu punya kontrol penuh atas desainmu tanpa harus nulis kode berulang kali. Ini mirip kayak kamu punya palet warna sendiri, dan semua kuas yang kamu pakai akan otomatis merujuk ke palet itu.

/* src/input.css */
@theme {
  --color-empty-bg: #fafafa;
  --color-empty-black: #1f1449;
  --color-empty-grey: #9698A9;
}

Di contoh di atas, kita mendefinisikan:

  • @theme { → Ini pembuka blok tema. Isinya kumpulan variabel CSS buat ngatur warna, font, atau style lain biar konsisten.
  • -color-empty-bg: #fafafa; → Warna latar belakang yang cerah banget, kayak putih pudar. Cocok buat background kosong atau konten belum ada.
  • -color-empty-black: #1f1449; → Warna hitam kebiruan yang elegan, bisa buat teks utama atau judul biar kontras.
  • -color-empty-grey: #9698A9; → Warna abu-abu kalem, enak dipakai buat teks sekunder atau deskripsi.

Contoh Kustomisasi Warna

customitation color

Setelah didefinisikan pakai @theme, kamu bisa langsung pakai variabel warna itu di utility class Tailwind.

<p class="text-empty-grey">
  Paragraf dibuat oleh buildwithangga dengan tema kustom
</p>

Lihat kan? Sekarang, kalau kamu mau ganti warna primernya jadi abu-abu, kamu tinggal ubah nilai --color-empty-grey di @theme jadi #9698A9, dan semua elemen yang pakai text-empty-grey atau text-empty-black bakal otomatis berubah warnanya. Enggak perlu lagi nyari dan ganti satu per satu di HTML! Ini efisien banget dan bikin desain kamu jadi super konsisten.

Contoh Kustomisasi Font

customitation fonts

Sama kayak warna, kita juga bisa pakai @theme buat ngatur ukuran font atau bahkan jenis font favoritmu.

/* src/input.css */
@theme {
  --font-weight-regulartheme: 400;
  --font-weight-semiboldtheme: 600;
  --font-weight-boldtheme: 700;

  --font-family-body: "Inter", sans-serif;
  --font-family-heading: "Poppins", serif;
}

Penjelasan

  • -font-weight-regulartheme: 400; → Berat huruf standar, nggak tebal tapi juga nggak tipis. Buat teks biasa.
  • -font-weight-semiboldtheme: 600; → Huruf agak tebal, cocok buat subjudul atau teks yang pengin agak ditekan.
  • -font-weight-boldtheme: 700; → Ini bold banget. Pas banget buat judul biar langsung menarik perhatian.
  • -font-family-body: "Inter", sans-serif; → Jenis huruf utama buat isi teks. Inter itu modern dan gampang dibaca di layar.
  • -font-family-heading: "Poppins", serif; → Jenis huruf buat judul. Poppins itu bulat dan kece, bikin tampilan lebih stylish.
<p class="font-regulartheme">
  Paragraf dibuat oleh buildwithangga dengan tema kustom
</p>
<p class="font-boldtheme">
  Paragraf dibuat oleh buildwithangga dengan tema kustom
</p>

Dengan cara ini, kamu bisa punya kendali penuh atas tipografi di website kamu, dan kalau ada perubahan, cukup di satu tempat saja. Simpel, bersih, dan powerful.

Peran Minimal tailwind.config.js

Dulu, file tailwind.config.js itu kayak command center buat semua konfigurasi Tailwind CSS. Mau nambah warna baru, breakpoint baru, atau plugin? Semua lewat situ. Tapi di Tailwind CSS v4 ini, perannya jadi sangat minimal, bahkan kamu bisa enggak nulis apa-apa di file itu buat kebanyakan kasusnya.

Ini adalah perubahan besar yang bikin setup Tailwind jadi jauh lebih cepat dan enggak bikin sakit kepala. Mayoritas konfigurasi yang dulunya ada di sana sekarang bisa di-handle langsung oleh variabel CSS dengan @theme atau Tailwind sudah menyediakan default yang sangat masuk akal.

Kapan Menggunakan tailwind.config.js di v4?

Jadi, kapan dong kita perlu nyentuh tailwind.config.js di v4 ini? Jawabannya: hanya jika kamu butuh konfigurasi yang sangat spesifik atau untuk plugin tertentu yang memang memerlukannya.

Beberapa skenario di mana kamu mungkin masih perlu tailwind.config.js:

  • Mengaktifkan plugin pihak ketiga: Jika ada plugin khusus yang ingin kamu pakai (misalnya untuk typography, forms, dll.), biasanya plugin tersebut perlu didaftarkan di tailwind.config.js.
  • Mengubah konfigurasi inti yang tidak bisa di-handle oleh @theme: Misalnya, jika kamu perlu mengubah content array untuk proses purging atau jika ada advanced settings lainnya yang tidak terkait langsung dengan token desain.
  • Menambah theme extension yang kompleks: Untuk skenario kustomisasi yang sangat mendalam dan tidak cukup hanya dengan variabel CSS.

Contoh Konfigurasi Minimal

Bayangkan, kalau dulu tailwind.config.js bisa sampai puluhan baris, sekarang bisa sesimpel ini:

// tailwind.config.js (Hanya jika kamu butuh)
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      // Kamu bisa nambahin ekstensi di sini kalau perlu,
      // tapi mayoritas kustomisasi sekarang pakai @theme di CSS
    },
  },
  plugins: [
    // Misal, kalau mau pakai plugin forms
    // require('@tailwindcss/forms'),
  ],
}

Bahkan, untuk proyek standar tanpa plugin tambahan, file tailwind.config.js ini seringkali tidak perlu kamu buat sama sekali! Ini yang bikin Tailwind CSS v4 jadi jauh lebih developer-friendly dan out-of-the-box. Kamu enggak perlu mikirin konfigurasi awal yang ribet, tinggal langsung aja "gas" styling.

Dengan memahami @theme dan peran tailwind.config.js yang lebih minimal di v4, kamu udah siap buat melaju lebih cepat dan efisien dalam mendesain website. Kita udah punya semua alat canggihnya, saatnya kita coba bikin sesuatu yang konkret di bab selanjutnya! Siap bikin komponen?

Membangun Komponen dengan Tailwind CSS v4

Oke, sekarang kita masuk ke bagian yang paling seru dan paling "kelihatan" hasilnya: membangun komponen. Kalau tadi kita udah belajar "bahasa" Tailwind CSS v4 dan cara pakai fitur-fitur barunya, sekarang saatnya kita praktik langsung bikin "bangunan" kecil-kecil tapi penting buat website kita.

Anggap aja ini kayak kita lagi main Lego, kita udah punya balok-balok kecil (utility class), sekarang tinggal merangkainya jadi bentuk yang keren!

Di bab ini, kita bakal coba bikin beberapa komponen dasar yang sering banget kamu temui di website, tapi dengan cara yang cepat, efisien, dan tetap rapi pakai Tailwind CSS v4.

Membuat Tombol Kustom

custom buttons simulation

Tombol itu ibarat gerbang interaksi pertama di website. Setiap klik bisa berarti sesuatu. Jadi, bikin tombol yang bagus itu penting. Dengan Tailwind CSS v4, kamu bisa bikin tombol dengan berbagai gaya tanpa harus nulis CSS kustom sedikitpun!

Kita akan coba bikin tombol dengan gaya dasar, lalu variasinya untuk hover state.

<button class="bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg shadow-md hover:bg-blue-600 transition-colors duration-300">
    Klik Saya
</button>

<button class="bg-green-500 text-white font-semibold py-2 px-4 rounded-full shadow-lg hover:bg-green-600 transition-all duration-300 ease-in-out">
    Daftar Sekarang
</button>

<button class="border border-gray-400 text-gray-800 font-semibold py-2 px-4 rounded-md hover:bg-gray-100 transition-colors duration-300">
    Pelajari Lebih
</button>

Yuk, kita bedah satu per satu class yang dipakai:

  • bg-blue-500: Warna latar belakang biru dengan shade 500.
  • text-white: Warna teks putih.
  • font-semibold: Ketebalan font semi-bold.
  • py-2 px-4: Padding vertikal 0.5rem (2 unit) dan horizontal 1rem (4 unit). Ini biar tombolnya enggak terlalu mepet teksnya.
  • rounded-lg / rounded-full / rounded-md: Sudut tombolnya biar melengkung. Bisa pakai lg (besar), full (full bulat kayak pil), atau md (sedang).
  • shadow-md / shadow-lg: Nambahin efek bayangan biar tombolnya kelihatan lebih "keluar" dari halaman.
  • hover:bg-blue-600 / hover:bg-green-600 / hover:bg-gray-100: Ini dia efek hovernya! Pas mouse di atas tombol, warnanya berubah jadi shade yang lebih gelap (atau terang untuk tombol border) biar ada feedback ke pengguna.
  • transition-colors duration-300 / transition-all duration-300 ease-in-out: Nah, ini buat bikin transisi warnanya halus, enggak jeduk-jeduk. duration-300 itu artinya 300 milidetik, ease-in-out itu animasinya halus di awal dan akhir.

Gimana? Kelihatan panjang ya? Tapi justru dengan begini, kamu bisa banget bikin variasi tombol tanpa harus keluar dari file HTML. Tinggal copy-paste, ubah beberapa class, jadi deh tombol baru!

Mendesain Kartu Produk

animation card simulation

Kartu (Card) adalah komponen sejuta umat di website. Dari kartu produk, kartu berita, testimoni, sampai dashboard widget, semua pakai konsep kartu. Dengan Tailwind CSS v4, bikin kartu jadi gampang dan responsif.

Kita akan coba buat kartu produk sederhana.

<div class="max-w-xs mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl transform transition-transform duration-300 hover:scale-105">
    <div class="md:flex">
        <div class="md:flex-shrink-0">
            <img class="h-48 w-full object-cover md:w-48" src="<https://via.placeholder.com/192>" alt="Gambar Produk">
        </div>
        <div class="p-8">
            <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Kategori Produk</div>
            <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">Nama Produk Keren</a>
            <p class="mt-2 text-gray-500">Deskripsi singkat produk ini. Cocok untuk semua kebutuhan kamu.</p>
            <div class="mt-4 flex items-center justify-between">
                <span class="text-xl font-bold text-gray-900">$29.99</span>
                <button class="bg-indigo-600 text-white py-2 px-4 rounded-full text-sm hover:bg-indigo-700 transition-colors duration-300">
                    Beli Sekarang
                </button>
            </div>
        </div>
    </div>
</div>

Yuk, kita bedah beberapa class menariknya:

  • max-w-xs mx-auto: Kartu ini lebarnya maksimal seukuran xs (extra small) dan mx-auto biar posisinya di tengah halaman.
  • bg-white rounded-xl shadow-md overflow-hidden: Latar putih, sudut melengkung besar, bayangan, dan overflow-hidden biar gambar di dalamnya enggak keluar batas kartu.
  • md:max-w-2xl: Nah, ini responsifnya! Di layar md (medium) ke atas, lebar kartunya jadi lebih besar (max-w-2xl).
  • transform transition-transform duration-300 hover:scale-105: Efek animasi pas di-hover! Kartunya sedikit membesar (105%) biar kelihatan interaktif.
  • md:flex: Di layar md ke atas, konten di dalam kartu bakal jadi flexbox biar gambar dan teks bisa sejajar horizontal.
  • h-48 w-full object-cover md:w-48: Gambar tingginya 48 unit, lebarnya penuh, object-cover biar gambarnya pas di dalam frame. Di layar md ke atas, lebarnya jadi 48 unit biar dia bisa sejajar sama teks.
  • uppercase tracking-wide text-sm text-indigo-500 font-semibold: Buat styling kategori produknya.
  • mt-1 text-lg leading-tight font-medium: Styling judul produk, mt-1 (margin top) biar ada jarak.

Dengan utility class ini, kita bisa bikin kartu yang cantik dan responsif tanpa nulis baris kode CSS tambahan. Cukup di HTML saja! Ini bikin pengembangan jadi super cepat dan maintainable.

Membangun Navigasi Responsif

responsive simulation

Navigasi atau navbar adalah komponen krusial di setiap website. Kita akan coba bikin navigasi yang sederhana tapi responsif, artinya dia akan berubah tata letaknya saat di layar kecil (misalnya jadi menu hamburger) dan di layar besar (menu biasa).

<nav class="bg-gray-800 p-4">
    <div class="container mx-auto flex justify-between items-center">
        <a href="#" class="text-white text-2xl font-bold">Logo Kamu</a>

        <div class="md:hidden">
            <button id="menu-button" class="text-white focus:outline-none focus:text-gray-400">
                <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="<http://www.w3.org/2000/svg>">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                </svg>
            </button>
        </div>

        <div class="hidden md:flex space-x-4">
            <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md transition-colors duration-200">Beranda</a>
            <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md transition-colors duration-200">Produk</a>
            <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md transition-colors duration-200">Tentang Kami</a>
            <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md transition-colors duration-200">Kontak</a>
        </div>
    </div>

    <div id="mobile-menu" class="hidden md:hidden mt-4">
        <a href="#" class="block text-gray-300 hover:text-white px-3 py-2 rounded-md">Beranda</a>
        <a href="#" class="block text-gray-300 hover:text-white px-3 py-2 rounded-md">Produk</a>
        <a href="#" class="block text-gray-300 hover:text-white px-3 py-2 rounded-md">Tentang Kami</a>
        <a href="#" class="block text-gray-300 hover:text-white px-3 py-2 rounded-md">Kontak</a>
    </div>
</nav>

<script>
    const menuButton = document.getElementById('menu-button');
    const mobileMenu = document.getElementById('mobile-menu');

    menuButton.addEventListener('click', () => {
        mobileMenu.classList.toggle('hidden');
    });
</script>

Beberapa class penting yang perlu diperhatikan:

  • bg-gray-800 p-4: Latar belakang abu gelap dan padding di sekitar navigasi.
  • container mx-auto flex justify-between items-center: container mx-auto biar navigasinya ada di tengah dan ada batas lebarnya. flex justify-between items-center ini kunci Flexbox biar logo di kiri dan menu di kanan, serta sejajar di tengah secara vertikal.
  • md:hidden: Tombol hamburger ini tersembunyi di layar md ke atas, alias cuma muncul di layar kecil.
  • hidden md:flex: Sebaliknya, menu navigasi utama ini tersembunyi di layar kecil dan baru muncul jadi flex (sejajar horizontal) di layar md ke atas.
  • space-x-4: Ini utility class keren dari Tailwind buat ngasih jarak horizontal antar item di dalam flexbox atau grid tanpa perlu nulis margin-left satu per satu.
  • block text-gray-300 hover:text-white px-3 py-2 rounded-md: Untuk menu di mobile, kita pakai block biar setiap itemnya ada di baris sendiri.

Untuk membuat menu hamburger berfungsi, kita butuh sedikit bantuan dari JavaScript. Kode JS di bawah komponen navigasi itu cuma buat nambahin toggle class hidden biar menu mobile-nya muncul atau hilang saat tombol hamburger diklik.

Dengan Tailwind CSS v4, membangun komponen jadi lebih kayak nyusun balok Lego. Kamu bisa bebas banget eksplorasi dan ngetes class mana yang paling pas buat desain kamu. Ini bikin proses design-to-code jadi super cepat dan intuitif. Siap melangkah ke level selanjutnya dengan optimasi dan produksi?

Kelas Rekomendasi BuildWithAngga

buildwithangga

Bila kamu mau belajar lebih dalam dan lebih lanjut lagi aku saranin mengikuti kelas dari BuildWithAngga. BuildWithAngga punya pendekatan pembelajaran yang cukup beda dibanding platform belajar coding lainnya, terutama buat pemula dan orang yang suka belajar visual. Berikut beberapa hal yang bikin mereka menonjol:

🔥 1. Belajar dari Real Project, Bukan Teori Doang

Di BuildWithAngga, kamu gak cuma belajar sintaks, tapi langsung bikin project nyata kayak:

  • Website portfolio modern
  • Aplikasi booking seperti Tokopedia Travel
  • Landing page profesional
  • UI design pakai Figma

➡️ Jadi kamu langsung lihat hasilnya, bukan cuma hafalin kode.

🎨 2. Visual Interaktif & UI Keren

Mereka bener-bener fokus ke desain antarmuka yang kece:

  • Kelas banyak yang berfokus pada Frontend (HTML, CSS, Tailwind, React)
  • Desainnya modern dan sesuai tren industri
  • Belajar coding sekaligus belajar taste desain

➡️ Cocok banget buat kamu yang pengin kerja sebagai UI/UX Developer.

🚀 3. Materi Up-to-date & Fokus ke Industri

BuildWithAngga ngikutin tren teknologi terbaru:

  • Tailwind CSS, Next.js, Laravel 10
  • Vercel deployment, GitHub versioning
  • Animasi interaktif, Responsive Web Design

➡️ Gak belajar hal yang "jadul" dan kurang relevan.

🧠 4. Penjelasan Simpel, Bahasa Indonesia

Semua materi pakai bahasa Indonesia dengan gaya yang santai, receh tapi dalam, cocok banget buat kamu yang bosen dengan pembelajaran kaku dan textbook.

➡️ Gak bikin stres dan lebih mudah dipahami, terutama buat pemula.

👨‍🏫 5. Mentoring & Sertifikat Karier

  • Bisa dapet sertifikat resmi
  • Ada career mentoring buat bantu kamu masuk dunia kerja
  • Kelas premium biasanya dilengkapi dengan review dari mentor

➡️ Jadi bukan sekadar belajar, tapi juga disiapkan untuk kerja.

Kalau kamu suka gaya belajar yang langsung "terjun ke lapangan", visual menarik, dan gampang dipahami, BuildWithAngga jelas beda dan cocok untuk kamu yang mau serius masuk dunia kreatif & digital.

Penutup

Sampai juga kita di ujung perjalanan panduan ini! Dari awal kenalan, nyobain fitur-fitur baru, sampai praktik bikin komponen, semoga perjalanan bareng Tailwind CSS v4 ini seru dan membuka banyak wawasan baru buat kamu. Ibaratnya, kita udah berhasil bangun rumah impian, sekarang tinggal menata isinya dan siap ditinggali.