[Laravel 8] Error: PostCSS plugin tailwindcss requires PostCSS 8

By | 1 Juni 2022

Saat ini (1 Juni 2022) Laravel sudah mencapai versi 9 yang membawa cukup banyak pembaruan, salah satunya adalah dibagian front-end. Salah satu yang mendapatkan pembaruan adalah package Laravel Breeze yang merupakan package untuk keperluan authentikasi.

Walaupun Laravel sudah versi 9, bukan berarti semua orang ingin menggunakan versi terbaru tersebut. Salah satunya adalah saya. Salah satu alasan saya belum menggunakan Laravel 9 adalah karena server produksi belum mendukung PHP 8 (Laravel 9 membutuhkan PHP 8+) sehingga masih bertahan dengan Laravel 8.

Baru-baru ini saat akan membuat project baru dengan Laravel 8, terdapat masalah saat menginstal package Laravel Breeze, tepatnya saat menjalankan perintah npm run dev, errornya yaitu:

Laravel 8 Error PostCSS

Dari keseluruhan pesan yang muncul, dapat disimpulkan bahwa Tailwind CSS membutuhkan PostCSS 8, tetapi seperti tidak compatible dengan modul-modul yang lain. Setelah membaca dokumentasi dan mencoba berbagai macam cara, akhirnya saya menemukan satu cara yang berhasil, yaitu menghapus tailwindcss, postcss dan autoprefixer bawaan Laravel Breeze saat menginstal kemudian menginstal ketiga modul tersebut dengan versi dibawahnya. Berikut perintahnya.

Hapus / Uninstall Package Tailwincss, postcss dan autoprefixer

npm uninstall tailwindcss postcss autoprefixer

Kemudian instal lagi dengan perintah berikut:

npm install -D tailwind[email protected]:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Setelah berhasil, jalankan kembali perintah npm run dev. Lihat hasilnya apakah sudah berhasil atau belum.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *