TAILWIND-CSS DOCS

LAYOUT

container
Description: Elemen dengan lebar maksimum tetap dan pusatkan secara otomatis. Responsif dengan breakpoint.
Example: 
<div class="container mx-auto px-4">...</div>
Output: Lebar konten terbatas dan berada di tengah.
box-border / box-content
Description: Mengatur box-sizing: border-box atau content-box.
Example: 
<div class="box-border w-32 p-4">...</div>
Output: Lebar total 32 (128px) termasuk padding dan border.
block
Description: Elemen menjadi block (lebar penuh, baris baru).
Example: 
<span class="block">Saya sekarang block</span>
Output: Seperti <div>.
inline
Description: Elemen menjadi inline (tidak memulai baris baru, tidak bisa atur width/height).
Example: 
<div class="inline">Inline</div>
Output: Mengalir seperti teks.
inline-block
Description: Gabungan inline dan block: mengalir inline tapi bisa atur ukuran.
Example: 
<span class="inline-block w-24 h-8">...</span>
Output: Lebar/tinggi bisa diatur, tetap dalam satu baris.
hidden
Description: Menyembunyikan elemen (display: none).
Example: 
<div class="hidden">Tidak terlihat</div>
Output: Elemen hilang dari layout.
flex
Description: Mengaktifkan flex container.
Example: 
<div class="flex"><div>1</div><div>2</div></div>
Output: Anak-anak sejajar horizontal.
inline-flex
Description: Flex container yang inline.
Example: 
<div class="inline-flex">...</div>
Output: Seperti flex, tapi lebar sesuai konten.
grid
Description: Mengaktifkan grid container.
Example: 
<div class="grid grid-cols-3 gap-4">...</div>
Output: Anak-anak disusun dalam grid 3 kolom.
inline-grid
Description: Grid container yang inline.
Example: 
<div class="inline-grid">...</div>
Output: Grid dengan lebar konten.

FLEXBOX-GRID

flex-row / flex-col
Description: Arah sumbu utama flex: horizontal (row) atau vertikal (col).
Example: 
<div class="flex flex-col"><div>A</div><div>B</div></div>
Output: A di atas, B di bawah.
flex-wrap
Description: Item turun ke baris baru jika tidak muat.
Example: 
<div class="flex flex-wrap">...</div>
Output: Tidak overflow; baris baru terbentuk.
justify-center
Description: Rata tengah horizontal untuk flex/grid item.
Example: 
<div class="flex justify-center"><div>Item</div></div>
Output: Item berada di tengah horizontal.
items-center
Description: Rata tengah vertikal item dalam container flex/grid.
Example: 
<div class="flex items-center">...</div>
Output: Item rata tengah vertikal.
space-x-4 / space-y-2
Description: Memberi jarak antar anak secara horizontal (x) atau vertikal (y).
Example: 
<div class="flex space-x-4"><div>A</div><div>B</div></div>
Output: Jarak 1rem antar A dan B.
grid-cols-3
Description: Grid dengan 3 kolom sama lebar.
Example: 
<div class="grid grid-cols-3 gap-4">...</div>
Output: Tiga kolom.
col-span-2
Description: Elemen mengambil 2 kolom dari grid.
Example: 
<div class="col-span-2">Lebar 2 kolom</div>
Output: Membentang 2 kolom.
row-span-2
Description: Elemen mengambil 2 baris.
Example: 
<div class="row-span-2">Tinggi 2 baris</div>
Output: Membentang vertikal 2 baris.

SPACING

p-4, pt-2, pr-8, pb-2, pl-8
Description: Padding (semua sisi, top, right, bottom, left). Angka 0, 0.5 (0.125rem), 1 (0.25rem), 2 (0.5rem), 3 (0.75rem), 4 (1rem), 5 (1.25rem), 6 (1.5rem), 8 (2rem), 10 (2.5rem), 12 (3rem), 16 (4rem), 20 (5rem), 24 (6rem).
Example: 
<div class="p-4 pt-2">Konten</div>
Output: Padding 1rem di semua sisi, 0.5rem di atas.
m-4, mt-2, mr-8, mb-2, ml-8, mx-auto, my-4
Description: Margin. mx-auto membuat margin kiri/kanan otomatis (centering block).
Example: 
<div class="mx-auto w-1/2">Tengah</div>
Output: Elemen block berada di tengah horizontal.
gap-4
Description: Jarak antar item dalam flex atau grid.
Example: 
<div class="grid grid-cols-2 gap-4">...</div>
Output: Jarak 1rem antar item.

