Laravel Mix dan TailwindCSS di Codeigniter 4

Laravel Mix dan TailwindCSS di Codeigniter 4 – Laravel Mix merupakan sebuah bundler modul yang memiliki kemampuat 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(opens new window).

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

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

npm install init -y

? Catatan: Jalankan perintah di atas jika di dalam project Codeiginiter 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
Code language: PHP (php)

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

Buat file webpack.mix.js di dalam folder utama Codeiginiter 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"),
])
Code language: JavaScript (javascript)

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;
Code language: CSS (css)

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

module.exports = {
  content: [
    "./app/Views/**/*.php",
    "./app/Resources/**/*.js",
  ],
  presets: [],
  ...
}
Code language: JavaScript (javascript)

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') ?>" />
Code language: HTML, XML (xml)

Jika proses pengembangan selesai, kita dapat melakukan bundle pada setiap aset agar siap digunkan 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. ?