Instalasi Dependency Frontend (Tailwind CSS)

Secara default, ketika teman-teman menginstall Laravel 12, di dalamnya sudah termasuk konfigurasi Tailwind CSS versi 4. Jadi, kita tidak perlu lagi melakukan instalasi Tailwind secara manual seperti pada versi Laravel sebelumnya.

Namun sebelum Tailwind CSS dan asset frontend lainnya bisa digunakan, ada satu langkah penting yang wajib dilakukan, yaitu menginstall seluruh dependency frontend.

Untuk itu, silakan jalankan perintah berikut di terminal. Pastikan posisi terminal berada di dalam direktori project Laravel.

npm install

Apa Fungsi Perintah npm install?

Perintah ini akan:

• Mengunduh seluruh dependency frontend yang terdaftar di package.json
• Menyiapkan Tailwind CSS, Vite, dan JavaScript tooling lainnya
• Membuat folder node_modules yang dibutuhkan saat proses build

Proses ini biasanya hanya dilakukan sekali di awal project atau ketika:

• Project baru pertama kali dibuat
• Project di-clone dari repository lain

Langkah Selanjutnya

Setelah npm install selesai tanpa error, barulah kita jalankan proses build dengan perintah:

npm run dev

Dengan demikian:

• Tailwind CSS sudah aktif
• Vite berjalan dengan baik
• Perubahan tampilan dapat langsung terlihat di browser karena didukung fitur Hot Module Replacement (HMR)

Melalui HMR, setiap perubahan pada CSS akan langsung diterapkan tanpa perlu me-refresh halaman, sehingga proses development terasa lebih cepat, efisien, dan nyaman.

Pada materi berikutnya, teman-teman akan melanjutkan ke tahap konfigurasi database serta pembuatan symbolic link untuk kebutuhan penyimpanan file aplikasi.