Cara Setup Blade Laravel+Tailwind

Tentang Setup Laravel dengan 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.

Setup Github Action Rsync ke VPS
Ditulis oleh Rafi pada Saturday, 26 August 2023
mrfdn author

Rafi

  • 15 year+ of Linux user.
  • 5 years+ blogger and web developer.

Jika artikel yang dibuatnya ternyata bermanfaat, support dengan cara

    Share:

Baca juga

Belajar Golang Dasar

Belajar Golang Dasar

words min read

comments powered by Disqus