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.

Warning

Pembaruan Januari 2026: Laravel Mix kini berada di tahap pemeliharaan (maintenance mode) karena Laravel telah beralih ke Vite. Namun, Laravel Mix tetap stabil dan sangat mudah digunakan untuk proyek CodeIgniter 4. Pastikan Anda menggunakan CodeIgniter 4.5 ke atas dan Node.js versi LTS terbaru. Simak bagian akhir artikel ini untuk panduan versi terbaru.

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

Note

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.

Pembaruan 2026: CodeIgniter 4.5 & Laravel Mix v6

Seiring dengan perkembangan teknologi, ada beberapa poin tambahan jika Anda menggunakan versi terbaru CodeIgniter 4.5 dan Laravel Mix 6 di tahun 2025/2026.

1. Penggunaan Scripts di package.json

Agar lebih mudah menjalankan perintah, pastikan file package.json Anda memiliki bagian scripts seperti berikut:

"scripts": {
    "dev": "npm run mix",
    "watch": "mix watch",
    "prod": "mix --production",
    "mix": "mix"
}

Dengan ini, Anda cukup menjalankan npm run watch untuk pengembangan atau npm run prod untuk hasil akhir.

2. Folder Aset yang Lebih Bersih

Meskipun app/Resources bisa digunakan, standar terbaru CodeIgniter 4 sering kali menyarankan pembuatan folder resources di root project (sejajar dengan folder app) untuk memisahkan logika PHP dengan aset mentah front-end.

Contoh konfigurasi webpack.mix.js jika menggunakan folder resources/:

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

mix.setPublicPath('./public')
   .js('resources/js/app.js', 'js')
   .postCss('resources/css/app.css', 'css', [
       require('tailwindcss'),
       require('autoprefixer'),
   ])
   .version(); // Penting untuk cache busting

3. Menggunakan Helper untuk Cache Busting

Karena kita menggunakan .version(), nama file di folder public tetap app.css, tetapi di dalam file mix-manifest.json akan ada query string unik. Untuk membaca ini di CodeIgniter, Anda bisa membuat helper sederhana:

Buat file app/Helpers/asset_helper.php:

if (! function_exists('mix')) {
    function mix($path) {
        $manifestPath = FCPATH . 'mix-manifest.json';
        if (! file_exists($manifestPath)) {
            return base_url($path);
        }
        $manifest = json_decode(file_get_contents($manifestPath), true);
        $path = '/' . ltrim($path, '/');
        return base_url($manifest[$path] ?? $path);
    }
}

Lalu di View, Anda cukup memanggil:

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

4. Alternatif Modern: Vite

Jika Anda memulai proyek baru di tahun 2026, sangat disarankan untuk mempertimbangkan Vite. Vite jauh lebih cepat dalam proses hot reload dibandingkan Webpack (yang menjadi basis Laravel Mix). Namun, jika Anda menyukai kesederhanaan konfigurasi, Laravel Mix tetap pilihan yang solid untuk CodeIgniter 4.

Sekian artikel saya kali ini, terima kasih sudah membaca dan nantikan artikel-artikel lainnya. 😊