Install dan Build Tailwind CSS di Laravel
Pada tutorial ini kami menggunakan Tailwind CSS versi 3.4.1 pada awalnya saya install tailwind dengan :
- Node Versi 14.15.4
- NPM versi 6.14.10
Pada proses instalasi berjalan dengan baik. Namun saat hendak menjalankan npm run dev terjadi error, penyebabnya karena pada tailwind menggunakan package Vite 5.0.0 dimana package ini tidak support Node & NPM diatas. Oleh karenanya saya memutuskan untuk install Node versi terbaru saat itu. yaitu
- Node Versi 20.11.1
- NPM versi 10.2.4
Kemudian saya jalankan perintah npm run dev dan berjalan dengan baik. Dari kasus diatas jika hendak menggunakan versi tailwind terbaru, pastikan versi Node dan NPM sesuai dengan requirement tailwind.
INSTALL
Buka terimanal dan masuk ke direktori laravel. dan jalankan perintah dibawah ini :
npm install -D tailwindcss postcss autoprefixerLalu lakukuna init config, dengan perintah dibawah ini
npx tailwindcss init -pPerintah diatas akan menghasilkna dua file konfigurasi : tailwind.config.js dan postcss.config.js
Selanjutnya buka file tailwind.config.js dan tambahkan path untuk seluruh template file. Seperti dibawah ini
export default {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
],
theme: {
extend: {},
},
plugins: [],Buka file ./resources/css/app.css dan tambahkan kode dibawah ini
@tailwind base;
@tailwind components;
@tailwind utilities;Untuk menjalankan tailwind untuk keperluan development. jalankan perintah dibawah ini:
npm run devUntuk mencoba tailwind silahkan buka file welcome.blade.php dan tambahkan syntax dibawah ini sesuai tag-nya
<!DOCTYPE html>
<head>
@vite('resources/css/app.css')
</head>
<body>
<h1 class="text-5xl font-thin italic">
Selamat Datang
</h1>
</body>
</html>Langkah terakhir lakukan save. Saat kita melakukan perubahan pada file blade maka secara otomatis berubah tanpa harus melakukan refresh halaman.
Build
Jika hendak melakukan upload project web ke hosting pastikan lakukan build tailwind. Dengan menjalankan perintah dibawah ini
npm run buildPerintah di atas akan menghasilkan file di folder public/build.
Dan selanjutnya setiap ada perubahan pada file blade maka sebelum upload ke hosting pastikan build tailwind terlebih dahulu dan hapus file dengan nama "hot" yang ada di folder public (jika ada). karena adanya file 'hot' ini menyebabkan laravel menganggap sedang diajalankan di mode development bukan production
Terima Kasih dan Terima Kasih....