SIZING

w-1/2, w-full, w-screen
Description: Lebar: 50%, 100%, 100vw.
Example: 
<div class="w-1/2">Setengah</div>
Output: Lebar 50% parent.
h-10, h-screen
Description: Tinggi: 10 (2.5rem), 100vh.
Example: 
<div class="h-screen">Tinggi penuh</div>
Output: Memenuhi tinggi viewport.
min-h-screen
Description: Tinggi minimal 100vh.
Example: 
<div class="min-h-screen">Min 100vh</div>
Output: Minimal setinggi layar, bisa lebih.
max-w-lg
Description: Lebar maksimum: sm (24rem), md (28rem), lg (32rem), xl (36rem), 2xl (42rem), ...
Example: 
<div class="max-w-lg mx-auto">...</div>
Output: Lebar maksimal 32rem, tengah.

TYPOGRAPHY

text-xs, text-sm, text-base, text-lg, text-xl, text-2xl, ..., text-9xl
Description: Ukuran font. xs: 0.75rem, sm: 0.875rem, base: 1rem, lg: 1.125rem, xl: 1.25rem, 2xl: 1.5rem, 3xl: 1.875rem, 4xl: 2.25rem, ... 9xl: 8rem.
Example: 
<p class="text-base">Teks normal</p>
Output: Ukuran font 16px.
font-bold, font-semibold, font-normal, font-light, font-thin
Description: Ketebalan font. bold=700, semibold=600, normal=400, light=300, thin=100.
Example: 
<h1 class="text-2xl font-bold">Judul</h1>
Output: Tebal.
tracking-tight, tracking-wide
Description: Letter spacing. tight: -0.025em, wide: 0.025em.
Example: 
<h2 class="tracking-tight">Judul rapat</h2>
Output: Huruf lebih rapat.
leading-relaxed
Description: Line height. relaxed: 1.625.
Example: 
<p class="leading-relaxed">Paragraf panjang...</p>
Output: Baris renggang.
text-center, text-left, text-right, text-justify
Description: Rata teks.
Example: 
<div class="text-center">Tengah</div>
Output: Teks di tengah.
text-red-500, text-blue-700, text-gray-900, dll.
Description: Warna teks. Menggunakan palet warna bawaan Tailwind.
Example: 
<span class="text-red-500">Error</span>
Output: Teks merah.
underline, line-through, no-underline
Description: Dekorasi teks.
Example: 
<a class="underline hover:no-underline">Link</a>
Output: Tautan bergaris bawah.
truncate
Description: Memotong teks dengan ellipsis jika overflow (perlu width tetap).
Example: 
<p class="w-48 truncate">Teks yang sangat panjang...</p>
Output: Teks dipotong dengan '...'.
whitespace-nowrap
Description: Teks tidak melipat ke baris baru.
Example: 
<td class="whitespace-nowrap">Data panjang</td>
Output: Teks dalam satu baris.
break-words
Description: Memotong kata jika terlalu panjang (overflow-wrap: break-word).
Example: 
<p class="break-words">url_sangat_panjang...</p>
Output: Kata dipecah jika perlu.

BACKGROUNDS

bg-red-500, bg-blue-200, bg-gray-100
Description: Warna latar belakang.
Example: 
<div class="bg-blue-500 text-white p-4">Tombol</div>
Output: Latar belakang biru.
bg-gradient-to-r, from-cyan-500, to-blue-500
Description: Gradien linear. to-r (kanan), to-b (bawah), to-tl (kiri atas).
Example: 
<div class="bg-gradient-to-r from-purple-500 to-pink-500 p-4">Gradien</div>
Output: Gradien ungu ke pink.
bg-opacity-50
Description: Mengatur opacity latar belakang (0-100).
Example: 
<div class="bg-black bg-opacity-50">...</div>
Output: Hitam dengan opacity 50%.
bg-cover, bg-center, bg-no-repeat
Description: Background image: cover, posisi tengah, tidak diulang.
Example: 
<div class="bg-[url('/img/hero.jpg')] bg-cover bg-center">...</div>
Output: Gambar menutupi elemen, terpusat.

BORDERS

border, border-2, border-4
Description: Menambahkan border dengan ketebalan 1px, 2px, 4px.
Example: 
<div class="border-2 border-gray-300 p-4">Card</div>
Output: Border abu-abu 2px.
border-red-500, border-t-4, border-r-0
Description: Warna border, border sisi tertentu, hapus border sisi.
Example: 
<div class="border-t-4 border-blue-500">...</div>
Output: Hanya border atas tebal biru.
rounded, rounded-lg, rounded-full
Description: Sudut melengkung. rounded: 0.25rem, lg: 0.5rem, full: 9999px (lingkaran).
Example: 
<img class="rounded-full w-12 h-12" src="..." />
Output: Gambar bulat sempurna.
divide-y, divide-x, divide-gray-200
Description: Mengatur border antar anak dalam flex/grid.
Example: 
<div class="divide-y divide-gray-200"><div>A</div><div>B</div></div>
Output: Garis horizontal antar A dan B.

EFFECTS

shadow, shadow-md, shadow-lg, shadow-xl
Description: Box shadow. md: 0 4px 6px rgba(0,0,0,0.1).
Example: 
<div class="shadow-lg p-6 bg-white rounded">Card</div>
Output: Bayangan besar di bawah card.
shadow-inner
Description: Shadow di dalam elemen.
Example: 
<div class="shadow-inner bg-gray-100 p-4">...</div>
Output: Efek cekung.
opacity-75
Description: Transparansi. 0-100 (0-1).
Example: 
<img class="opacity-50" ... />
Output: Gambar semi-transparan.
mix-blend-multiply
Description: Blend mode (multiply, screen, overlay, dll).
Example: 
<div class="mix-blend-multiply bg-blue-500">...</div>
Output: Efek campuran dengan latar.

FILTERS

blur, blur-sm, blur-lg
Description: Efek blur.
Example: 
<div class="blur-sm">Teks kabur</div>
Output: Sedikit blur.
brightness-110, contrast-125, saturate-150
Description: Penyesuaian kecerahan, kontras, saturasi (persen).
Example: 
<img class="brightness-75" ... />
Output: Gambar lebih gelap.
grayscale, sepia
Description: Filter abu-abu, sepia.
Example: 
<img class="grayscale hover:grayscale-0" ... />
Output: Hitam-putih, hover menjadi berwarna.

TABLES

table, table-auto, table-fixed
Description: Mengatur display table dan layout.
Example: 
<table class="table-auto w-full">...</table>
Output: Lebar kolom otomatis sesuai konten.
border-collapse
Description: Menggabungkan border sel (collapse) atau terpisah.
Example: 
<table class="border-collapse border border-gray-300">...</table>
Output: Border antar sel menyatu.

TRANSITIONS-ANIMATION

transition, transition-all, transition-colors, transition-opacity, transition-transform
Description: Mengaktifkan transisi pada perubahan properti.
Example: 
<button class="transition-colors duration-300 hover:bg-blue-700">...</button>
Output: Warna berubah halus dalam 300ms.
duration-300
Description: Durasi transisi dalam milidetik: 75, 100, 150, 200, 300, 500, 700, 1000.
Example: 
class="duration-500"
Output: Transisi 0.5 detik.
ease-in, ease-out, ease-in-out, linear
Description: Timing function transisi.
Example: 
<div class="transition-transform duration-200 ease-in-out hover:scale-105">...</div>
Output: Membesar perlahan saat hover.
animate-spin, animate-ping, animate-pulse, animate-bounce
Description: Animasi bawaan Tailwind.
Example: 
<div class="animate-spin h-6 w-6 border-t-2 border-blue-500 rounded-full"></div>
Output: Berputar terus menerus (spinner).

TRANSFORMS

