Menginstal Flowbite di Laravel

Jumat, 7 Juli 2023

Hai ! kali ini saya ingin berbagi tentang sebuah block / component Tailwindcss yang bernama Flowbite yang digunakan juga pada website Kawan Koding ini.

Dengan menggunakan Flowbite ini tentu saja akan mempercepat pekerjaan kita dalam membangun antarmuka dari website yang akan kita bangun.

Banyak sekali dukungan integrasi yang disediakan oleh Flowbite, mulai dari React, Next.js, Vue, Nuxt, Svelte, Angular, Gatsby, SolidJS, Laravel, Symfony, Rails, Django, Phoenix, Flask.

Kali ini kita akan integrasikan Flowbite ke dalam proyek Laravel.

Menginstal Flowbite di Laravel

Pertama, tentu kita butuh sebuah proyek Laravel untuk kita coba coba:

composer create-project laravel/laravel laravel-flowbite --prefer-dist

atau dengan Laravel Installer:

laravel new laravel-flowbite

Setelah selesai menginstal Laravel, masuk ke dalam foldernya:

cd laravel-flowbite

Lanjutkan dengan menginstal Tailwind CSS & Flowbite dengan NPM:

npm install -D tailwindcss postcss autoprefixer flowbite

Buat sebuah file konfigurasi Tailwind CSS:

npx tailwindcss init -p

Buat sebuah file tailwind.config.js di folder utama proyek, dan tambahkan path untuk views, dan tambahkan Flowbite sebagai kebutuhan di dalam tailwind.config.js:

module.exports = {
    content: [
      "./resources/**/*.blade.php",
      "./resources/**/*.js",
      "./resources/**/*.vue",
      "./node_modules/flowbite/**/*.js"
    ],
    theme: {
      extend: {},
    },
    plugins: [
        require('flowbite/plugin')
    ],
  }

Tambahkan directive ke dalam file ./resources/css/app.css

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

Pastikan hasil compile CSS dan JS sudah dimasukkan di dalam tag <head> , kemudian mulai gunakan class utility Tailwind untuk memberikan gaya pada konten kalian:

@vite(['resources/css/app.css','resources/js/app.js'])

Import Javascript Flowbite ke dalam ./resources/js/app.js untuk mengaktifkan komponen interaktif seperti modal, dropdown, navar dan lainnya.

import 'flowbite';

Sudah selesai, kalian sudah bisa menggunakan komponen komponen Flowbite untuk mempercantik tampilan web kalian.

Jangan lupa jalankan npm run dev untuk development atau npm run build untuk production, dan tentunya php artisan serve untuk menjalankan server lokal kalo kalian nggak pakai Laravel Valet.