{"id":28791487,"url":"https://github.com/s-a-l-m/ionic-angular-tailwind-template","last_synced_at":"2026-04-11T11:43:55.965Z","repository":{"id":294496710,"uuid":"986380467","full_name":"S-A-L-M/ionic-angular-tailwind-template","owner":"S-A-L-M","description":"🚀 Modern Ionic Angular starter with latest dependencies \u0026 clean Tailwind CSS 4 integration. Production-ready base project for rapid mobile app development.","archived":false,"fork":false,"pushed_at":"2025-06-13T22:17:54.000Z","size":1318,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-18T00:02:23.796Z","etag":null,"topics":["angular","capacitor-plugin","cordova-plugin","ionic","starter","starter-template","tailwindcss","template","template-project","typescript"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/S-A-L-M.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-19T14:18:54.000Z","updated_at":"2025-05-26T14:49:07.000Z","dependencies_parsed_at":"2025-05-23T18:41:47.231Z","dependency_job_id":null,"html_url":"https://github.com/S-A-L-M/ionic-angular-tailwind-template","commit_stats":null,"previous_names":["s-a-l-m/vigilabaq","s-a-l-m/ionicprojectbase","s-a-l-m/ionic-angular-tailwind-template"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/S-A-L-M/ionic-angular-tailwind-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/S-A-L-M%2Fionic-angular-tailwind-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/S-A-L-M%2Fionic-angular-tailwind-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/S-A-L-M%2Fionic-angular-tailwind-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/S-A-L-M%2Fionic-angular-tailwind-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/S-A-L-M","download_url":"https://codeload.github.com/S-A-L-M/ionic-angular-tailwind-template/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/S-A-L-M%2Fionic-angular-tailwind-template/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260459472,"owners_count":23012542,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","capacitor-plugin","cordova-plugin","ionic","starter","starter-template","tailwindcss","template","template-project","typescript"],"created_at":"2025-06-18T00:02:19.238Z","updated_at":"2026-04-11T11:43:55.953Z","avatar_url":"https://github.com/S-A-L-M.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Ionic 8 + Angular 19 Standalone + TailwindCSS 4\n\nA modern, clean, and production-ready Ionic Angular starter template with the latest dependencies and Tailwind CSS 4 integration.\n\n\n##  Features\n\n⚡️  Latest Angular 19 - Cutting-edge Angular framework \n\n⚡ Ionic 8 - Modern mobile UI  \n\n👩‍💻 Capacitor 7 - Native functionality bridge\n\n📲 Tailwind CSS 4 - Clean integration without conflicts\n\n🛠️ TypeScript - Type-safe development\n\n📦 Zero Configuration - Ready to use out of the box\n\n🎯 Production Ready - Optimized for deployment\n\n🔧 Extensible - Easy to customize and extend\n\n\n\n\n## 📋 Prerequisites\n\nBefore you begin, ensure you have the following installed:\n\n- Node.js `(v20.11.1 or 22)`\n- npm `(v10.0.0 or higher)`\n- Ionic CLI `(npm install -g @ionic/cli --recomended: ^8.0.0 )`\n\n\n## 1. Clone the Repository\n\n\n```bash\n  https://github.com/S-A-L-M/ionic-angular-tailwind-template.git\n  cd ionic-angular-tailwind-template\n```\n\n\n## 2.  Install Dependencies\n\n\n```bash\n    npm install\n```\n\n## 3. Run the Development Server\n\n\n```bash\n    ionic serve\n```\n    \n## 📦 Dependencies\n\n#### Core Framework\n\n\n| Name | Version     | Description                |\n| :-------- | :------- | :------------------------- |\n| `Angular` | `^19.0.0` | Latest Angular framework with modern features|\n| `Ionic Angular` | `^8.0.0` | Mobile-first UI components|\n| `Capacitor` | `^7.2.0` | Native bridge for mobile apps|\n\n#### Styling\n\n| Name | Type     | Description                       |\n| :-------- | :------- | :-------------------------------- |\n| `Tailwind CSS`      | `^4.0.0` | Utility-first CSS framework (cleanly integrated)|\n| `Ionicons`      | `^7.0.0` | Beautiful icons for mobile apps |\n\n#### Development Tools\n\n| Name | Type     | Description                       |\n| :-------- | :------- | :-------------------------------- |\n| `TypeScript`      | `^~5.6.3` | Latest version for type safety|\n| `RxJS`      | `^7.0.0` |  Reactive programming |\n| `Zone.js`      | `~0.15.0` |  Angular's change detection |\n\n\n\n\n## Documentation\n\nThis project includes a clean Tailwind CSS 4 integration that:\n\n- ✅ Works seamlessly with Ionic components\n- ✅ No grid or theme conflicts\n- ✅ Maintains Ionic's native styling\n- ✅ Allows custom utility classes\n- ✅ Fully responsive design system\n\n## Usage Example\n\n```bash\n  \u003c!-- Ionic handles colors and themes, Tailwind handles spacing and layout --\u003e\n\u003cion-content class=\"ion-padding\"\u003e\n  \u003cion-card class=\"rounded-lg shadow-lg\"\u003e\n    \u003cion-card-header\u003e\n      \u003cion-card-title class=\"text-2xl font-bold\"\u003eWelcome!\u003c/ion-card-title\u003e\n      \u003cion-card-subtitle class=\"text-sm font-medium opacity-75\"\u003e\n        Clean integration example\n      \u003c/ion-card-subtitle\u003e\n    \u003c/ion-card-header\u003e\n    \n    \u003cion-card-content class=\"space-y-4\"\u003e\n      \u003cp class=\"text-base leading-relaxed\"\u003e\n        This shows Tailwind CSS working harmoniously with Ionic components.\n      \u003c/p\u003e\n      \n      \u003cdiv class=\"flex flex-col sm:flex-row gap-3 mt-6\"\u003e\n        \u003cion-button expand=\"block\" class=\"flex-1\"\u003e\n          \u003cion-icon name=\"rocket\" slot=\"start\"\u003e\u003c/ion-icon\u003e\n          Get Started\n        \u003c/ion-button\u003e\n        \u003cion-button fill=\"outline\" expand=\"block\" class=\"flex-1\"\u003e\n          Learn More\n        \u003c/ion-button\u003e\n      \u003c/div\u003e\n    \u003c/ion-card-content\u003e\n  \u003c/ion-card\u003e\n  \n  \u003c!-- Grid layout with Tailwind, styling with Ionic --\u003e\n  \u003cdiv class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mt-6\"\u003e\n    \u003cion-item class=\"rounded-lg\"\u003e\n      \u003cion-icon name=\"checkmark-circle\" slot=\"start\" color=\"success\"\u003e\u003c/ion-icon\u003e\n      \u003cion-label class=\"font-medium\"\u003eFeature One\u003c/ion-label\u003e\n    \u003c/ion-item\u003e\n    \n    \u003cion-item class=\"rounded-lg\"\u003e\n      \u003cion-icon name=\"star\" slot=\"start\" color=\"warning\"\u003e\u003c/ion-icon\u003e\n      \u003cion-label class=\"font-medium\"\u003eFeature Two\u003c/ion-label\u003e\n    \u003c/ion-item\u003e\n  \u003c/div\u003e\n\u003c/ion-content\u003e\n```\n\n## Best Practices for Integration\n\n✅ Use Tailwind for:\n\n- Spacing `(p-4, m-6, gap-3)`\n- Layout `(flex, grid, space-y-4)`\n- Typography sizing `(text-2xl, text-base)`\n- Responsive design `(sm:flex-row, md:grid-cols-2)`\n- Positioning `(absolute, relative)`\n\n✅ Use Ionic for:\n\n- Colors `(color=\"primary\", color=\"success\")`\n- Theme variations `(fill=\"outline\")`\n- Component styling `(ion-card, ion-button)`\n- Dark/Light mode handling\n- Platform-specific designs\n\n\n## 📱 Build for Mobile\n\n _iOS_\n\n ```bash\nionic capacitor add ios\nionic capacitor build ios\nionic capacitor open ios\n```\n\n _Android_\n\n ```bash\nionic capacitor add android\nionic capacitor build android\nionic capacitor open android\n```\n\n## 🛠️ Available Scripts\n\n| Command | Description                       |\n| :-------- |  :-------------------------------- |\n| `ionic serve`   | Start development server|\n| `ionic build`      |  Build for production |\n| `ionic capacitor build`     |  Build and sync with Capacitor |\n| `ionic generate`     |  Generate new components/pages |\n| `npm test`     |  Run unit tests |\n| `npm run lint`     |  Run ESLint |\n\n## 📁 Project Structure\n\n- 📁 VigilaBAQ/\n- ├── 🔧 angular/\n- ├── 📁 .vscode/\n- ├── 📁 node_modules/\n- ├── 📁 src/\n- │   ├── 🅰️ app/\n- │   │   ├── 📁 auth/\n- │   │   │   ├── 📁 login/\n- │   │   │   ├── 📁 signup/\n- │   │   │   └── 🔄 auth.routes.ts\n- │   │   ├── 📁 main/\n- │   │   ├── 📁 pages/\n- │   │   │   ├── 🏠 home/\n- │   │   │   │   ├── 📄 home.page.html\n- │   │   │   │   ├── 🎨 home.page.scss\n- │   │   │   │   ├── 📝 home.page.spec.ts\n- │   │   │   │   └── 📝 home.page.ts\n- │   │   │   ├── 👤 profile/\n- │   │   │   └── 🔒 security/\n- │   │   │       ├── 📄 main.page.html\n- │   │   │       ├── 🎨 main.page.scss\n- │   │   │       ├── 📝 main.page.spec.ts\n- │   │   │       ├── 📝 main.page.ts\n- │   │   │       └── 🔄 main.routes.ts\n- │   │   ├── 📁 shared/\n- │   │   │   ├── 📁 button/\n- │   │   │   ├── 📁 notification/\n- │   │   │   └── 📁 validators-form/\n- │   │   ├── 📄 app.component.html\n- │   │   ├── 🎨 app.component.scss\n- │   │   ├── 📝 app.component.spec.ts\n- │   │   ├── 🅰️ app.component.ts\n- │   │   └── 🔄 app.routes.ts\n- │   ├── 📁 assets/\n- │   ├── 📁 environments/\n- │   ├── 📁 theme/\n- │   │   ├── 🎨 variables.scss\n- │   │   └── 🌐 global.scss\n- │   ├── 📄 index.html\n- │   ├── 📝 main.ts\n- │   ├── 📄 polyfills.ts\n- │   └── 📄 zone-flags.ts\n- ├── 📁 tests/\n- ├── 🌐 www/\n- ├── 📁 .browserslistrc/\n- ├── ⚙️ angular.json\n- ├── 📦 capacitor.config.ts\n- ├── 🔧 ionic.config.json\n- ├── 📄 karma.conf.js\n- ├── 📦 package.json\n- ├── 📦 package-lock.json\n- ├── 📝 tsconfig.app.json\n- ├── 📝 tsconfig.json\n- ├── 📝 tsconfig.spec.json\n- └── 📄 README.md\n\n\n## 🎯 What's Included\n\n- Clean Architecture - Well-organized folder structure\n- Responsive Design - Mobile-first approach\n- Dark Mode Support - Built-in theme switching\n- PWA Ready - Progressive Web App capabilities\n- Performance Optimized - Lazy loading and tree shaking\n- Accessibility - ARIA labels and semantic HTML\n\n\n## Adding New Pages\n ```bash\nionic generate page pages/my-new-page\n```\n\n\n## Creating Components\n ```bash\nionic generate component components/my-component\n```\n## Adding Services\n ```bash\nionic generate service services/my-service\n```\n\n## 🌟 Why Use This Base Project?\n\n- ⚡ Fast Setup - Get started in minutes, not hours\n- 🔄 Latest Dependencies - Always up-to-date with the latest versions\n- 🎨 Modern Styling - Tailwind CSS 4 without conflicts\n- 📱 Mobile Ready - Capacitor integration for native features\n- 🛡️ Type Safe - Full TypeScript support\n- 🔧 Flexible - Easy to customize for any project needs\n\n\n## 📄 License\nThis project is licensed under the `MIT License.`\n\n## 🤝 Contributing\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## Fork the project\n- Create your feature branch `(git checkout -b feature/AmazingFeature)`\n- Commit your changes `(git commit -m 'Add some AmazingFeature')`\n- Push to the branch `(git push origin feature/AmazingFeature)`\n- Open a Pull Request\n\n## 🆘 Support\nIf you find this project helpful, please consider giving it a ⭐ on GitHub!\nFor questions or support, please open an issue on GitHub.\n\n-Happy Coding! 🎉\nBuilt with ❤️ using Ionic, Angular, and Tailwind CSS\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fs-a-l-m%2Fionic-angular-tailwind-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fs-a-l-m%2Fionic-angular-tailwind-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fs-a-l-m%2Fionic-angular-tailwind-template/lists"}