Apa itu Tailwind CSS? — Tailwind CSS

Pernah ngerjain CSS lalu mikir berjam-jam mau kasih nama class apa? header-button-primary-large-blue? Atau scroll ribuan baris CSS cari mana yang ngubah…

Tailwind CSS adalah framework CSS yang isinya ribuan class kecil siap pakai, dan tiap class mengerjakan satu hal: p-4 memberi padding, bg-white memberi latar putih, rounded-lg membulatkan sudut. Kamu gak nulis aturan CSS sendiri, kamu menyusun class-class itu langsung di atribut class elemennya. Class kecil seperti itu disebut utility, dan cara kerja ini namanya utility-first. Bayangin makan di warteg. Kamu gak pesan "paket nomor 7" yang isinya harus dicari dulu di daftar menu, kamu tunjuk lauknya satu-satu: nasi, ayam, sayur, sambal. Isi piringnya kelihatan dari pesananmu. Class Tailwind itu lauknya, dan atribut class itu pesananmu.

🧪 Tebakan cepat: p-4 itu padding 4px? Tebak dulu, jawabannya ada di bagian "Angka di nama class".

Kartu yang sama, dua cara

Kartu putih dengan padding 16px dan sudut membulat 8px. Pakai CSS biasa:

<div class="card">Kartu Pertamaku</div>

<style>
  .card {
    padding: 16px;
    background-color: white;
    border-radius: 8px;
  }
</style>

Pakai Tailwind:

<div class="p-4 bg-white rounded-lg">Kartu Pertamaku</div>

Tampilannya sama persis. Bedanya ada di cara nulis:

Di CSS biasa kamu harus mikirin nama (card), lalu menulis aturannya di tempat lain, biasanya di file CSS terpisah. Mau ubah padding? Pindah file, cari .card, ubah di sana.
Di Tailwind, gayanya nempel di tag-nya. Kamu gak perlu pindah file dan gak perlu bikin nama class. Baca HTML-nya, langsung tahu tampilannya.

Satu class, satu aturan CSS

Tailwind bukan sulap. Tiap class jadi satu aturan CSS biasa, yang ditulis Tailwind buatmu:

Class	CSS yang dibuat Tailwind	Nilainya
`p-4`	`padding: calc(var(--spacing) * 4)`	`1rem` = 16px
`bg-white`	`background-color: var(--color-white)`	`#fff`
`rounded-lg`	`border-radius: var(--radius-lg)`	`0.5rem` = 8px
`text-white`	`color: var(--color-white)`	`#fff`
`bg-blue-600`	`background-color: var(--color-blue-600)`	biru tua

var(--spacing), var(--color-white) dan kawan-kawannya adalah CSS variable bawaan Tailwind. --spacing isinya 0.25rem.
Awal nama class menyebut propertinya: p padding, bg background, text warna teks, rounded border-radius.
Jadi .btn { padding: 1rem; background: #2563eb; color: white; border-radius: 0.5rem; } sama dengan p-4 bg-blue-600 text-white rounded-lg. #2563eb adalah blue-600 di palet Tailwind v3. Di v4 palet itu ditulis ulang dalam format oklch dan sedikit lebih cerah, tapi namanya tetap blue-600.

Angka di nama class

Angka di p-4 bukan piksel. Itu jumlah langkah, dan satu langkah = 0.25rem = 4px (1rem = 16px, ukuran huruf bawaan browser).

Class	Hitungannya	Hasil
`p-1`	1 × 4px	4px
`p-2`	2 × 4px	8px
`p-4`	4 × 4px	16px
`p-8`	8 × 4px	32px

Jadi p-4 itu padding 16px di keempat sisi, bukan 4px. Itu jawaban tebakannya. Skala yang sama dipakai margin, lebar, tinggi dan jarak lain, dan dibahas lengkap di materi berikutnya.

Cara pasang Tailwind v4

Buat coba-coba, satu baris script di <head> sudah cukup. Playground di halaman ini sudah memasangnya buatmu:

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

Di project sungguhan dengan Vite, install paketnya, daftarkan plugin-nya, lalu impor Tailwind di file CSS utamamu:

npm install tailwindcss @tailwindcss/vite

// vite.config.js
import { defineConfig } from "vite"
import tailwindcss from "@tailwindcss/vite"

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

/* src/style.css */
@import "tailwindcss";

@import "tailwindcss"; memasukkan semua bagian Tailwind. Di v4 gak perlu file tailwind.config.js.
Waktu build, Tailwind membaca file-file project-mu sebagai teks, mencari nama class yang kamu tulis, dan cuma membuat CSS untuk class yang ketemu. Dari ribuan class yang tersedia, yang terkirim ke browser cuma yang kamu pakai, jadi file CSS-nya tetap kecil.

🤔 Bukannya ini sama aja dengan atribut style?

Kelihatannya mirip, tapi ada tiga beda besar:

Nilainya dari skala. style menerima angka apa pun (15px, 17px, 19px), class Tailwind mengajak kamu pakai skala yang sama di seluruh halaman, jadi jaraknya rapi.
Bisa kondisi. hover:bg-blue-700 (saat kursor di atasnya) dan md:p-8 (di layar lebar) jalan sebagai class. Atribut style gak bisa hover maupun ukuran layar. Keduanya dibahas di materi nanti.
CSS-nya dipakai bareng. .p-4 dibuat sekali dan dipakai semua elemen yang memasangnya.

⚠️ Jebakan yang sering ketemu

Balik pakai style="...". style="padding: 16px" memang jalan, tapi itu bukan Tailwind, dan latihan ini menolak atribut style. Tulis gayanya sebagai class: class="p-4".
Nulis pikselnya di nama class. p-16px gak ada, dan p-16 itu 64px. Bagi pikselnya dengan 4: 16px = p-4.
Nama class dirakit dari potongan teks. "p-" + ukuran gak pernah terbaca sebagai p-4 waktu Tailwind membaca file-mu, jadi CSS-nya gak dibuat. Tulis nama class-nya utuh.
Ngikutin tutorial Tailwind v3. Tutorial lama memulai CSS dengan @tailwind base;, @tailwind components;, @tailwind utilities; dan butuh tailwind.config.js. Di v4 cukup @import "tailwindcss";.

TL;DR: Tailwind CSS itu framework utility-first: ribuan class kecil, tiap class satu tugas, dipasang langsung di atribut class. p-4 bg-white rounded-lg = padding 16px, latar putih, sudut 8px, tanpa menulis CSS sendiri dan tanpa pindah file. Angka di nama class itu langkah 4px (0.25rem), jadi p-4 = 16px, bukan 4px. Tiap class jadi satu aturan CSS biasa, misalnya p-4 jadi padding: calc(var(--spacing) * 4), dan Tailwind cuma membuat CSS untuk class yang dia temukan utuh di file-mu. CSS .btn { padding: 1rem; background: #2563eb; color: white; border-radius: 0.5rem; } ditulis p-4 bg-blue-600 text-white rounded-lg. Di v4, pasangnya cukup @import "tailwindcss";, atau satu script CDN buat coba-coba.