Install Laravel, Tailwind dan Flowbite

Pada postingan ini akan dijelaskan bagaimana Menginstall Laravel, Tailwind dan Flowbite. Jika kalian lebih suka melakukan installasi dengan melihat video, videonya tersedia di paling bawah postingan ini.

Tailwind CSS merupakan framework CSS yang memiliki sekumpulan utility-first yang dapat disusun untuk membuat antarmuka custom apapun. Tailwind CSS berbeda dengan framework CSS seperti Bootstrap karena Tailwind CSS bukan sebuah UI Framework. Tailwind CSS sendiri memiliki component UI yang dapat kita gunakan tanpa harus membuatnya dari awal. Flowbite merupakan Component UI berdasarkan utility-first Tailwind CSS.

Flowbite menyediakan component yang umum digunakan seperti navbar, footer, button, form dan sebagainya. Flowbite memudahkan kita agar dapat bekerja lebih cepat tanpa harus membuat navbar, button atau form dari awal. Flowbite memiliki versi berbayar dan versi gratis, dengan versi gratis yang disediakan menurut saya sudah cukup membantu.

Penting !!

Pastikan kalian sudah menginstall Composer dan Node JS pada komputer atau laptop kalian.

Langkah menginstall Tailwind dan Flowbite pada Laravel

Buat folder dengan nama laravel_tailwind lalu buka folder tersebut di VSCODE atau Code Editor kesukaan kalian.
Buat proyek laravel baru pada folder tersebut
```
composer create-project laravel/laravel .
```

Install Tailwind dan Flowbite menggunakan NPM

npm install -D tailwindcss postcss autoprefixer flowbite

Membuat File Config Tailwind CSS
```
npx tailwindcss init -p
```
Maka pada root folder proyek akan muncul satu file baru bernama tailwind.config.js

Buka file tailwind.config.js lalu tambahkan kode berikut lalu save

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

Buka file ./resources/css/app.css lalu tambahkan kode berikut lalu save
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```
Buka file ./resources/js/app.js lalu tambahkan kode berikut lalu save
```
import 'flowbite';
```
Tambahkan kode dibawah ini pada <head> main layout, biasanya pada proyek yang sebernarnya kode ini disimpan pada <head> yang berada di file app.blade.php, tapi pada contoh ini saya menyimpannya di welcome.blade.php
```
<html>
<head>
  @vite(['resources/css/app.css','resources/js/app.js'])
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>
```
Jalankan local development server laravel dengan mengetikan perintah berikut
```
php artisan serve
```
Jalankan vite dengan mengetikan perintah berikut
```
npm run dev
```

Sekarang tambahkan component flowbite pada file welcome.blade.php dan lihat hasilnya pada browser, berikut ini saya menambahkan navbar dan table component yang tersedia di website flowbite

Demikian cara Menginstall Laravel, Tailwind dan Flowbite, semoga postingan ini bermanfaat.

Install Laravel, Tailwind dan Flowbite

Posting Komentar

Install Laravel, Tailwind dan Flowbite

Formulir Kontak