scale-105, scale-x-50, scale-y-75
Description: Memperbesar/memperkecil elemen. 100 = 100%.
Example: 
<img class="transform hover:scale-110 transition" ... />
Output: Gambar membesar saat hover.
rotate-45, rotate-90, -rotate-45
Description: Rotasi dalam derajat.
Example: 
<div class="transform rotate-45">...</div>
Output: Elemen diputar 45°.
translate-x-4, -translate-y-2
Description: Translasi (pergeseran) sumbu x atau y (nilai dalam rem).
Example: 
<div class="transform translate-x-4">Geser kanan</div>
Output: Bergeser 1rem ke kanan.
origin-top-left, origin-center
Description: Titik asal transformasi.
Example: 
<div class="transform rotate-45 origin-top-left">...</div>
Output: Berputar dari pojok kiri atas.

INTERACTIVITY

cursor-pointer, cursor-not-allowed
Description: Bentuk kursor.
Example: 
<button class="cursor-pointer">Klik</button>
Output: Kursor tangan.
select-none, select-text
Description: Mengizinkan atau mencegah seleksi teks.
Example: 
<div class="select-none">Tidak bisa di-select</div>
Output: Teks tidak bisa di-copy.
resize, resize-none
Description: Mengizinkan resize elemen (textarea).
Example: 
<textarea class="resize-none"></textarea>
Output: Tidak bisa diresize.

SVG

fill-current
Description: Mengisi SVG dengan warna teks saat ini.
Example: 
<svg class="fill-current text-blue-500">...</svg>
Output: SVG mengikuti warna teks.
stroke-current
Description: Stroke SVG mengikuti warna teks.
Example: 
<svg class="stroke-current text-red-500">...</svg>
Output: Garis SVG berwarna merah.

ACCESSIBILITY

sr-only
Description: Hanya terlihat oleh screen reader (teks tersembunyi secara visual).
Example: 
<span class="sr-only">Tutup</span>
Output: Screen reader membaca 'Tutup'.
not-sr-only
Description: Mengembalikan elemen dari sr-only menjadi terlihat pada breakpoint tertentu.
Example: 
<span class="sr-only md:not-sr-only">Tampil di md</span>
Output: Di layar medium ke atas, teks terlihat.

CONFIG

tailwind.config.js
Description: File konfigurasi untuk menyesuaikan tema, breakpoint, plugin, dll.
Example: 
module.exports = { theme: { extend: { colors: { brand: '#6C5CE7' } } }, plugins: [] }
Output: Warna kustom 'brand' tersedia sebagai bg-brand, text-brand, dll.
@layer base
Description: Menambahkan gaya dasar (reset) di file CSS utama dengan @tailwind base.
Example: 
@layer base { h1 { @apply text-2xl font-bold; } }
Output: Gaya dasar untuk h1 diterapkan.
@apply
Description: Menggabungkan utility Tailwind ke dalam aturan CSS kustom.
Example: 
.btn { @apply bg-blue-500 text-white py-2 px-4 rounded; }
Output: Kelas .btn memiliki semua utility tersebut.

VARIANTS

hover:bg-red-600
Description: Gaya diterapkan saat hover.
Example: 
<button class="bg-red-500 hover:bg-red-600">Hover me</button>
Output: Warna tombol berubah saat disorot.
focus:outline-none focus:ring-2
Description: Gaya saat elemen difokuskan (keyboard atau klik).
Example: 
<input class="focus:outline-none focus:ring-2 focus:ring-blue-500" />
Output: Saat fokus, muncul cincin biru.
active:scale-95
Description: Gaya saat elemen sedang diklik (aktif).
Example: 
<button class="active:scale-95 transition">Klik</button>
Output: Tombol sedikit mengecil saat ditekan.
dark:bg-gray-900
Description: Gaya saat mode gelap (prefers-color-scheme: dark). Butuh konfigurasi darkMode: 'class' atau 'media'.
Example: 
<div class="bg-white dark:bg-gray-900 dark:text-white">...</div>
Output: Latar belakang putih di mode terang, abu-abu gelap di mode gelap.
md:flex, lg:hidden
Description: Responsive variant: hanya berlaku pada breakpoint tertentu.
Example: 
<div class="hidden md:flex">...</div>
Output: Elemen tersembunyi di mobile, tampil flex di tablet ke atas.

