Menulis CSS manual untuk setiap halaman bisa melelahkan: kamu harus memikirkan nama class, mengelola file stylesheet yang terus membengkak, dan berulang kali menulis ulang style yang sama. Tailwind CSS hadir untuk menyelesaikan masalah ini lewat pendekatan utility-first — kamu menyusun tampilan langsung di dalam HTML menggunakan class-class kecil yang sudah disediakan. Di tutorial ini, kita akan menginstal Tailwind CSS versi terbaru (v4), memahami konsep dasarnya, hingga membangun komponen yang responsif dan mendukung dark mode — semuanya dengan kode yang bisa langsung kamu jalankan.

Apa Itu Tailwind CSS dan Konsep Utility-First?

Tailwind CSS adalah framework CSS yang menyediakan ratusan utility class — class kecil dengan satu fungsi spesifik, seperti p-4 untuk padding, text-white untuk warna teks, atau flex untuk mengatur layout. Alih-alih menulis class semantik seperti .card lalu mendefinisikan isinya di file CSS terpisah, kamu langsung menyusun style di elemen HTML-nya. Hasilnya, kamu tidak perlu bolak-balik antara file HTML dan CSS, dan tampilan setiap elemen langsung terlihat jelas hanya dari membaca class-nya.

Perbandingannya kira-kira seperti ini. Tanpa Tailwind, kamu biasanya menulis CSS terpisah:

css
/* style.css — cara tradisional */
.card {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

Dengan Tailwind, seluruh style tersebut ditulis langsung sebagai utility class di HTML, tanpa file CSS tambahan:

html
<!-- index.html — cara Tailwind -->
<div class="bg-white rounded-lg p-6 shadow-md">
  <h2 class="text-lg font-bold">Judul Card</h2>
  <p>Konten card di sini</p>
</div>

Prasyarat

Sebelum mulai, pastikan kamu sudah menginstal Node.js (versi 18 ke atas) dan npm. Kamu juga perlu memahami dasar HTML. Kalau masih asing dengan JavaScript, kamu bisa membaca panduan dasar JavaScript kami terlebih dahulu — meski untuk tutorial ini JavaScript hanya dipakai secukupnya.

Langkah 1: Membuat Project dengan Vite

Vite adalah build tool modern yang cepat dan menjadi cara paling praktis untuk memulai project Tailwind. Buka terminal, lalu jalankan perintah berikut untuk membuat project baru dengan template vanilla (HTML + JavaScript murni):

bash
# Buat project baru bernama tailwind-tutorial
npm create vite@latest tailwind-tutorial -- --template vanilla

# Masuk ke folder project
cd tailwind-tutorial

# Install dependency awal
npm install

Langkah 2: Install Tailwind CSS v4

Tailwind v4 menyederhanakan proses setup secara drastis — tidak perlu lagi file tailwind.config.js yang panjang seperti versi sebelumnya. Cukup install paket Tailwind beserta plugin Vite-nya:

bash
npm install tailwindcss @tailwindcss/vite

Langkah 3: Aktifkan Plugin di Vite

Buka file vite.config.js di root project, lalu tambahkan plugin Tailwind seperti berikut:

javascript
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [tailwindcss()],
})

Langkah 4: Import Tailwind di File CSS

Selanjutnya, buka file src/style.css (sudah dibuat otomatis oleh Vite), hapus seluruh isinya, lalu ganti dengan satu baris ini:

css
@import "tailwindcss";

Baris tunggal ini adalah inti dari Tailwind v4 — framework akan membaca semua class Tailwind yang kamu pakai di HTML dan menghasilkan CSS yang dibutuhkan secara otomatis. Sekarang jalankan server development:

bash
npm run dev

