Untuk Laravel versi 9.x, pemasangan Tailwind CSS akan dilakukan dengan Vite sebagai asset bundler. Maka itu caranya akan sedikit berbeda dari Menginstal Tailwind CSS untuk Laravel 9 dengan Webpack.
Langkah-langkah menginstal Tailwind CSS untuk Laravel 9 dengan Vite:
1. Buat Proyek Laravel
composer create-project laravel/laravel website-name
cd my-project
2. Instal Tailwind CSS ke dalam proyek beserta dependency
Pastikan kamu sudah di dalam direktori website-name
atau apapun nama direktori proyek Laravel 9.x mu.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
3. Konfigurasi alamat template
Di dalam direktori proyek terdapat file tailwind.config.js
, pada file ini tambahkan kode berikut:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
],
theme: {
extend: {},
},
plugins: [],
}
4. Tambahkan direktif Tailwind CSS
Bukalah file app.css
pada resources/css/app.css
dan tambahkan direktif Tailwind CSS berikut:
@tailwind base;
@tailwind components;
@tailwind utilities;
5. Tambahkan direktif Vite ke Laravel Blade
Bukalah file welcome.blade.php
pada resources/views/welcome.blade.php
atau file blade manapun, tambahkan direktif vite()
untuk menggunakan Tailwind CSS.
Contohnya
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@vite('resources/css/app.css')
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>
Maka aplikasi Laravel 9.x anda telah dipasangkan dengan Tailwind CSS menggunakan Vite sebagai asset bundlernya.
6. Kompail Tailwind CSS
Tahapan terakhir adalah untuk menjalankan perintah agar memberitahu Vite untuk mengkompail Tailwind CSS mu ke dalam proyek.
npm run dev
Referensi: