Pengenalan Tailwind CSS 4 & Utility-First
Apa itu Tailwind CSS, filosofi utility-first, kenapa banyak dipakai, cara memasang Tailwind 4, dan cara kerja latihan di kursus ini.
Apa itu Tailwind CSS?
Tailwind CSS adalah framework CSS yang memberimu ribuan class kecil siap pakai (disebut utility class). Setiap class melakukan satu hal: p-4 memberi padding, text-center meratakan teks ke tengah, bg-blue-500 mewarnai latar. Kamu menyusun tampilan dengan menggabungkan class-class itu langsung di HTML.
<button class="rounded-lg bg-blue-600 px-4 py-2 font-semibold text-white">
Beli sekarang
</button>Tanpa menulis satu baris CSS pun, tombol di atas sudah berwarna biru, sudut membulat, punya jarak dalam, dan tulisannya tebal berwarna putih.
Cara lama vs utility-first
| CSS tradisional | Tailwind (utility-first) | |
|---|---|---|
| Cara kerja | Beri nama class (.tombol-utama), lalu tulis aturannya di file CSS terpisah | Pakai class siap pakai langsung di HTML |
| Bolak-balik file | Sering (HTML ↔ CSS) | Hampir tidak perlu |
| Memberi nama | Sulit dan melelahkan (.card-wrapper-inner?) | Tidak perlu memberi nama |
| CSS tumbuh | Terus membesar seiring proyek | Berhenti tumbuh: class dipakai ulang |
| Mengubah gaya | Berisiko merusak tempat lain | Aman: perubahan hanya di elemen itu |
Banyak pemula kaget: "ini kan sama saja dengan style=""?" Berbeda. Utility class punya batasan desain (skala spasi, palet warna tetap), mendukung state (hover:, focus:), responsif (md:), dan dark mode (dark:) — hal yang mustahil dengan style inline.
Apa yang baru di Tailwind 4?
- Konfigurasi CSS-first: tidak ada lagi
tailwind.config.jswajib; kustomisasi ditulis di CSS dengan@theme. - Satu baris untuk memulai:
@import "tailwindcss";menggantikan tiga direktif@tailwindlama. - Deteksi file otomatis: tidak perlu mengisi
content: [...]. - Mesin baru yang jauh lebih cepat (build penuh hingga beberapa kali lipat lebih cepat, build inkremental sangat cepat).
- CSS modern: palet warna
oklch, cascade layers,@property,color-mix(), container queries bawaan.
Cara memasang (proyek sungguhan)
Cara paling umum memakai Vite:
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";Lalu muat file CSS itu dari halaman/JS-mu, dan mulai pakai class. Opsi lain: plugin PostCSS (@tailwindcss/postcss), CLI mandiri (npx @tailwindcss/cli -i input.css -o output.css --watch), atau satu tag script untuk mencoba cepat:
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>Tag script itu hanya untuk belajar dan prototipe, bukan produksi. Persis itulah yang dipakai editor di kursus ini: Tailwind 4 dikompilasi langsung di browser.
Cara kerja latihan di kursus ini
- Editor berisi potongan HTML. Beri class Tailwind pada elemen-elemennya.
- Saat menekan Jalankan, Tailwind 4 mengompilasi class-mu dan hasilnya tampil di panel pratinjau.
- Pengecek otomatis membaca gaya yang benar-benar dihitung browser (misalnya ukuran font 30px), jadi class yang salah atau salah ketik akan ketahuan.
- Bab-bab lanjut memakai
<style type="text/tailwindcss">untuk menulis konfigurasi CSS (@theme,@utility, dll.). - Lebar area pengecekan 800px: breakpoint
smdanmdsudah aktif,lgbelum.
Kesalahan umum pemula
- Mengira harus menghafal semua class. Cukup paham pola penamaannya; dokumentasi dan autocomplete editor membantu.
- Membuat nama class sendiri dari potongan (
class="bg-{{warna}}-500"). Tailwind memindai teks lengkap; nama class tidak boleh dirakit dari pecahan string (dibahas lagi di bab 16). - Menaruh teks di luar elemen dan heran kenapa gayanya tidak muncul: class harus ada di elemen yang ingin diubah.