🎨 Integrasi Tailwind CSS dengan Vue.js

Tailwind CSS adalah framework CSS utility-first yang sangat populer. Tailwind memungkinkan kamu membangun UI dengan cepat langsung di dalam template Vue tanpa perlu menulis file CSS panjang.

---

🚀 1. Instalasi Tailwind CSS

Berlaku untuk proyek Vue 3 atau Vue 2 yang dibuat dengan Vue CLI atau Vite.

a. Untuk Vue + Vite

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

b. Untuk Vue + Vue CLI

vue add tailwind

Jika vue add tailwind tidak tersedia, gunakan manual seperti Vite.

---

🧱 2. Struktur Folder

Setelah instalasi, struktur akan terlihat seperti:

src/
├── assets/
│   └── tailwind.css
├── App.vue
├── main.js
tailwind.config.js
postcss.config.js

---

🎛️ 3. Konfigurasi Tailwind

a. File: tailwind.config.js

module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

b. File: src/assets/tailwind.css

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

c. Import ke main.js:

import './assets/tailwind.css';

---

🧪 4. Contoh Penggunaan

<template>
  <div class="text-center mt-10">
    <h1 class="text-3xl font-bold text-blue-600">Halo dari Vue + Tailwind</h1>
    <p class="text-gray-500 mt-2">Ini halaman pertama dengan styling modern.</p>
    <button class="mt-4 px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600">
      Klik Saya
    </button>
  </div>
</template>

---

📦 5. Plugin Tailwind Populer

• @tailwindcss/forms: Untuk styling form yang konsisten

• @tailwindcss/typography: Untuk artikel dan konten rich text

• @tailwindcss/aspect-ratio: Untuk responsive video/image

• daisyUI: Komponen UI siap pakai

Instalasi plugin:

npm install @tailwindcss/forms

Lalu tambahkan di tailwind.config.js:

plugins: [require('@tailwindcss/forms')]

---

🌐 6. Deployment & Purge CSS

Tailwind otomatis menghapus class yang tidak digunakan saat build.

Pastikan konfigurasi content di tailwind.config.js sesuai:

content: ['./index.html', './src/**/*.{vue,js,ts}']

📌 Kesimpulan

• Integrasi Tailwind dengan Vue sangat mudah dan powerful

• Styling langsung di template mempercepat proses UI

• Kombinasikan dengan component-based design untuk hasil maksimal

• Optimasi produksi dilakukan otomatis saat build