TailwindCSS lagi happening saat ini. Apabila kita ingin mengintegrasikan CSS framework ini ke dalam aplikasi Laravel, caranya cukup mudah kok.
Pertama kali, install Laravel:
|
1 |
composer create-project --prefer-dist laravel/laravel tailwindcss |
Setelah berhasil terinstall, masuk ke working directory:
|
1 |
cd tailwindcss |
Lakukan installasi aplikasi bawaan laravel :
|
1 |
npm install |
Install tailwindcss :
|
1 |
npm i tailwindcss |
Inisialisasi tailwind css dengan perintah berikut, nanti akan muncul file baru yaitu tailwind.config.js
|
1 |
npx tailwindcss init |
Selanjutnya jalankan :
|
1 |
npm run dev |
Buat file baru, yaitu main.css dan letakkan di dalam folder resources/css:
resources/css/main.css
|
1 2 3 4 5 |
@tailwind base; @tailwind components; @tailwind utilities; |
Kemudian modifikasi welcome.blade.php untuk melihat apakah kita sudah berhasil mengintegrasikan tailwindcss dengan laravel. Hapus semua yang berada di dalam tag <style>, kemudian tambahkan link /css/main.css dan tambahkan bg-green-400 seperti ini :
resources/views/welcome.blade.php
|
1 2 3 4 5 6 |
<link rel="stylesheet" href="/css/main.css"> ... <div class="title m-b-md bg-green-400"> Laravel </div> ... |
Langkah selanjutnya adalah melakukan modifikasi pada webpack.mix.js, tambahkan kode berikut :
webpack.mix.js
|
1 2 3 4 |
mix.js('resources/js/app.js', 'public/js') .postCss('resources/css/main.css', 'public/css', [ require('tailwindcss'), ]); |
Jalankan perintah npm run dev.
|
1 |
npm run dev |
Jalankan server laravel, kemudian buka browser. Apabila sudah muncul tampilan warna hijau seperti pada gambar, berarti kita sudah berhasil melakukan integrasi tailwind CSS dengan laravel. Silahkan untuk melanjutkan kreasi dengan tailwind!
|
1 |
php artisan serve |
