Laravel Mix merupakan sebuah bundler modul yang memiliki kemampuan kuat dalam hal mempersiapkan aset JavaScript dan CSS untuk sisi front-end. Dengannya pengembang dapat melakukan pengembangan front-end yang memerlukan bundle yang dikelola oleh Node Package Manager (NPM). Lengkapnya di situs Laravel Mix.

Pendahuluan

Awalnya, Laravel Mix hanya dikembangkan khusus untuk Framework Laravel, tetapi sekarang sudah dapat digunakan dan disesuaikan dalam segala aplikasi website, contohnya adalah pada Framework Codeigniter 4 yang kemudian dibahas dalam artikel ini.

Instalasi

Pertama-tama, siapkan terlebih dahulu project Codeigniter 4 menjadi project yang dapat dikelola oleh NPM. Caranya adalah dengan menjalankan perintah berikut:

npm init -y

Catatan: Jalankan perintah di atas jika di dalam project Codeigniter belum ada file package.json. File tersebut menandakan bahwa project Codeigniter sudah dalam keadaan dapat dikelola oleh NPM.

Kemudian, install package Laravel Mix dan TailwindCSS ke dalam project dengan cara:

# install laravel mix dan tailwindcss
npm install -D laravel-mix tailwindcss postcss autoprefixer

# buat file konfigurasi tailwindcss
npx tailwindcss init

Setelah menjalankan perintah di atas, Laravel Mix dan TailwindCSS sudah terpasang, tapi masih harus dilakukan konfigurasi agar dapat digunakan dalam project Codeigniter 4. Pertama, konfigurasikan terlebih dahulu Laravel Mix.

Buat file webpack.mix.js di dalam folder utama Codeigniter 4. Kemudian isi file tersebut dengan baris kode berikut:

let mix = require('laravel-mix')

mix.setPublicPath('./public')
mix.version()
mix.postCss("app/Resources/css/app.css", "css", [
    require("tailwindcss"),
])

Setelah Laravel Mix dikonfigurasi, selanjutnya adalah konfigurasi TailwindCSS pada folder di project Codeigniter 4.

Pertama-tama buat folder Resources/css di dalam folder app. Lalu buat file css dengan nama app.css di dalam folder Resources/css.

Isi file app.css dengan baris kode berikut ini. Kode ini merupakan Tailwind Directives yang wajib ada:

@tailwind base;
@tailwind components;
@tailwind utilities;

Selanjutnya buka file tailwindcss.config.js yang ada di folder utama project Codeigniter 4, dan pada bagian property content isi dengan baris kode berikut:

module.exports = {
  content: [
    "./app/Views/**/*.php",
    "./app/Resources/**/*.js",
  ],
  presets: [],
  ...
}

Maksud dari baris kode tersebut adalah TailwindCSS akan melakukan monitoring terhadap folder Views dan Resources jika ada perubahan maka TailwindCSS akan melakukan bundle ulang agar CSS yang dihasilkan sesuai dengan keadaan terbarunya.

Setelah file tersebut disimpan, sampai sini sebenarnya sudah selesai dan untuk melakukan proses bundle selama pengembangan dapat menggunakan perintah Laravel Mix berikut:

npx mix watch

Dengan perintah di atas, selama pengembangan Laravel Mix akan melakukan monitoring pada file sesuai dengan yang sudah diatur pada baris kode di dalam file webpack.mix.js. Lalu otomatis akan terbuat file baru di dalam folder public/css, file tersebut merupakan file CSS yang nantinya dapat disematkan dalam view Codeigniter, contoh penggunaannya kurang lebih seperti ini:

<link rel="stylesheet" href="<?= base_url('/css/app.css') ?>" />

Jika proses pengembangan selesai, kita dapat melakukan bundle pada setiap aset agar siap digunakan dalam keadaan production. Caranya adalah dengan mengeksekusi perintah berikut:

npx mix build

Seperti itulah cara sederhana untuk melakukan instalasi Laravel Mix dan TailwindCSS pada project Codeigniter 4. Semoga bermanfaat. Selebihnya jika ada kekurangan mohon maaf. Sekian artikel saya kali ini, terima kasih sudah membaca dan nantikan artikel-artikel lainnya. 😊