Tailwind CSS 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

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>
  );
}