PLUGINS

@tailwindcss/typography
Description: Plugin resmi untuk styling konten teks panjang (artikel, blog) dengan kelas 'prose'.
Example: 
<article class="prose lg:prose-xl"><h1>Judul</h1><p>...</p></article>
Output: Tipografi otomatis yang indah untuk konten Markdown/HTML.
@tailwindcss/forms
Description: Plugin untuk mereset gaya default form agar seragam di semua browser.
Example: 
// tailwind.config.js: plugins: [require('@tailwindcss/forms')]
Output: Input, select, textarea memiliki tampilan yang konsisten.
@tailwindcss/line-clamp
Description: Plugin untuk membatasi baris teks (line-clamp). Sekarang sudah termasuk di core (line-clamp-3).
Example: 
<p class="line-clamp-3">Teks panjang...</p>
Output: Maksimal 3 baris, lebih dipotong dengan ellipsis.

PSEUDO-CLASSES

hover:bg-blue-600
Description: Gaya saat kursor berada di atas elemen.
Example: 
<button class="bg-blue-500 hover:bg-blue-600">Hover me</button>
Output: Tombol berubah warna saat disorot.
focus:ring-2
Description: Gaya saat elemen menerima fokus (input, tombol).
Example: 
<input class="focus:ring-2 focus:ring-blue-500 focus:outline-none" />
Output: Cincin biru muncul saat input difokuskan.
active:scale-95
Description: Gaya saat elemen sedang diklik (mouse down).
Example: 
<button class="active:scale-95 transition">Klik</button>
Output: Tombol sedikit mengecil saat ditekan.
visited:text-purple-600
Description: Gaya untuk tautan yang sudah dikunjungi.
Example: 
<a href="#" class="text-blue-600 visited:text-purple-600">Link</a>
Output: Tautan berubah ungu setelah diklik.
disabled:opacity-50
Description: Gaya saat elemen dalam keadaan disabled.
Example: 
<button class="disabled:opacity-50 disabled:cursor-not-allowed" disabled>Submit</button>
Output: Tombol terlihat redup dan kursor berubah.
checked:bg-green-500
Description: Gaya untuk checkbox/radio yang sedang checked.
Example: 
<input type="checkbox" class="checked:bg-green-500" />
Output: Warna latar berubah saat dicentang.
focus-within:ring-2
Description: Gaya pada parent jika ada anak yang sedang fokus.
Example: 
<div class="border focus-within:ring-2 focus-within:ring-blue-500"><input /></div>
Output: Border parent berubah saat anak input difokuskan.
first:mt-0 / last:mb-0
Description: Gaya untuk elemen pertama atau terakhir di dalam container.
Example: 
<ul><li class="first:mt-0 last:mb-0">Item</li></ul>
Output: Menghapus margin atas/bawah pada item pertama/terakhir.
even:bg-gray-100 / odd:bg-white
Description: Gaya untuk baris genap/ganjil (zebra striping).
Example: 
<tr class="even:bg-gray-100 odd:bg-white">...</tr>
Output: Baris genap abu‑abu, baris ganjil putih.
nth-child(3):bg-red-500
Description: Arbitrary pseudo‑class: memilih anak ke‑n.
Example: 
<div class="[&:nth-child(3)]:bg-red-500">Item 3</div>
Output: Hanya item ke‑3 yang merah.

PSEUDO-ELEMENTS

