Snippet

Menginstal Tailwind CSS untuk Laravel 9.x dengan Vite

Diposting oleh I. B. Gd Pramana A. Putra pada 09 Aug 22, diperbarui pada 09 Aug 22

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:

Sering kali kita hanya ingin melihat cuplikan kode untuk dicopy-paste tanpa perlu membaca penjelasan bertele-tele. Jika kamu rasa kode snippet ini bermanfaat untukmu, pertimbangkanlah untuk traktirin saya kopi atau makanan ringan :)

Dukung saya dengan · paypal · buymeacoffee · ko-fi · trakteer
Kontribusi Snippet
Jawaban & Respon
    Belum ada komentar

Login dulu

Kamu harus login terlebih dahulu sebelum memberikan komentar pada pos ini.