https://github.com/ahmadsubadri/codeigniter-3-tailwind-css-starter-kit
A clean and ready-to-use starter kit to integrate Tailwind CSS with CodeIgniter 3.
https://github.com/ahmadsubadri/codeigniter-3-tailwind-css-starter-kit
codeigniter codeigniter3 css frontend php starter-kit tailwind-starter-kit tailwindcss template
Last synced: about 1 month ago
JSON representation
A clean and ready-to-use starter kit to integrate Tailwind CSS with CodeIgniter 3.
- Host: GitHub
- URL: https://github.com/ahmadsubadri/codeigniter-3-tailwind-css-starter-kit
- Owner: AhmadSubadri
- License: mit
- Created: 2025-11-03T15:34:03.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2025-11-03T15:52:57.000Z (about 1 month ago)
- Last Synced: 2025-11-03T17:24:20.740Z (about 1 month ago)
- Topics: codeigniter, codeigniter3, css, frontend, php, starter-kit, tailwind-starter-kit, tailwindcss, template
- Language: PHP
- Homepage: https://github.com/AhmadSubadri/CodeIgniter-3-Tailwind-CSS-Starter-Kit
- Size: 3.98 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: license.txt
Awesome Lists containing this project
README
# 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](https://nodejs.org/) (recommended: use `nvm` to manage versions)
- [CodeIgniter 3](https://codeigniter.com/) (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:
```bash
git clone
cd
```
3. Install dependencies:
```bash
npm install
```
4. Use the correct Node.js version (optional, if using `nvm`):
```bash
nvm use
```
5. Build Tailwind CSS for the first time:
```bash
npm run build
```
This will generate `assets/css/tailwind.css`.
6. Link the CSS file in your CI3 view:
```html
```
### Development
To watch for changes in `src/input.css` and rebuild CSS automatically, run:
```bash
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:
```bash
git add README.md
git commit -m "Add complete README.md"
git push origin main
```