Tailwind dengan React

Menggunakan Tailwind CSS di React

Tailwind CSS adalah utility-first CSS framework yang sangat populer digunakan bersama React. Dengan Tailwind, kita menulis styling langsung di class HTML menggunakan class-class utility yang sudah tersedia.

Instalasi di Project React (Vite)

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Tambahkan paths di tailwind.config.js:

export default {
  content: ["./index.html", "./src/**/*.{js,jsx,ts,tsx}"],
  theme: { extend: {} },
  plugins: [],
}

Import di src/index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Contoh Penggunaan

function Card({ title, description }) {
  return (
    <div className="bg-white rounded-xl shadow-md p-6 hover:shadow-lg transition">
      <h2 className="text-xl font-bold text-gray-800 mb-2">{title}</h2>
      <p className="text-gray-500 text-sm leading-relaxed">{description}</p>
    </div>
  );
}

Tips Penggunaan

• Install extension Tailwind CSS IntelliSense di VS Code untuk autocomplete
• Gunakan @apply di CSS untuk mengekstrak class yang berulang
• Tailwind bekerja sangat baik dengan conditional styling menggunakan library clsx atau classnames