Cara Setup Blade Laravel+Tailwind
Tentang Setup Laravel dengan Tailwind
mrfdn.com - Kali ini saya hanya ingin mencatat bagaimana cara bekerja menggunakan file blade laravel dengan mengintegrasikan tailwind css.
Pertama install dependencies dulu
npm install -D tailwindcss postcss autoprefixer
Sekarang install tailwind
npx tailwindcss init -p
Sekaranb buka file tailwind.config.js lalu tambahkan baris ini:
/** @type {import('tailwindcss').Config} */
export default {
content: ["./resources/**/*.blade.php"],
theme: {
extend: {},
},
plugins: [],
};
Selanjutnya edit file resources/css/app.css lalu tambahkan file ini:
@tailwind base;
@tailwind components;
@tailwind utilities;
Setelah itu buka file blade.php lalu set Tailwind pada dengan menambahkan baris ini.
@vite('resources/css/app.css')
Sehingga hasilnya seperti ini:
<!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 class="bg-red-500">
<h1 class="text-center">hello world</p>
</body>
</html>
Lalu buka 2 terminal.
Pada terminal pertama ketik npm run dev untuk menjalankan nodejs dan pada terminal kedua ketik php artisan serve untuk menjalankan projek laravel anda.
Sekarang anda bisa lanjut mengerjakan projekan Laravel dengan menggunakan Laravel sebagai CSS.
