Setup Tailwind CSS

Setup Tailwind CSS

Tailwind CSS adalah utility-first CSS framework yang memberikan kelas-kelas CSS siap pakai yang bisa langsung diaplikasikan ke elemen HTML. Pendekatan ini berbeda dari framework seperti Bootstrap yang menggunakan komponen pre-built.

Instalasi via npm

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

Konfigurasi Content Paths

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

Import di CSS Utama

/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Contoh Penggunaan Pertama

<div class="flex items-center justify-between p-4 bg-white rounded-xl shadow-md">
  <h1 class="text-2xl font-bold text-gray-800">Hello Tailwind!</h1>
  <button class="px-4 py-2 bg-violet-600 text-white rounded-lg hover:bg-violet-700">
    Klik
  </button>
</div>

Tailwind tidak menghasilkan CSS yang tidak dipakai. Hanya class yang benar-benar digunakan di file yang sudah dikonfigurasi di content yang akan dimasukkan ke hasil build.