Tailwind CSS di Codeigniter 3

Framework lawas dipakein Tailwind CSS biar kekinian. Disini kita menggunakan Node.js, PostCSS dan tentunya Tailwind CSS itu sendiri. Jadi kita konsultasikan dengan ChatGPT hasil akhirnya sebagai berikut

1. Install Node.js, PostCSS dan Tailwind CSS

Pastikan Node.js dan npm (Node Package Manager) terinstal di sistem Anda. Kemudian, instal PostCSS dan plugin apa pun yang Anda perlukan. Misalnya:

npm install tailwindcss postcss postcss-cli autoprefixer

2. Initialize Tailwind CSS

Buat tailwind.config,js dengan menjalankan:

npx tailwindcss init

Tindakan ini akan menghasilkan file tailwind.config.js default tempat Anda dapat mengonfigurasi pengaturan Tailwind, seperti menghapus gaya yang tidak digunakan dan menyesuaikan tema.

3. Create a Tailwind Input CSS File

Di proyek Anda, buat direktori untuk file CSS khusus Anda jika Anda belum melakukannya, misalnya aset/css/src. Di dalam direktori ini, buat file CSS (misalnya tailwind.css) dengan konten berikut untuk mengimpor gaya dasar Tailwind:

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

4. Configure PostCSS

Di root proyek CodeIgniter Anda, buat file postcss.config.js dengan konfigurasi berikut:

module. Exports = {
    plugins: [
        require('tailwindcss'),
        require('autoprefixer')
    ]
}

5. Configure TailwindCSS untuk PurgeCSS in tailwind.config.js

Dalam mode produksi, fitur PurgeCSS Tailwind akan menghapus semua kelas CSS yang tidak digunakan berdasarkan konten dalam file proyek Anda. Edit tailwind.config.js Anda untuk menyertakan jalur pembersihan untuk semua file tempat Anda menggunakan kelas Tailwind (biasanya melihat file dan file JavaScript):

module.exports = {
    purge: [
        './application/views/**/*.php',  // Include all view files
        './assets/js/**/*.js',           // Include any JS files with Tailwind classes
    ],
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: [],
}

Konfigurasi ini memberi tahu Tailwind untuk menghapus gaya yang tidak digunakan berdasarkan HTML di file tampilan dan JavaScript Anda.

6. Generate the CSS Output

Untuk membuat file CSS Anda, jalankan perintah berikut:

npx postcss assets/css/src/tailwind.css -o assets/css/dist/main.css

Perintah ini mengambil file masukan tailwind.css, memprosesnya dengan PostCSS, dan mengeluarkan CSS yang telah dikompilasi ke dalam aset/css/dist/main.css.

7. Tautkan CSS yang Dihasilkan di Tampilan Codeigniter Anda

Di file tampilan Anda, tautkan file CSS yang dikompilasi:

<link rel="stylesheet" href="<?php echo base_url('assets/css/dist/main.css'); ?>">

8. Add a Production Build Script

Untuk menyederhanakan proses pembangunan produksi, tambahkan skrip di file package.json Anda. Skrip ini akan:

• Setel variabel lingkungan NODE_ENV ke produksi, yang memberi tahu Tailwind untuk mengaktifkan pembersihan.
• Jalankan PostCSS untuk memproses dan mengoptimalkan file CSS.

Di package.json, tambahkan:

"scripts": {
    "build:css": "postcss assets/css/src/tailwind.css -o assets/css/dist/main.css",
    "build:prod": "NODE_ENV=production postcss assets/css/src/tailwind.css -o assets/css/dist/main.css"
}

Sekarang, kita bisa jalankan build for production dengan:

npm run build: prod

9. Install cssnano untuk Minify

Kalau belum diinstall cssnano:

npm install cssnano --save-dev

10. Configure cssnano to Minify and Remove Comments

Di postcss.config.js Anda, konfigurasikan cssnano untuk mengecilkan CSS dan menghapus komentar dalam mode produksi. Gunakan opsi membuangKomentar di cssnano untuk memastikan semua komentar dihapus.

Update postcss.config.js jadi seperti ini:

module.exports = {
    plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
        ...(process.env.NODE_ENV === 'production'
            ? [require('cssnano')({
                preset: ['default', { discardComments: { removeAll: true } }]
            })]
            : [])
    ]
}

Trouble Shooting npm run build: prod return ‘NODE_ENV’ is not recognized as an internal or external command, operable program or batch file.

1. Install cross-env (Ensure it’s Installed)

npm install cross-env --save-dev

2. Modify the build:prod Script with cross-env

"scripts": {
    "build:css": "postcss assets/css/src/tailwind.css -o assets/css/dist/main.css",
    "build:prod": "cross-env NODE_ENV=production postcss assets/css/src/tailwind.css -o assets/css/dist/main.css"
}

3. Run the Production Build Command

npm run build:prod