https://github.com/s-a-l-m/ionic-angular-tailwind-template
🚀 Modern Ionic Angular starter with latest dependencies & clean Tailwind CSS 4 integration. Production-ready base project for rapid mobile app development.
https://github.com/s-a-l-m/ionic-angular-tailwind-template
angular capacitor-plugin cordova-plugin ionic starter starter-template tailwindcss template template-project typescript
Last synced: 2 months ago
JSON representation
🚀 Modern Ionic Angular starter with latest dependencies & clean Tailwind CSS 4 integration. Production-ready base project for rapid mobile app development.
- Host: GitHub
- URL: https://github.com/s-a-l-m/ionic-angular-tailwind-template
- Owner: S-A-L-M
- Created: 2025-05-19T14:18:54.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-13T22:17:54.000Z (about 1 year ago)
- Last Synced: 2025-06-18T00:02:23.796Z (about 1 year ago)
- Topics: angular, capacitor-plugin, cordova-plugin, ionic, starter, starter-template, tailwindcss, template, template-project, typescript
- Language: HTML
- Homepage:
- Size: 1.26 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Ionic 8 + Angular 19 Standalone + TailwindCSS 4
A modern, clean, and production-ready Ionic Angular starter template with the latest dependencies and Tailwind CSS 4 integration.
## Features
⚡️ Latest Angular 19 - Cutting-edge Angular framework
⚡ Ionic 8 - Modern mobile UI
👩💻 Capacitor 7 - Native functionality bridge
📲 Tailwind CSS 4 - Clean integration without conflicts
🛠️ TypeScript - Type-safe development
📦 Zero Configuration - Ready to use out of the box
🎯 Production Ready - Optimized for deployment
🔧 Extensible - Easy to customize and extend
## 📋 Prerequisites
Before you begin, ensure you have the following installed:
- Node.js `(v20.11.1 or 22)`
- npm `(v10.0.0 or higher)`
- Ionic CLI `(npm install -g @ionic/cli --recomended: ^8.0.0 )`
## 1. Clone the Repository
```bash
https://github.com/S-A-L-M/ionic-angular-tailwind-template.git
cd ionic-angular-tailwind-template
```
## 2. Install Dependencies
```bash
npm install
```
## 3. Run the Development Server
```bash
ionic serve
```
## 📦 Dependencies
#### Core Framework
| Name | Version | Description |
| :-------- | :------- | :------------------------- |
| `Angular` | `^19.0.0` | Latest Angular framework with modern features|
| `Ionic Angular` | `^8.0.0` | Mobile-first UI components|
| `Capacitor` | `^7.2.0` | Native bridge for mobile apps|
#### Styling
| Name | Type | Description |
| :-------- | :------- | :-------------------------------- |
| `Tailwind CSS` | `^4.0.0` | Utility-first CSS framework (cleanly integrated)|
| `Ionicons` | `^7.0.0` | Beautiful icons for mobile apps |
#### Development Tools
| Name | Type | Description |
| :-------- | :------- | :-------------------------------- |
| `TypeScript` | `^~5.6.3` | Latest version for type safety|
| `RxJS` | `^7.0.0` | Reactive programming |
| `Zone.js` | `~0.15.0` | Angular's change detection |
## Documentation
This project includes a clean Tailwind CSS 4 integration that:
- ✅ Works seamlessly with Ionic components
- ✅ No grid or theme conflicts
- ✅ Maintains Ionic's native styling
- ✅ Allows custom utility classes
- ✅ Fully responsive design system
## Usage Example
```bash
Welcome!
Clean integration example
This shows Tailwind CSS working harmoniously with Ionic components.
Get Started
Learn More
Feature One
Feature Two
```
## Best Practices for Integration
✅ Use Tailwind for:
- Spacing `(p-4, m-6, gap-3)`
- Layout `(flex, grid, space-y-4)`
- Typography sizing `(text-2xl, text-base)`
- Responsive design `(sm:flex-row, md:grid-cols-2)`
- Positioning `(absolute, relative)`
✅ Use Ionic for:
- Colors `(color="primary", color="success")`
- Theme variations `(fill="outline")`
- Component styling `(ion-card, ion-button)`
- Dark/Light mode handling
- Platform-specific designs
## 📱 Build for Mobile
_iOS_
```bash
ionic capacitor add ios
ionic capacitor build ios
ionic capacitor open ios
```
_Android_
```bash
ionic capacitor add android
ionic capacitor build android
ionic capacitor open android
```
## 🛠️ Available Scripts
| Command | Description |
| :-------- | :-------------------------------- |
| `ionic serve` | Start development server|
| `ionic build` | Build for production |
| `ionic capacitor build` | Build and sync with Capacitor |
| `ionic generate` | Generate new components/pages |
| `npm test` | Run unit tests |
| `npm run lint` | Run ESLint |
## 📁 Project Structure
- 📁 VigilaBAQ/
- ├── 🔧 angular/
- ├── 📁 .vscode/
- ├── 📁 node_modules/
- ├── 📁 src/
- │ ├── 🅰️ app/
- │ │ ├── 📁 auth/
- │ │ │ ├── 📁 login/
- │ │ │ ├── 📁 signup/
- │ │ │ └── 🔄 auth.routes.ts
- │ │ ├── 📁 main/
- │ │ ├── 📁 pages/
- │ │ │ ├── 🏠 home/
- │ │ │ │ ├── 📄 home.page.html
- │ │ │ │ ├── 🎨 home.page.scss
- │ │ │ │ ├── 📝 home.page.spec.ts
- │ │ │ │ └── 📝 home.page.ts
- │ │ │ ├── 👤 profile/
- │ │ │ └── 🔒 security/
- │ │ │ ├── 📄 main.page.html
- │ │ │ ├── 🎨 main.page.scss
- │ │ │ ├── 📝 main.page.spec.ts
- │ │ │ ├── 📝 main.page.ts
- │ │ │ └── 🔄 main.routes.ts
- │ │ ├── 📁 shared/
- │ │ │ ├── 📁 button/
- │ │ │ ├── 📁 notification/
- │ │ │ └── 📁 validators-form/
- │ │ ├── 📄 app.component.html
- │ │ ├── 🎨 app.component.scss
- │ │ ├── 📝 app.component.spec.ts
- │ │ ├── 🅰️ app.component.ts
- │ │ └── 🔄 app.routes.ts
- │ ├── 📁 assets/
- │ ├── 📁 environments/
- │ ├── 📁 theme/
- │ │ ├── 🎨 variables.scss
- │ │ └── 🌐 global.scss
- │ ├── 📄 index.html
- │ ├── 📝 main.ts
- │ ├── 📄 polyfills.ts
- │ └── 📄 zone-flags.ts
- ├── 📁 tests/
- ├── 🌐 www/
- ├── 📁 .browserslistrc/
- ├── ⚙️ angular.json
- ├── 📦 capacitor.config.ts
- ├── 🔧 ionic.config.json
- ├── 📄 karma.conf.js
- ├── 📦 package.json
- ├── 📦 package-lock.json
- ├── 📝 tsconfig.app.json
- ├── 📝 tsconfig.json
- ├── 📝 tsconfig.spec.json
- └── 📄 README.md
## 🎯 What's Included
- Clean Architecture - Well-organized folder structure
- Responsive Design - Mobile-first approach
- Dark Mode Support - Built-in theme switching
- PWA Ready - Progressive Web App capabilities
- Performance Optimized - Lazy loading and tree shaking
- Accessibility - ARIA labels and semantic HTML
## Adding New Pages
```bash
ionic generate page pages/my-new-page
```
## Creating Components
```bash
ionic generate component components/my-component
```
## Adding Services
```bash
ionic generate service services/my-service
```
## 🌟 Why Use This Base Project?
- ⚡ Fast Setup - Get started in minutes, not hours
- 🔄 Latest Dependencies - Always up-to-date with the latest versions
- 🎨 Modern Styling - Tailwind CSS 4 without conflicts
- 📱 Mobile Ready - Capacitor integration for native features
- 🛡️ Type Safe - Full TypeScript support
- 🔧 Flexible - Easy to customize for any project needs
## 📄 License
This project is licensed under the `MIT License.`
## 🤝 Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## Fork the project
- Create your feature branch `(git checkout -b feature/AmazingFeature)`
- Commit your changes `(git commit -m 'Add some AmazingFeature')`
- Push to the branch `(git push origin feature/AmazingFeature)`
- Open a Pull Request
## 🆘 Support
If you find this project helpful, please consider giving it a ⭐ on GitHub!
For questions or support, please open an issue on GitHub.
-Happy Coding! 🎉
Built with ❤️ using Ionic, Angular, and Tailwind CSS