Styling di Next.js: CSS Module dan Tailwind

Tiga pendekatan

Next.js mendukung semua cara styling React: CSS global, CSS Module, dan Tailwind. Kamu bisa mencampurnya, tapi pahami dulu peran masing-masing.

CSS global

File app/globals.css di-import sekali di root layout dan berlaku untuk semua halaman. Cocok untuk reset, variabel, dan style dasar:

// app/layout.tsx
import "./globals.css";

Aturannya: CSS global hanya boleh di-import di root layout, tidak di komponen lain.

CSS Module

Untuk style yang spesifik satu komponen tanpa takut nama class bentrok, pakai CSS Module (file berakhiran .module.css):

/* app/tombol.module.css */
.utama {
  background: #8b5cf6;
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
}

// app/tombol.tsx
import styles from "./tombol.module.css";

export default function Tombol() {
  return <button className={styles.utama}>Klik</button>;
}

Class utama otomatis diberi nama unik saat build, jadi tidak akan bentrok dengan class lain.

Tailwind CSS

Kalau project dibuat dengan opsi Tailwind, kamu bisa menulis utility class langsung di JSX:

export default function Kartu() {
  return (
    <div className="rounded-xl bg-white p-6 shadow-lg">
      <h2 className="text-xl font-bold">Judul</h2>
    </div>
  );
}

Tailwind cocok untuk prototyping cepat dan design system yang konsisten.

Kesalahan umum pemula

• Import CSS global di komponen. Ini error di Next.js. CSS global hanya boleh di-import di root layout.
• Mencampur tiga pendekatan tanpa aturan. Satu file pakai Tailwind, file lain CSS Module, file lain inline style. Pilih satu sebagai standar tim.
• Inline style untuk semua. style={{...}} sulit dirawat dan tidak bisa pakai media query atau hover. Pakai untuk nilai dinamis saja.

Latihan singkat

1. Buat komponen kartu dengan CSS Module: satu file .module.css dan satu file .tsx.
2. Buat ulang kartu yang sama dengan Tailwind, lalu bandingkan: mana yang lebih cepat ditulis dan mana yang lebih mudah dibaca?

Rangkuman

• Tiga pendekatan: CSS global (root layout saja), CSS Module (per komponen), Tailwind (utility).
• CSS Module memberi nama class unik otomatis agar tidak bentrok.
• Pilih satu pendekatan sebagai standar project dan konsisten.
• Inline style hanya untuk nilai dinamis, bukan styling utama.

Catatan teknis: Jangan campur terlalu banyak pendekatan dalam satu project. Pilih satu sebagai utama (misal Tailwind) dan pakai yang lain hanya untuk kasus khusus. Inkonsistensi styling bikin codebase susah dirawat.