Styling: CSS Module & Tailwind

Cara 1 — CSS Module

Buat file CSS bernama xxx.module.css. Nama class di dalamnya dibuat unik otomatis, jadi tidak bentrok dengan komponen lain.

/* kartu.module.css */
.kartu { padding: 16px; border: 1px solid #ccc; }
.judul { color: darkgreen; }

import styles from "./kartu.module.css";

export default function Kartu() {
  return (
    <div className={styles.kartu}>
      <h2 className={styles.judul}>Next.js</h2>
    </div>
  );
}

Cara 2 — Tailwind CSS

Tailwind menyediakan class pendek siap pakai. Tidak perlu membuat file CSS:

<p className="text-gray-500 mt-2">Belajar dari nol</p>

Pada proyek baru, create-next-app menawarkan Tailwind; jawab "Yes" jika ingin memakainya. Kedua cara boleh dicampur.