Cara Install TailwindCSS di Laravel 8

Cara Install TailwindCSS di Laravel 8

Diperbaharui 16 Januari 2021 12:35 PM

Bagaimana cara install tailwindcss di laravel? Tutorial install tailwindcss di laravel 8? Install tailwindss di laravel secara manual? Berikut adalah cara install tailwindcss di laravel 8.

Pada laravel versi 8 ada yang namanya laravel jetstream yang sudah terdapat tailwindcss di dalamnya. Namun menurut saya terlalu banyak fitur yang mubazir dan sulit atau ribet untuk di modifikasi sesuai dengan kebutuhan, maka saya lebih suka untuk tidak menggunakan laravel jetsream.

Pada artikel ini akan dibahas bagaimana cara menginstall tailwindcss pada laravel 8 dimana terdapat dua pilihan, yang pertama install secara manual atau install laravel breeze.

Apa itu Laravel Breeze?

Laravel breeze adalah laravel yang di dalamnya sudah terinstall tailwindcss. Tampilan auth seperti login, register, forgot password, dll sudah menggunakan style dari tailwindcss. Pada saat artikel ini dibuat laravel breeze sudah menggunakan tailwindcss versi 2. Seperti yang kita ketahui bahawa selama ini laravel menggunakan bootstrap sebagai framework cssnya. Laravel Breeze adalah pilihan untuk Anda yang ingin membuat website dengan framework css menggunakan tailwindcss.

Jika Anda menginstall tailwindcss secara manual maka semua tampilan awal harus dibuat dari awal, dengan laravel breeze tampilan login, register semua auth dibuat dengan style dari tailwindcss.

Bila Anda termasuk orang yang ingin membuat sesuatu dari awal atau from scratch maka Anda bisa menginstall tailwindcss secara manual tanpa menggunakan laravel breeze. Berikut adalah tutorial lengkapnya.

Cara Install TailwindCSS Manual

Jika Anda mengikuti seri tutorial laravel pada artikel ini Anda bisa gunakan project sebelumnya yaitu laravel-8-app, jika tidak mari buat dari awal.

laravel new laravel8-tailwindcss
cd laravel8-tailwindcss
npm install
code .

Sebelum menginstall tailwindcss ada yang harus Anda ketahui yaitu saat ini tailwindcss berada pada versi 2, pada saat artikel ini dibuat laravel mix belum support postcss versi 8 maka ada perbedaan saat menginstall tailwindcss di laravel seperti pada link berikut Installation Tailwind CSS. Jika Anda lihat pada documentation tailwindcss untuk menginstallnya dengan menggunakan perintah berikut :

npm install tailwindcss

Namun karena hal tersebut sehingga perintah untuk menginstall tailwindcss di laravel 8 dilakukan dengan perintah :

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Sekarang buat config untuk tailwindcss dengan perintah berikut :

npx tailwindcss init

Jika berhasil maka tampilannya akan seperti gambar di bawah dimana postcss versi 7 yang diinstall dan membuat file dengan nama tailwind.config.js, untuk tutorial lengkapnya nanti akan dibahas.

Install TailwindCSS di Laravel 8

Buka webpack.mix.js dan tambahkan tailwindcss seperti pada kode berikut :

mix.js("resources/js/app.js", "public/js").postCss(
    "resources/css/app.css",
    "public/css",
    [require("tailwindcss")]
);

Lanjutkan dengan membuka resources/css/app.css dan masukkan tailwindcss nya :

/* ./resources/css/app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Buka resources/views/welcome.blade.php dan ganti menjadi kode berikut :

Sekarang untuk mengecek apakah style dari tailwindcss sudah terpanggil atau belum buka laravel8-tailwindcss.test pada browser maka Anda akan melihat style dari tailwindcss belum terpanggil. Kenapa demikian? Karena kita belum memasukkan tailwindcss ke dalam file app.css pada folder public. Caranya Anda cukup jalankan perintah berikut :

npm run dev

Silakan cek kembali maka hasilnya akan seperti gambar berikut :

Install Manual TailwindCSS di Laravel 8

Cara Install TailwindCSS dengan Laravel Breeze

Karena ini adalah seri tutorial laravel, untuk tutorial berikutnya akan dibahas cara membuat crud maka untuk nama project saya buat dengan nama laravel8-crud.

Mari kita buat project baru yang dibangun dengan laravel breeze, lakukan perintah berikut :

laravel new laravel8-crud
cd laravel8-crud
code .
composer require laravel/breeze --dev
php artisan breeze:install

Ketika semua proses telah selesai maka tailwindcss v2 sudah berhasil terinstal di laravel 8. Sangat mudah kan? Dan perlu Anda ketahui bahwa auth pun ikut terinstall, jika lihat pada halaman laravel8-crud.test terdapat menu login dan register.

Laravel 8 Breeze Install

Sekarang kita buat preset untuk setting style yang akan digunakan oleh tailwind.

Keterangan :

  • Buat file dengan nama tailwind-preset-one.js dan masukkan kode sesuai dengan nama yang terdapat pada kode di atas.
  • Preset ini akan berhubungan dengan pembuatan crud laravel 8 pada artikel berikutnya.

Jalankan perintah npm run dev untuk menggunakan preset yang telah dibuat.

Itulah artikel tentang cara install tailwindcss v2 di laravel 8 yang dapat saya sampaikan, semoga bermanfaat.

Baca Juga :
Framework CSS Terbaik TailwindCSS
Cara Install Laravel 8 di Linux Ubuntu

susantokun avatar
susantokun
Lahir di Bumi ini atas perjuangan Ayah dan Ibu yang senantiasa membuat dan mengeluarkan sehingga lahirlah Susanto pada tanggal 27 Maret 1996 di Cianjur - Jawa Barat.
Kebijakan Berkomentar :
1. Dilarang berkomentar yang mengandung SPAM, SARA, HOAX, PORNO.2. Mohon sertakan informasi detail saat terjadi error (pesan error, sreenshoot, code, logs, dsb.).