Tutorial Laravel 12 Livewire dan Tailwind CSS #2 Install Laravel 12 Livewire

Pelajari cara membangun aplikasi web modern dengan Laravel 12, Livewire, dan Tailwind CSS. Tutorial ini membahas langkah demi langkah mulai dari instalasi hingga implementasi fitur interaktif tanpa JavaScript. Cocok untuk pemula maupun developer yang ingin meningkatkan skill dalam membangun UI dinamis dan reaktif dengan Livewire serta styling cepat menggunakan Tailwind CSS.

✅ Telah dilihat 968 kali

Rating: 5.00 ⭐

... 18 July 2025, 15:31

Install Laravel 12 Livewire, dan Tailwind CSS

Pertama, kita perlu pasang Laravel installer secara global di komputer kita. Caranya gampang banget, cukup jalankan perintah ini di terminal atau CMD:

composer global require laravel/installer

Untuk mendapatkan experience yang sama pada tutorial ini, pastikan teman-teman menggunakan laravel installer versi Laravel Installer 5.16.0 untuk mengeceknya bisa dnegan menjalankan command line: laravel --version didalam CMD.


Buat Project Baru Laravel 12

Sekarang kita buat project Laravel 12 baru dengan perintah:

laravel new laravel12-livewire

Perintah ini bakal:

  • Bikin folder laravel12-livewire
  • Download Laravel 12 terbaru
  • Nyiapin semua file & struktur project Laravel
  • Lalu muncul beberapa pertanyaan interaktif (baru nih di Laravel installer yang sekarang)

Pilih Stack

Silakan teman-teman isi seperti pada gambar diatas, yakni dimulai dari starter kit yang akan digunakan adalah livewire, kemudian untuk otentikasinya kita memilih laravel (breeze) dan untuk laravel volt nya kita pilih no. Tunggu proses installasinya selesai dan nanti akan ada sebuah pertanyaan lagi untuk menjalankan npm install & npm run build ketik saja yes.


Konfigurasi Database

Silakan teman-teman buat database baru didalam phpmyadmin, terserah dengan nama apa. lalu pada file .env kita ubah menjadi seperti berikut

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=nama_database
DB_USERNAME=root
DB_PASSWORD=

Migration

Jika sudah, silakan lanjut dengan jalankan php artisan migrate, tentunya berada didalam direktori project yang baru saja dibuat dengan cara:

php artisan migrate

Run


Laravel menyediakan perintah singkat yang akan menjalankan dua proses sekaligus dalam satu terminal:

composer run dev

Perintah ini otomatis menjalankan:

  • php artisan serve
  • vite (alias dari npm run dev)

Kapan Digunakan

  • Sangat berguna saat development
  • Tidak perlu membuka 2 terminal
  • Lebih clean & efisien saat kamu ingin langsung coding dan preview

Starter kit ini menyederhanakan pembuatan aplikasi Laravel modern tanpa perlu React/Vue, karena sudah menggabungkan Livewire + Tailwind + Flux UI dalam satu paket siap pakai.

🔥 Flash Sale


📜 Table Of Contents


📌 Daftar Episode


Daftar eBook