Theme Name : Tailwindcss
Created : 15/11/2020
Author : Destroylord
Terima kasih telah memberikan kesempatan untuk membagi pengalaman saya tentang konfigurasi larvel-mix + tailwindcss.
- Untuk installasi laravel mix bisa ikuti dokumentasi website resminya di sini.
- Setelah installasi selesai kita tahap installasi tailwindcss
-
Buka terminal anda, pastikan posisi terminal berada di folder project yang baru anda install.
-
Copy script dibawah ini dan paste di terminal anda.
npm install tailwindcss@latest postcss@latest autoprefixer@latest
-
Lanjut ketahap berikutnya, kemudian install purgeCSS untuk laravel-mix
npm install laravel-mix-purgecss --save-dev
-
Edit file webpack.mix.js, seperti dibawah ini :
const tailwindcss = require('tailwindcss'); require('laravel-mix-purgecss'); mix.js('src/js/app.js', 'public/js') .sass('src/sass/app.scss', 'public/css') .sass('src/sass/style.scss', 'public/css') .options({ processCssUrls: false, postCss: [ tailwindcss('./tailwind.config.js') ] }) .purgeCss() .setPublicPath('public');
-
Langkah selanjutnya buat konfigurasi Tailwindcss dengan perintah :
npx tailwind init
-
Kemuduian taruh script ini di src/scss/style.scss :
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
-
Terakhir jalankan perintah ini diterminal anda :
npx mix
/npx mix watch
Working ke semua browser :
IE 6-8
IE 9+
Chrome
Firefox
Safari
Opera
Jika anda memiliki pertanyaan lain yang tidak mencangkup dalam dokumentasi, Silahkan kirim email ke [email protected].