Cara Setup Laravel Mix Tailwindcss dan VueJS

undefined

Sekarang ini pengembangan aplikasi web dengan menggunakan framework laravel semakin mudah dengan hadirnya framework pendukung untuk keperluan user interface atau tampilan web.

Saya sendiri ketika membuat aplikasi web dengan laravel, framework yang sudah pasti saya gunakan adalah Tailwindcss dan VueJS. Berikut ini adalah tips dari saya buat kamu yang mungkin juga ingin menggunakan Tailwindcss dengan VueJS.

Pengenalan Tailwindcss

Sedikit informasi buat kamu yang belum tau apa itu Tailwindcss. Tailwindcss ini bukan ui framwork seperti boostrap ya. Tailwindcss adalah kumpulan utility css untuk mempermudah kita membuat sebuah user interface ( tampilan web ).

undefined

Diatas itu adalah sebuah contoh user interface yang dibuat dengan menggunakan tailwindcss. Bisa kita lihat disana banyak sekali menggunakan utility class.

Keuntungan dengan utility class ini adalah kita bisa dengan mudah untuk membuat sebuah user interface dengan standar style css yang sudah cukup proposional dalam sebuah desain.

Seperti contoh nya text-xs artinya adalah untuk ukuran text extra small atau bg-white artinya adalah background dengan warna putih.

Pengalaman saya sendiri menggunakan tailwindcss ini mengurangi saya untuk menulis custom css ketika ingin membuat sebuah user interface yang baru.

Pengenalan VueJS

Untuk jaman sekarang ini hampir tidak mungkin sebuah apikasi web interaktif yang tidak menggunakan javascript.

Banyak sekali operasi - operasi yang bisa kita lakukan jika kita menggunakan javascript untuk urusan tampilan dengan menggunakan javascipt.

Ada banyak sekali framework javsacript yang digunakan untuk mengelola tampilan dari sebuah aplikasi web. Diantara nya ada ReactJS, Angular dan masih banyak yang lainya.

VueJS adalah sebuah framework javascript untuk mengelola user interface ( tampilan ) dari aplikasi web. Jika di javascript kita lihat unggul dengan data binding nya, kemudian di reactjs itu dengan JSX nya maka vuejs ini searasa ditengah - tengah antara reactjs dan angular.

Pada komunitas laravel sendiri VueJS ini cukup banyak digunakan. Bahkan pada awalnya yang membuat VueJS ini menjadi popular adalah Taylor Otwel yaitu pembuat framework laravel.

Installasi Tailwindcss

Pada kesempatan kali ini untuk dependency managernya saya menggunakan yarn. Tapi jika ingin menggunakan npm kurang lebih sama lah perintah untuk install tailwindcss ini.

# Using npm
npm install tailwindcss --save-dev
# Using Yarn
yarn add tailwindcss --dev

Untuk VueJS sendiri ketika kita membuat project baru pada laravel sudah include. Jadi jika kita jalankan perintah npm install atau yarn, maka vuejs sudah otomatis terinstall.

Setup Laravel Mix

Bekerja dengan framework laravel akan sangat membantu kita jika menggunakan webpack. Kabar baiknya pada framework laravel ada laravel mix yang mana ini akan memudahkan kita dalam membuat konfigurasi laravel webpack.

Berikut ini langkah - langkah untuk setup tailwindcss agar terintegrasi dengan laravel mix. Yang pertama adalah buat file tailwind.js pada file ini nanti berguna untuk mengatur warna yang akan digunakan, font-family dan beberapa ukuran standar yang akan digunakan pada utility css nya nanti.

./node_modules/.bin/tailwind init tailwind.js

Selanjutnya buat sebuah predifine css style untuk utility css tailwindcss seperti berikut ini. Simpan pada direktori berikut ini.

resources/assets/less/app.less

Dan untuk isinya kita tambahkan beberapa komponen predefine dari tailwindcss.

@tailwind preflight;

@tailwind components;

@tailwind utilities;

Dan yang terakhir configurasi webpacknya pada file webpack.mix.js seperti berikut ini.

const mix = require('laravel-mix');
let tailwindcss = require('tailwindcss');

mix.js('resources/js/app.js', 'public/js')
	.less('resources/assets/less/app.less', 'public/css/app.css')
  .options({
   processCssUrls: false,
   postCss: [ tailwindcss('./tailwind.js') ],
  });

Sekarang yang terakhir tinggal jalankan pertintah berikut ini untuk menjalankan webpack.

yarn run watch-poll

Nah dengan begini nanti kita tidak perlu lagi mengurusi generate file js atau css. Semua sudah di tangani dengan laravel mix dan kita tinggal coding saja.

Update :

Kita juga bisa membuat setting nya menjadi lebih singkat seperti berikut ini.

Pertama buat default tailwindcss utility pada folder berikut ini resources/sass/app.css.

@tailwind preflight;

@tailwind components;

@tailwind utilities;

Selanjutnya untuk webpack nya seperti berikut ini.

const mix = require('laravel-mix');

var tailwindcss = require('tailwindcss');

mix.js('resources/js/app.js', 'public/js')
 .postCss('resources/sass/app.css', 'public/css', [
   tailwindcss('./tailwind.js'),
  ]);

Jadi inti dari proses yang di lakukan oleh laravel mix adalah menggubah file css pada folder resources/sass/app.css menjadi css yang siap di gunakan dan di generate ke folder public/css.