Pada pembahasan kali ini akan dijelaskan step by step cara installasi Tailwindcss 4 + Vite pada Laravel
Pertama, installasi poyek Laravel menggunakan perintah
```
composer create-project laravel/laravel my-project
cd my-project
```
Kedua, Install tailwindcss 4 dan dependensi vite menggunakan perintah
```
npm install tailwindcss @tailwindcss/vite
```
Ketiga, konfigurasi vite.config.js dan ubah menjadi
```
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import tailwindcss from '@tailwindcss/vite'; // [1] Import Tailwind
export default defineConfig({
plugins: [
tailwindcss(), // [2] Tambahkan di sini
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
],
});
```
Keempat, Import tailwindcss ke resources/css/app.css dan ubah menjadi
```
@import "tailwindcss";
```
Kemudian kamu bisa membuat master Layout seperti
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@yield('title', 'My Laravel App')</title>
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="bg-slate-50 text-slate-900 font-sans">
<nav class="bg-white border-b border-slate-200 p-4 mb-6 shadow-sm">
<div class="container mx-auto flex justify-between items-center">
<span class="font-bold text-xl tracking-tight text-indigo-600">ERP System</span>
<div class="space-x-4">
<a href="/" class="text-slate-600 hover:text-indigo-600">Dashboard</a>
<a href="#" class="text-slate-600 hover:text-indigo-600">Settings</a>
</div>
</div>
</nav>
<main class="container mx-auto px-4">
@yield('content')
</main>
<footer class="mt-10 py-6 border-t border-slate-200 text-center text-slate-500 text-sm">
© {{ date('Y') }} Project Laravel Tailwind 4
</footer>
</body>
</html>
```
Dengan view yang dipanggil (welcome.blade.php) menjadi
```
@extends('master')
@section('title', 'Dashboard - Laravel Tailwind 4')
@section('content')
<div class="bg-white p-8 rounded-2xl shadow-sm border border-slate-200">
<h1 class="text-3xl font-extrabold text-slate-800 mb-4">
Selamat Datang, Riski!
</h1>
<p class="text-slate-600 leading-relaxed mb-6">
Ini adalah tampilan dashboard yang sudah menggunakan <span class="font-mono bg-slate-100 px-1 rounded text-indigo-600">Tailwind CSS v4</span> melalui Vite. Struktur layout sudah terpisah dengan file master.
</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="p-4 bg-indigo-50 border border-indigo-100 rounded-xl">
<h3 class="font-bold text-indigo-700">Project Info</h3>
<p class="text-sm text-indigo-600">Laravel 11 + Vite + Tailwind 4</p>
</div>
</div>
</div>
@endsection
```
