Menambahkan FlowBite ke Laravel
Sebagai orang yang tidak bisa membuat desain yang cantik, dan tentu malas, menggunakan template ataupun Library component yang tidak ribet bikin sendiri adalah sebuah solusi terbaik.
Kemarin rasanya sudah bahagia akhirnya kenalan sama TailwindCss, eh malah ketemu FlowBite yang tinggal salin-tempel komponennya. Ya tentu saja, FlowBite jadi kesayangan buat dipadukan sama Laravel.
Cara install FlowBite gimana sih? Gampang banget. Yang penting mah, udah install composer sama Node.js. Lalu install FlowBite dan saudara-saudaranya pake NPM.
npm install -D tailwindcss postcss autoprefixer flowbiteBikin deh file config tailwind CSS nya. Nanti bakal dibikinin file config.tailwind.js
npx tailwindcss init -pTambahin path View dan requirement dari FlowBite di file config.tailwind.js yang udah di create tadi.
module.exports = {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
"./node_modules/flowbite/**/*.js"
],
theme: {
extend: {},
},
plugins: [
require('flowbite/plugin')
],
}Ini bakal memberi tahu kompiler dari Tailwind file apa yang harus dicari untuk menerapkan kelas dengan benar di dalam file CSS final dan juga akan menginstal opsi plugin tambahan dari Flowbite.
Tambahkan directives di dalam file ./resources/css/app.css
@tailwind base;
@tailwind components;
@tailwind utilities;Pastikan CSS dan JS yang udah ter compile dimasukkan dalam <head>, lalu mulai gunakan kelas utility Tailwind untuk mengaturnya.
@vite(['resources/css/app.css','resources/js/app.js'])Impor paket Flowbite JavaScript di dalam file ./resources/js/app.js untuk mengaktifkan komponen interaktif seperti modals, dropdown, navbars, dan lainnya.
import 'flowbite';Kalau udah gini, tinggal gasin ngatur view/blade nya. Panggil kelas dari TailwindCss atau ya tinggal salin-tempel aja dari dokumentasi FlowBite.