Buka alamat yang ditampilkan (biasanya http://localhost:5173), lalu buka file index.html dan mulai menulis kode. Mari kita pelajari utility class dasarnya.

Mengenal Utility Class Dasar

Utility class di Tailwind punya pola yang konsisten dan mudah dihafal. Berikut yang paling sering kamu pakai:

html
<!-- Spacing: p-* untuk padding, m-* untuk margin -->
<div class="p-4 m-2">Konten dengan padding dan margin</div>

<!-- Warna: bg-* untuk background, text-* untuk teks, border-* untuk garis -->
<div class="bg-blue-500 text-white border border-gray-300">Biru</div>

<!-- Tipografi: text-* untuk ukuran, font-* untuk ketebalan -->
<h1 class="text-3xl font-bold">Judul besar</h1>

<!-- Sudut membulat dan bayangan -->
<div class="rounded-lg shadow-md">Card dengan sudut membulat</div>

Membangun Komponen Card Responsif

Sekarang mari kita praktikkan dengan membangun sebuah komponen card yang rapi — lengkap dengan gambar, label kategori, judul, deskripsi, dan tombol:

html
<div class="max-w-sm mx-auto bg-white rounded-2xl shadow-lg overflow-hidden border border-gray-100">
  <img
    src="https://picsum.photos/400/200"
    alt="Ilustrasi artikel"
    class="w-full h-48 object-cover"
  />
  <div class="p-6">
    <span class="inline-block bg-blue-100 text-blue-700 text-xs font-semibold px-3 py-1 rounded-full">
      Tutorial
    </span>
    <h2 class="mt-3 text-xl font-bold text-gray-900">Membangun UI Modern dengan Tailwind</h2>
    <p class="mt-2 text-gray-600 text-sm leading-relaxed">
      Pelajari cara menyusun tampilan yang rapi dan responsif menggunakan utility class tanpa menulis CSS manual.
    </p>
    <a href="#" class="mt-5 inline-block bg-blue-600 text-white text-sm font-semibold px-5 py-2.5 rounded-lg hover:bg-blue-700 transition">
      Baca Selengkapnya
    </a>
  </div>
</div>

Layout dengan Flexbox dan Grid

Untuk menyusun elemen, Tailwind menyediakan utility untuk Flexbox dan Grid. Kamu tidak perlu menulis properti display: flex lagi — cukup tambahkan class flex atau grid:

html
<!-- Navbar sederhana dengan Flexbox -->
<div class="flex items-center justify-between gap-4 p-4 bg-gray-50">
  <span class="font-semibold">Logo</span>
  <nav class="flex gap-4 text-sm">
    <a href="#" class="hover:text-blue-600">Beranda</a>
    <a href="#" class="hover:text-blue-600">Tentang</a>
    <a href="#" class="hover:text-blue-600">Kontak</a>
  </nav>
</div>

<!-- Grid 3 kolom yang otomatis menyesuaikan layar -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
  <div class="bg-white p-4 rounded-lg shadow">Item 1</div>
  <div class="bg-white p-4 rounded-lg shadow">Item 2</div>
  <div class="bg-white p-4 rounded-lg shadow">Item 3</div>
</div>

Responsive Design dengan Breakpoint

Tailwind menganut pendekatan mobile-first: kamu menulis style untuk layar kecil terlebih dahulu, lalu menambahkan prefix breakpoint untuk memperbesar tampilan di layar yang lebih lebar. Prefix yang tersedia: sm: (640px), md: (768px), lg: (1024px), xl: (1280px), dan 2xl: (1536px).

html
<!-- Judul yang membesar seiring lebar layar -->
<h1 class="text-lg sm:text-2xl md:text-4xl lg:text-5xl font-bold">
  Judul yang Menyesuaikan Layar
</h1>

<!-- Susun vertikal di HP, horizontal di desktop -->
<div class="flex flex-col md:flex-row gap-4">
  <div class="flex-1 bg-blue-100 p-6 rounded-lg">Kolom 1</div>
  <div class="flex-1 bg-green-100 p-6 rounded-lg">Kolom 2</div>
</div>

Dark Mode

Secara bawaan, Tailwind v4 mengaktifkan dark mode mengikuti preferensi sistem (prefers-color-scheme). Kalau kamu ingin mengontrolnya lewat class .dark di elemen <html> (misalnya dengan tombol toggle), tambahkan satu baris custom variant di file src/style.css:

css
@import "tailwindcss";

/* Aktifkan dark mode berbasis class .dark (bukan hanya preferensi sistem) */
@custom-variant dark (&:where(.dark, .dark *));

Setelah itu, gunakan prefix dark: pada utility class mana pun:

html
<!-- Tambahkan class "dark" di <html> untuk mengaktifkan dark mode -->
<html class="dark"></html>

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 p-6 rounded-lg">
  <h2 class="text-lg font-semibold">Kartu dengan Dark Mode</h2>
  <p class="text-sm text-gray-600 dark:text-gray-300">
    Warna berubah otomatis saat elemen html memiliki class "dark".
  </p>
</div>

Tips: Prefix interaksi seperti hover:, focus:, dan active: bisa dikombinasikan dengan breakpoint dan dark mode, misalnya md:hover:dark:bg-gray-800. Ini membuat antarmuka terasa hidup tanpa menulis JavaScript tambahan.

Build untuk Production

Saat siap dideploy, jalankan perintah build. Tailwind v4 otomatis menghapus class yang tidak terpakai sehingga file CSS yang dihasilkan sangat kecil dan cepat dimuat:

bash
npm run build

Hasil build tersimpan di folder dist/ dan siap diunggah ke hosting statis seperti Vercel, Netlify, atau GitHub Pages. Karena output-nya murni file statis, kamu juga bisa memanfaatkan Tailwind untuk mempercantik template project Django kamu nanti.

Langkah Selanjutnya

Kamu sudah menguasai fondasi Tailwind CSS. Langkah berikutnya yang disarankan adalah menggabungkannya dengan framework frontend berbasis komponen. Tailwind sangat populer di ekosistem React — lanjutkan dengan tutorial React untuk pemula untuk membangun antarmuka yang lebih dinamis. Selamat mencoba!

Kesimpulan

Tailwind CSS mengubah cara kita menulis style: lebih cepat, konsisten, dan mudah dipelihara. Di tutorial ini kamu telah belajar menginstal Tailwind v4 dengan Vite, memahami utility class dasar, membangun komponen responsif, mengatur layout dengan flexbox dan grid, hingga menambahkan dark mode. Dengan fondasi ini, kamu bisa membangun antarmuka web modern tanpa tersesat di tumpukan file CSS. Selamat membangun!