Pernah nggak kamu bikin komponen React yang secara logika udah sempurna — datanya ngalir, state-nya tertata — tapi pas dibuka di browser... tampilannya kayak website tahun 2003? 😅 Nah, itulah kenapa styling React dengan Tailwind CSS dan CSS Modules adalah skill yang nggak bisa kamu skip kalau mau jadi developer profesional. Di artikel ke-14 dari Seri Belajar React: React From Zero to Zorro ini, kita bakal bedah dua pendekatan styling paling populer dan relevan di ekosistem React modern — dan kamu bakal tahu kapan pakai yang mana.
Tailwind CSS adalah framework CSS berbasis utility-first — kamu styling langsung di className pakai class kecil-kecil seperti flex, p-4, text-blue-500. Sedangkan CSS Modules adalah pendekatan di mana setiap file .module.css punya scope tersendiri — class-nya otomatis di-hash agar nggak bentrok dengan komponen lain. Keduanya bisa dipakai bersamaan di React!
🎨 Tailwind CSS di React: Styling Secepat Ngobrol
Bayangin kamu lagi dekorasi kamar kos. Daripada pergi ke toko cat, beli kuas, campur warna sendiri — kamu punya laci penuh stiker siap pakai: "dinding-biru", "lampu-kuning", "karpet-bulat". Itu analogi Tailwind CSS: styling React jadi super cepat karena kamu tinggal comot utility class yang sudah tersedia, langsung di JSX.
Kalau kamu pakai Vite + React, cara termudah install Tailwind adalah lewat CLI resmi mereka. Pastikan Node.js kamu sudah versi 18+ ya!
Langkah Install Tailwind CSS v4 di React (Vite)
Buat project Vite + React
# buat project baru
npm create vite@latest my-app -- --template react
cd my-app
npm install
Install Tailwind CSS
npm install tailwindcss @tailwindcss/vite
Tambahkan plugin ke vite.config.js
import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' import tailwindcss from '@tailwindcss/vite' export default defineConfig({ plugins: [react(), tailwindcss()], })
Import Tailwind di src/index.css
/* src/index.css */ @import "tailwindcss";
Setelah setup, langsung bisa dipakai di komponen React kamu seperti ini:
function Card({ title, desc }) { return ( <div className="bg-white rounded-2xl shadow-lg p-6 hover:shadow-xl transition-shadow duration-300 border border-gray-100"> <h3 className="text-xl font-bold text-gray-800 mb-2"> {title} </h3> <p className="text-gray-500 text-sm leading-relaxed"> {desc} </p> </div> ); }
Tailwind CSS adalah framework CSS terpopuler di 2024–2025 berdasarkan State of CSS Survey, dengan lebih dari 80% developer yang sudah mencobanya menyatakan puas dan akan terus pakai. Bahkan Netflix, GitHub, dan Shopify sudah menggunakannya di produksi!
🗂️ CSS Modules: Style Rapi Tanpa Khawatir Bentrok
Bayangkan kamu tinggal di apartemen. Setiap unit punya nomor pintu sendiri — unit 302 bisa punya sofa merah, unit 401 juga bisa punya sofa merah, tanpa saling ganggu. Itulah CSS Modules: setiap komponen punya "namespace" CSS-nya sendiri, jadi class .button di Card.module.css nggak akan bentrok dengan .button di Modal.module.css.
Cara Pakai CSS Modules di React
Buat file CSS dengan nama NamaKomponen.module.css
/* Card.module.css */ .card { background: #ffffff; border-radius: 16px; padding: 24px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); transition: transform 0.2s ease; } .card:hover { transform: translateY(-4px); } .title { font-size: 1.25rem; font-weight: 700; color: #1e293b; }
Import dan gunakan di komponen React
import styles from './Card.module.css' function Card({ title, desc }) { return ( <div className={styles.card}> <h3 className={styles.title}>{title}</h3> <p>{desc}</p> </div> ); } // Di browser: class-nya jadi "Card_card__xK3mP"
CSS Modules sudah didukung secara native oleh Vite, Create React App, dan Next.js — kamu nggak perlu instalasi tambahan! Cukup beri nama file dengan akhiran .module.css dan React toolchain-nya yang ngurus sisanya.
⚖️ Tailwind CSS vs CSS Modules: Kapan Pakai Yang Mana?
Pertanyaan klasik setiap developer React: "Harusnya aku pakai Tailwind atau CSS Modules?" Jawabannya: tergantung konteks — dan keduanya bisa dikombinasikan! Ini tabel perbandingan jujurnya:
| Aspek | ⚡ Tailwind CSS | 🗂️ CSS Modules |
|---|---|---|
| Kecepatan styling | ⚡ Sangat cepat | 🐢 Lebih lambat |
| Kebersihan JSX | 😅 className panjang | ✅ Bersih & ringkas |
| CSS Scoping | 🌐 Global | 🔒 Auto-scoped |
| Custom design system | ⚙️ Config di tailwind.config | ✏️ Bebas di CSS |
| Kondisi dinamis | 📦 Perlu clsx/cn() |
🎛️ Mudah dikelola |
| Popularitas (2025) | 🏆 #1 di industri | 🥈 Sangat populer |
Kombinasi Tailwind + CSS Modules yang dipakai di project skala besar: gunakan Tailwind untuk layout cepat dan komponen generik, lalu CSS Modules untuk komponen yang butuh animasi kompleks atau state-based style yang rumit.
// Combo: Tailwind + CSS Modules bersama import styles from './Button.module.css' function Button({ variant = 'primary', children }) { return ( <button className={`flex items-center gap-2 px-6 py-3 rounded-full font-semibold transition-all ${styles[variant]}`} > {children} </button> ); }
🏆 Best Practices Styling React yang Harus Kamu Tahu
Belajar Tailwind CSS dan CSS Modules bukan cuma soal sintaks — tapi soal kebiasaan coding yang benar. Ini beberapa best practice yang akan membedakan kamu dari developer pemula:
Jangan pernah membuat class Tailwind secara dinamis dengan string concatenation seperti "bg-" + color. Tailwind meng-scan file secara statis — class yang dibangun secara dinamis tidak akan ter-generate di build production! Gunakan clsx atau object mapping untuk kondisional.
Gunakan clsx atau cn() untuk class kondisional Tailwind
Library clsx membantu kamu menggabungkan class secara aman dan readable, terutama untuk logic kondisional berbasis props atau state.
Beri nama class CSS Modules secara deskriptif dan konsisten
Pakai konvensi camelCase: styles.cardTitle bukan styles['card-title']. Lebih bersih dan type-safe kalau pakai TypeScript.
Extract komponen kalau className Tailwind terlalu panjang
Kalau className sudah lebih dari 5–6 utility, pertimbangkan untuk membuat komponen baru atau pakai @apply di CSS (meski ini kontroversial di komunitas Tailwind).
Manfaatkan Tailwind untuk responsive design
Tailwind punya breakpoint prefix seperti sm:, md:, lg: yang sangat intuitif. Contoh: grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 membuat responsive grid dalam satu baris!
import clsx from 'clsx' function Badge({ type, label }) { return ( <span className={clsx( 'px-3 py-1 rounded-full text-sm font-semibold', { 'bg-green-100 text-green-700': type === 'success', 'bg-red-100 text-red-700': type === 'error', 'bg-blue-100 text-blue-700': type === 'info', } )}> {label} </span> ); }
🏷️ Tags Artikel
Seri Lengkap
React From Zero to Zorro
Artikel ini adalah bagian dari seri 16 artikel belajar React dari nol sampai mahir. Klik tombol di bawah untuk melihat daftar isi lengkap!
🗺️ Lihat Daftar Isi Seri
No comments:
Post a Comment