Cara Setup Blade Laravel+Tailwind

JagoTekno.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.

← Menampilkan Daftar Artikel Wordpress dengan Svelte Kit Melalui Wordpress Rest Api

→ Setup Github Action Rsync ke VPS

web laravel install