CodeIgniter 3 + Tailwind CSS Starter Kit

A clean and ready-to-use starter kit to integrate Tailwind CSS with CodeIgniter 3. This kit allows you to quickly set up a CI3 project with Tailwind CSS for modern, responsive UI development.

✅ Features

• Tailwind CSS v3 pre-configured
• PostCSS and Autoprefixer setup
• Watch and build scripts for development and production
• Supports CodeIgniter 3 views (including HMVC modules)
• Dark/light mode ready (optional)
• Compatible with multi-version Node.js using .nvmrc
• Clean and minimal project structure
• Ready to be used as a GitHub template

🚀 Quick Start

Prerequisites

• Node.js (recommended: use nvm to manage versions)
• CodeIgniter 3 (3.1.x or later)

Installation

1. Click "Use this template" to create a new repository from this starter kit.

2. Clone your new repository:

   git clone <your-repo-url>
   cd <your-repo-name>

3. Install dependencies:

   npm install

4. Use the correct Node.js version (optional, if using nvm):

   nvm use

5. Build Tailwind CSS for the first time:

   npm run build

   This will generate assets/css/tailwind.css.

6. Link the CSS file in your CI3 view:

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

Development

To watch for changes in src/input.css and rebuild CSS automatically, run:

npm run dev

### Production

To build a minified version of the CSS, run:

```bash
npm run build
```

## 📁 Project Structure

```
project/
├── application/
├── assets/
│   └── css/
│       └── tailwind.css (generated)
├── src/
│   └── input.css (Tailwind directives)
├── package.json
├── tailwind.config.js
├── postcss.config.js
├── .nvmrc
├── .gitignore
└── README.md
```

## 🎨 Customization

- Modify `src/input.css` to add custom base styles or `@layer` directives.
- Edit `tailwind.config.js` to customize theme, add plugins, or modify content paths.

## 📌 Notes

- The `content` paths in `tailwind.config.js` are configured to scan both `application/views` and `application/modules/**/views` for Tailwind classes.
- You can use Tailwind classes directly in your CI3 PHP views.
- The `node_modules` directory is ignored by Git. It will be generated by `npm install`.

## 📜 License

MIT

---

✅ Langkah Terakhir: Simpan File Ini

• Simpan file di atas sebagai README.md di root folder proyek kamu.
• Commit dan push ke GitHub:

git add README.md
git commit -m "Add complete README.md"
git push origin main