placeholder:text-gray-400
Description: Gaya untuk teks placeholder pada input/textarea.
Example: 
<input class="placeholder:text-gray-400 placeholder:italic" placeholder="Nama" />
Output: Placeholder abu‑abu dan miring.
file:bg-blue-500 file:text-white
Description: Gaya untuk tombol upload file (pada input type="file").
Example: 
<input type="file" class="file:bg-blue-500 file:text-white file:border-none file:rounded" />
Output: Tombol Choose File berwarna biru.
selection:bg-yellow-300
Description: Gaya untuk teks yang diseleksi pengguna.
Example: 
<p class="selection:bg-yellow-300 selection:text-black">Pilih teks ini</p>
Output: Blok seleksi berwarna kuning.
marker:text-red-500
Description: Gaya untuk penanda (bullet) di daftar.
Example: 
<ul class="list-disc marker:text-red-500"><li>Merah</li></ul>
Output: Bullet berwarna merah.
before:content-['*'] / after:content-['→']
Description: Menambahkan konten pseudo‑element ::before dan ::after.
Example: 
<span class="before:content-['★_'] after:content-['_★']">Penting</span>
Output: ★ Penting ★
first-letter:text-2xl
Description: Gaya untuk huruf pertama paragraf.
Example: 
<p class="first-letter:text-2xl first-letter:font-bold first-letter:float-left">Drop cap</p>
Output: Huruf pertama lebih besar.
first-line:uppercase
Description: Gaya untuk baris pertama paragraf.
Example: 
<p class="first-line:uppercase first-line:tracking-wide">Baris pertama kapital semua</p>
Output: Hanya baris pertama yang kapital.

CHILD-SIBLING

*:mx-2 (semua anak langsung)
Description: Menerapkan gaya ke semua anak langsung dari sebuah container.
Example: 
<div class="*:mx-2"><span>A</span><span>B</span></div>
Output: Semua <span> di dalam div mendapat mx‑2.
[&>li]:hover:bg-gray-100
Description: Arbitrary variant: saat hover pada <li> anak.
Example: 
<ul class="[&>li]:hover:bg-gray-100"><li>Item</li></ul>
Output: Setiap item <li> berubah latar saat disorot.
[&_a]:text-blue-600
Description: Arbitrary variant: semua <a> di dalam elemen (berapapun kedalamannya).
Example: 
<div class="[&_a]:text-blue-600 [&_a]:underline"><a href="#">Link</a></div>
Output: Semua tautan di dalam div berwarna biru.
[&:not(:first-child)]:border-t
Description: Arbitrary variant: kecuali anak pertama.
Example: 
<div class="[&>div:not(:first-child)]:border-t"><div>A</div><div>B</div></div>
Output: Border atas hanya pada B, bukan A.

GROUP-PEER

group (parent marker) + group-hover:...
Description: Mengubah anak saat parent di‑hover.
Example: 
<div class="group"><h3 class="group-hover:text-blue-500">Judul</h3></div>
Output: Judul berubah biru saat kursor di atas parent.
group-focus:...
Description: Mengubah anak saat parent menerima fokus.
Example: 
<div class="group"><input /><span class="group-focus-within:text-blue-500">Aktif</span></div>
Output: Teks 'Aktif' membiru saat input di dalamnya fokus.
peer (sibling marker) + peer-invalid:...
Description: Mengubah saudara setelahnya berdasarkan state sibling (contoh: input valid/invalid).
Example: 
<input class="peer" required /><p class="hidden peer-invalid:block text-red-500">Wajib diisi</p>
Output: Pesan error muncul jika input tidak valid.
peer-checked:...
Description: Mengubah saudara setelah checkbox/radio yang dicentang.
Example: 
<input type="checkbox" class="peer" /><span class="peer-checked:text-green-500">Setuju</span>
Output: Teks berubah hijau saat checkbox dicentang.

ATTRIBUTE-SELECTORS

aria-checked:bg-green-500
Description: Gaya berdasarkan atribut aksesibilitas (aria-*).
Example: 
<div role="checkbox" aria-checked="true" class="aria-checked:bg-green-500">✓</div>
Output: Latar hijau saat aria‑checked="true".
data-[state=open]:block
Description: Gaya berdasarkan atribut data.
Example: 
<div data-state="open" class="hidden data-[state=open]:block">Terbuka</div>
Output: Elemen terlihat hanya jika data‑state='open'.

ARBITRARY

Arbitrary values (w-[300px], bg-[#bada55])
Description: Menggunakan nilai kustom di luar konfigurasi default.
Example: 
<div class="w-[calc(100%-2rem)] bg-[#bada55]">Custom</div>
Output: Lebar kalkulasi dan warna hex bebas.
Arbitrary variants ([@media(min-width:1234px)]:flex)
Description: Menggunakan media query atau selector kustom.
Example: 
<div class="[@media(min-width:1234px)]:flex [&_.child]:hidden">...</div>
Output: Flex hanya di atas 1234px; child di dalamnya hidden.