Menginstal Flowbite di Laravel

Menginstal Flowbite di Laravel

Tailwind CSS Laravel

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.

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.

Muhammad Amirul Ihsan
Muhammad Amirul Ihsan Fullstack Developer, Content Creator, suka berbagi pengalaman / pengetahuan lewat tulisan maupun video di kawankoding.com

Artikel Lainnya

Menginstal DaisyUI di  Laravel

Menginstal DaisyUI di Laravel

Banyak sekali web developer yang sudah sangat familiar dengan Bootstrap merasa kesal ketika mencob...

Mempersiapkan Proyek Aplikasi Daftar Kontak

Mempersiapkan Proyek Aplikasi Daftar Kontak

Pada serial tulisan ini kita akan membuat sebuah aplikasi untuk membuat daftar kontak teman mengguna...

MongoDB Mendukung Integrasi Laravel Secara Official

MongoDB Mendukung Integrasi Laravel Secara Official

Kabar baik nih buat kalian yang biasa pakai MongoDB di proyek Laravel kalian. Sekarang MongoDB secar...