Halo semuanya, seperti judulnya, di artikel ini kita akan membahas bagaimana cara menggunakan Flowbite pada project Laravel kalian.

Tapi sebelum kalian mulai mengikuti tutorial di artikel ini, ada baiknya kalian mengenal flowbite terlebih dahulu, jika kalian belum tahu, kalian bisa baca artikel berikut agar lebih mengenal flowbite.

Requirements

1. Project Laravel
2. Node.js

Procedure

1. Unduh Tailwindcss dan Flowbite dependencies

npm install -D tailwindcss postcss autoprefixer flowbite

2. Inisialisasi Tailwindcss

npx tailwindcss init

Setelah menjalankan kode diatas, akan ada file baru di root project bernama tailwind.config.js. Buka file tersebut dan lanjutkan ke tahap selanjutnya.

3. Konfigurasi Tailwind dan flowbite

// tailwind.config.js

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

4. Tambah Tailwindcss ke konfigurasi Laravel Mix

// webpack.mix.js
mix.js("resources/js/app.js", "public/js")
  .postCss("resources/css/app.css", "public/css", [

    // add here
    require("tailwindcss"),

  ]);

5. Tambah Directive Tailwind ke file css

// ./resources/css/app.css

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

6. Masukan path css ke tag head template

<link href="/css/app.css" rel="stylesheet">

7. Require flowbite di akhir tag body template

<script src="../path/to/flowbite/dist/flowbite.js"></script>

Sebagai alternatif, Anda juga dapat menyertakan file JavaScript menggunakan CDN:

<script src="https://unpkg.com/[email protected]/dist/flowbite.js"></script>

Setelah tahap terakhir sudah ditambahkan, kalian bisa menjalankan perintah php artisan serve setelah itu npm run watch untuk menjalankan proses backend dan frontendnya.

Dan pada titik ini, kalian sudah bisa menambahkan kode tailwind dan menggunakan fitur-fitur yang disediakan oleh flowbite seperti ‘open and close’ component modal dan lain-lain.

Terimakaish sudah membaca artikel ini, semoga bisa bermanfaat. Terimakasih!