React & Tailwind CSS: Pasangan Serasi (Panduan Santai)

Halo Semuanya! 👋

Kita ngobrolin soal styling yuk. Kalau kamu udah sering ngoding React, pasti pernah ngerasain ribetnya urusan CSS. Kamu udah bikin komponen keren, eh… masih harus bikin file CSS terpisah. Belum lagi kalau pakai CSS Modules, nama class-nya jadi aneh kayak Button_button__1x2y3. 😵

“Masa sih gak ada cara yang lebih enak?” mungkin gitu batinmu.

Tenang, ada solusinya. Namanya Tailwind CSS.

Mungkin kamu mikir, “Ah, itu kan cuma inline style tapi dikasih nama keren doang?” Eits, tunggu dulu! 🐎 Biar saya jelasin kenapa React dan Tailwind itu sebenernya jodoh banget.

1. Masalah dengan CSS “Tradisional”

Bayangin kamu lagi bikin tombol (Button). Di CSS biasa, alurnya gini:

1. Bikin Button.js.
2. Bikin Button.css.
3. Mikirin nama class (enaknya .btn-primary apa .button-main ya?).
4. Bolak-balik antar file cuma buat ngecek padding atau warna.

Flow kerja kamu jadi kepotong. Capek konteks-nya pindah-pindah terus.

2. Kenalan sama Tailwind CSS

Di Tailwind, kamu nulis style langsung di dalam JSX. Awalnya emang kelihatan “kotor” atau berantakan, tapi kalau udah biasa, ini cepet banget.

Coba lihat ini:

// Komponen Button biasa
const Button = ({ text }) => {
  return (
    <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
      {text}
    </button>
  );
};

Lihat deh! Gak ada file terpisah. Gak ada nama class yang kita karang sendiri. Kamu tinggal baca class-nya dan langsung tau bentuknya kayak gimana:

• bg-blue-500: Background warna biru.
• hover:bg-blue-700: Biru lebih gelap pas di-hover.
• rounded: Sudutnya tumpul (rounded corners).

Kodenya jadi gampang dibaca, portable, dan kalau kamu copy-paste komponen ini ke project lain, bentuknya bakal sama persis.

3. Style yang Dinamis

”Tapi Mas,” tanyamu, “Gimana kalau style-nya berubah tergantung props?” Gampang. Karena kita ada di dunia JavaScript, kita bisa pakai template literals.

const Alert = ({ type, message }) => {
  // Style dasar
  const baseClass = "p-4 mb-4 text-sm rounded-lg";

  // Tentukan warna berdasarkan prop 'type'
  const colorClass = type === 'error'
    ? "bg-red-100 text-red-700"
    : "bg-green-100 text-green-700";

  return (
    <div className={`${baseClass} ${colorClass}`} role="alert">
      <span className="font-medium">Perhatian:</span> {message}
    </div>
  );
};

Tuh kan? Kita cuma mainan string. React kan emang jagonya di situ.

4. Jangan Mengulang-ulang (DRY)

Keluhan yang sering saya denger: “HTML saya jadi penuh banget sama class!” Kalau kamu ngerasa nulis deretan class yang sama berulang-ulang, solusinya bikin komponen.

Jangan buru-buru pakai @apply di file CSS kecuali kepaksa banget. React itu framework komponen. Manfaatkan dong!

// Daripada nulis class panjang di setiap tombol...
const PrimaryButton = ({ children }) => (
  <button className="bg-indigo-600 text-white px-4 py-2 rounded shadow hover:bg-indigo-700">
    {children}
  </button>
);

// Sekarang kode utamamu jadi bersih:
const App = () => (
  <div>
    <PrimaryButton>Simpan</PrimaryButton>
    <PrimaryButton>Batal</PrimaryButton>
  </div>
);

Penutup

Tailwind memaksa kita buat mikir dalam “design tokens” (spasi, warna, tipografi) bukan dalam “pixel”. Dan di React, di mana segalanya adalah komponen, pendekatan ini rasanya natural banget.

Jadi, cobain deh. Hapus file .css itu dan mulai pakai utility classes. Tombol Alt-Tab di keyboardmu bakal berterima kasih. 😉

Happy Coding! 🚀