Cara Install Tailwind CSS di Laravel di XAMPP (Windows)

Jika kamu adalah pengguna Laravel yang menjalankan proyek secara lokal menggunakan XAMPP di Windows, dan ingin mengintegrasikan Tailwind CSS dengan Vue dan Vite, kamu berada di artikel yang tepat.

Tailwind CSS menawarkan cara cepat dan efisien untuk membangun antarmuka modern, namun setup-nya bisa jadi membingungkan — apalagi jika kamu baru pertama kali menggunakan Vite sebagai build tool, atau menjumpai masalah saat eksekusi perintah seperti npx tailwindcss init.

Artikel ini akan memandu kamu langkah demi langkah mulai dari instalasi hingga integrasi lengkap Tailwind CSS ke dalam Laravel + Vue + Vite.

Persiapan Awal

Sebelum mulai, pastikan kamu sudah:

Menginstall XAMPP dan mengaktifkan Apache serta MySQL
Menggunakan Laravel versi 9 atau lebih baru (sudah default menggunakan Vite)
Menginstall Node.js dan npm terbaru

Langkah 1: Buat Proyek Laravel

Buka terminal dan buat proyek baru atau gunakan proyek Laravel yang sudah ada.

laravel new laravel-tailwind
cd laravel-tailwind

Jika kamu pakai Composer:

composer create-project laravel/laravel laravel-tailwind
cd laravel-tailwind

Langkah 2: Install Vite dan Vue

Laravel sudah menggunakan Vite secara default, namun Vue perlu diinstal secara manual.

npm install
npm install vue

Langkah 3: Install Tailwind CSS

Gunakan perintah berikut untuk menginstal Tailwind CSS versi 3, karena versi ini masih mendukung perintah npx tailwindcss init yang akan kita gunakan nanti:

npm install -D tailwindcss@^3 postcss autoprefixer

Lalu jalankan:

npx tailwindcss init -p

Perintah ini akan membuat dua file konfigurasi:

tailwind.config.js
postcss.config.js

Langkah 4: Konfigurasi Tailwind

Edit file tailwind.config.js:

Tambahkan jalur file Blade, Vue, dan JavaScript agar Tailwind bisa mendeteksi semua class CSS yang digunakan.

module.exports = {
content: [
'./resources/**/*.blade.php',
'./resources/**/*.js',
'./resources/**/*.vue',
],
theme: {
extend: {},
},
plugins: [],
}

Langkah 5: Tambahkan Tailwind ke CSS

Buka file resources/css/app.css dan isi dengan:

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

Langkah 6: Aktifkan Vue di Laravel

Edit resources/js/app.js:

import { createApp } from 'vue'
import App from './components/App.vue'

createApp(App).mount('#app')

Pastikan kamu punya komponen App.vue di resources/js/components/App.vue dengan isi seperti ini:

<template>
<div class="text-center text-2xl text-blue-600 font-bold mt-10">
Hello from Vue + Tailwind!
</div>
</template>

<script>
export default {
name: 'App',
}
</script>

Tambahkan elemen dengan id="app" ke dalam file Blade kamu, misalnya resources/views/welcome.blade.php:

<div id="app"></div>

Langkah 7: Konfigurasi Vite untuk Vue

Install plugin Vite untuk Vue:

npm install @vitejs/plugin-vue

Lalu edit vite.config.js seperti ini:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
vue(),
],
});

Langkah 8: Jalankan Proyek

Kompilasi dengan perintah:

npm run dev

Jalankan Laravel:

php artisan serve

Akses proyek kamu melalui browser di http://localhost:8000

Jika semua langkah sudah benar, kamu akan melihat tulisan dari Vue yang sudah menggunakan class Tailwind, misalnya:

<div class="text-center text-2xl text-blue-600 font-bold mt-10">
Hello from Vue + Tailwind!
</div>

Ini berarti integrasi Laravel + Vue + Vite + Tailwind CSS telah berhasil di lingkungan XAMPP Windows kamu.