Laravel Mix menggunakan Tailwindcss

Di pembahasan sebelumnya Laravel Mix dengan Vuejs, kita sudah membuat aplikasi yang sangat sederhana dengan VueJs dan Laravel Mix. Pada pembahasan ini akan melanjutkan aplikasi tersebut dengan mengintegrasikan Framework CSS Tailwindcss.

Baca Juga : Laravel Mix dengan VueJs

Tailwindcss

Tailwindcss adalah kerangka kerja (framework) CSS yang memberikan dasar-dasar dari kode CSS ke dalam bentuk class-class kecil, sehingga mudah digunakan dan lebih ramah terhadap kustomisasi. Berbeda dengan Framework CSS lain yang memiliki UI Kit, seperti button, card, alert, table dan komponen lainnya yang sudah dirancang sehingga minim kustomisasi.

Cara Penggunaan

Ada dua cara dalam menggunakan Tailwindcss.

Tailwindcss menggunakan versi CDN (Content Delivery Network). Cara ini sangat cepat dan mudah untuk dilakukan, akan tetapi membatasi fitur dari Tailwindcss itu sendiri. Sebetulnya kita sudah gunakan Tailwindcss versi CDN pada aplikasi kita di berkas "index.html".

Cara kedua, menggunakan Node Package Manager (NPM) untuk menginstall Tailwindcss. Cara ini membuat kita bisa menggunakan fitur yang ada pada Tailwindcss. Fitur tersebut antara lain :

• Membuat default tema sendiri.
• Bisa menggunakan fungsi directive seperti @apply, @variant, dan lainnya.
• Bisa menggunakan fitur group-hover.
• Bisa menginstall third-party plugins.

Integrasi Tailwindcss

Kali ini kita akan menginstall Tailwindcss di aplikasi kita menggunakan NPM, pertama buka Terminal (CMD) di folder aplikasi kita. Kemudian jalankan perintah ini.

$ npm install mix-tailwindcss --save-dev

Pada berkas "webpack.mix.js", kita tambah kode menjadi seperti ini.

Pada berkas "app.scss" di folder src, kita tambah kode ini untuk mengambil class dari Tailwindcss.

Pada berkas "index.html", kita ganti CDN Tailwindcss dengan hasil dari compile berkas "app.scss" kita di folder dist menjadi seperti ini.

Kemudian, jalankan perintah di terminal untuk compile berkas "app.scss" kita.

$ npm run dev

Hasil compile akan seperti ini.

Terakhir tinggal buka berkas "index.html" kita di browser, maka tampilan aplikasi tetap sama seperti saat menggunakan Tailwindcss versi CDN.

Sampai disini kita sudah berhasil mengintegrasikan Tailwindcss dan dapat langsung memakai class di masing-masing tags HTML pada aplikasi kita.

Kustom Class

Permasalah yang dialami saat memakai Tailwindcss versi CDN adalah penggunaan class yang banyak pada tags HTML seperti template kode HTML di atas terlihat banyak sekali class yang dipakai untuk komponen input dan button.

Hal itu membuat kode menjadi susah dibaca, untuk mengatasinya kita perlu menggunakan salah satu fungsi directive yaitu @apply yang mana kita dapat membuat kustom class sendiri dengan membungkus class yang ada di Tailwindcss.

Pertama kita buka berkas "app.scss" di folder src, disini dapat membuat class kita sendiri. Di bawah @component, tambahkan kustom class kita menjadi seperti ini.

Berikutnya ubah class yang ada di dalam berkas "Todolist.vue" menjadi kustom class yang kita buat tadi.

Jalankan perintah di terminal untuk compile.

$ npm run dev

Buka "index.html" di browser dan selesai, sekarang kita sudah bisa membuat kustom class sendiri dengan salah fitur directive Tailwindcss pada aplikasi kita.


Sekian dari Laravel Mix menggunakan Tailwindcss, terimakasih