Belajar Frontend - Styling & Utility CSS

#Pendahuluan

Di episode 4 kita menulis CSS murni. Di aplikasi produksi, pertanyaannya bukan hanya "bisakah", tetapi "bagaimana tim berkolaborasi dalam satu file CSS tanpa saling menabrak?". Episode 10 menjawabnya dengan pendekatan styling modern: utility CSS (Tailwind), CSS Modules, dan design tokens.

Mengapa episode ini penting? Karena keputusan styling menentukan kecepatan pengembangan tim dan kualitas hasil akhir. CSS global yang berantakan adalah penyebab utama "aku ubah di sini, rusak di sana". Pendekatan modern memecahkan ini dengan cara berbeda — dan sebagai frontend developer kalian harus tahu kapan memakai yang mana.

#Empat Pendekatan Styling

Di 2026, utility-first (Tailwind) mendominasi di proyek baru, sering dikombinasikan dengan CSS Modules untuk komponen khusus.

#Tailwind CSS v4

Tailwind v4 (rilis 2025) mengubah cara konfigurasi: tidak lagi butuh file tailwind.config.js yang panjang — hampir semuanya dideklarasikan dalam CSS lewat @theme.

globals.css dengan Tailwind v4

@import "tailwindcss";
 
@theme {
  --color-primary: #b45309;
  --color-surface: #fafaf9;
  --font-sans: "Inter", system-ui, sans-serif;
}

Markup TokoKita menjadi jauh lebih ringkas:

export function ProductCard({ product }: { product: Product }) {
  return (
    <article className="flex flex-col gap-2 rounded-lg bg-white p-4 shadow-sm">
      <h2 className="text-lg font-semibold">{product.name}</h2>
      <p className="mt-auto text-primary font-medium">
        Rp{product.price.toLocaleString("id-ID")}
      </p>
    </article>
  );
}

Kelas utility seperti flex, gap-2, rounded-lg memetakan langsung ke CSS — tanpa menulis satu baris CSS pun. Keuntungan utama: konsistensi. Tidak ada lagi ukuran 14px yang "agak beda" antar halaman, karena semuanya berasal dari skala yang sama.

#CSS Modules

Untuk komponen kompleks atau logika styling yang panjang, CSS Modules memberikan scoping otomatis: nama class di-compile menjadi unik per komponen.

ProductCard.module.css

.card { composes: nothing; }
.wrapper {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 1rem;
}

import styles from "./ProductCard.module.css";
 
export function ProductCard() {
  return <article className={styles.wrapper}>…</article>;
}

styles.wrapper dijamin tidak bentrok dengan class lain di aplikasi. Di Next.js, ini didukung bawaan tanpa konfigurasi.

#Design Tokens

Design tokens adalah nilai desain (warna, spacing, radius, tipografi) yang disimpan sekali dan dipakai di mana pun — prinsip yang sudah kita mulai dengan custom properties di episode 4. Di Tailwind, token dideklarasikan di @theme; di CSS murni, di :root; di Figma, di style library.

Token sebagai sumber kebenaran

@theme {
  --color-primary: #b45309;
  --color-primary-hover: #92400e;
  --color-danger: #dc2626;
  --radius-card: 0.5rem;
  --shadow-card: 0 1px 3px rgb(0 0 0 / 0.1);
}

Konsistensi visual seluruh aplikasi — dari tombol sampai kartu — muncul dari token yang sama. Episode 25 akan membawa ini ke tingkat design system lengkap.

#Praktik: TokoKita dengan Tailwind

Proyek Next.js yang dibuat di episode 9 (--tailwind) sudah terpasang Tailwind v4. Cukup definisikan token, lalu susun halaman dari utility class:

bunx tailwindcss -v

Mulai dari komponen terkecil: tombol (pakai token primary), kartu produk, lalu grid halaman. Uji responsif langsung dengan class grid-cols-1 sm:grid-cols-2 lg:grid-cols-3.

#Common Pitfalls

#Penutup

Inti yang harus dibawa pulang:

• Utility-first (Tailwind v4) adalah default di proyek modern: konsisten dan cepat disusun.
• CSS Modules memberi scoping untuk komponen kompleks; pilih sesuai kebutuhan.
• Design tokens menyimpan keputusan desain sekali, dipakai di mana-mana.
• Tailwind v4: konfigurasi di @theme dalam CSS, tanpa file config panjang.

Di episode 11 selanjutnya kita menangani bagian paling hidup dari aplikasi: state management & data fetching — TanStack Query untuk server state, Zustand/Redux untuk client state, dan pola data fetching yang robust di TokoKita. Sampai jumpa di episode 11!