Create Angular + Tailwind

🚀 A CLI tool to give starter template for angular project with tailwind css

✨ Features

• 🎯 Angular 20+ - Latest version with standalone components and signals
• 🎨 Tailwind CSS v4 - Utility-first CSS framework preconfigured
• 🚀 SEO Optimized - Meta tags, Open Graph, Twitter Cards, structured data, robots.txt
• 🌍 i18n Translation - English & Arabic with RTL support
• 🎮 Interactive UI - Toast notifications, Modal dialogs, and components
• 🏗️ Zero Configuration - Everything set up and ready to go

Quick Start

Using npx (Recommended)

Run the following command and follow the prompts:

npx create-ng-tailwind my-awesome-app

Using npm

Install globally and use:

npm install -g create-ng-tailwind
create-ng-tailwind my-awesome-app

What happens next?

The CLI will guide you through:

1. Choosing a template (Minimal or Starter)
2. Configuring Server-Side Rendering (optional)
3. Setting up zoneless application (optional)
4. Selecting AI tools integration (optional)

After setup completes:

cd my-awesome-app
npm install
ng serve

Your app will be running at http://localhost:4200 🎉

🏗️ Project Structure

my-app/
├── src/
│   ├── app/
│   │   ├── core/                  # Core services and interceptors
│   │   │   ├── services/          # Auth, API, SEO, Toast, Modal, etc.
│   │   │   ├── interceptors/      # HTTP interceptors
│   │   │   ├── guards/            # Route guards
│   │   │   ├── i18n/              # Translation service
│   │   │   └── utils/             # Structured data utilities
│   │   ├── shared/                # Shared components and utilities
│   │   │   ├── components/        # Button, Card, Toast, Modal
│   │   │   ├── pipes/             # Truncate, TimeAgo
│   │   │   ├── directives/        # ClickOutside, Tooltip
│   │   │   └── models/            # TypeScript interfaces
│   │   ├── features/              # Feature modules
│   │   │   ├── home/              # Home page
│   │   │   ├── about/             # About page
│   │   │   ├── contact/           # Contact page
│   │   │   └── auth/              # Authentication pages
│   │   ├── layout/                # Layout components
│   │   │   ├── header/            # Navigation header
│   │   │   └── footer/            # Footer component
│   │   ├── app.config.ts          # App configuration
│   │   ├── app.routes.ts          # Routing configuration
│   │   └── app.ts                 # Main app component
│   ├── styles.css                 # Tailwind CSS imports
│   └── main.ts                    # Bootstrap
├── public/
│   ├── assets/
│   │   ├── i18n/                  # Translation files (en.json, ar.json)
│   │   └── images/                # OG images, logos
│   ├── robots.txt                 # SEO robots file
│   ├── favicon.svg                # Favicon
│   └── android-chrome-*.svg       # PWA icons
├── .postcssrc.json                # PostCSS configuration
├── package.json
└── ...

🎯 Starter Template Features

The Starter Template includes 25+ production-ready features:

Core Services

• AuthService - Authentication & user management
• ApiService - Centralized HTTP request handling
• SeoService - Comprehensive SEO management (meta tags, Open Graph, Twitter Cards, structured data)
• ToastService - Notification system (success, error, warning, info)
• ModalService - Dialog system with confirm & alert
• LoadingService - Global loading state with signals
• CacheService - Response caching with TTL
• StorageService - LocalStorage wrapper with type safety
• i18nService - Internationalization management

SEO Optimization (Simple & Ready to Use)

• SEO Service - Just 2 methods: updateMeta() and addStructuredData()
• Meta Tags - Title, description, keywords (auto-configured on all pages)
• Social Sharing - Open Graph & Twitter Cards (pre-configured)
• Structured Data - Organization & WebSite schemas (included)
• Canonical URLs - Auto-updated on route changes
• Assets - robots.txt, favicon set, OG image placeholder
• Extensible - Easy to add more schemas as needed

UI Components

• ButtonComponent - Variants: primary, secondary, danger
• CardComponent - Flexible container with title & shadow
• LoadingSpinnerComponent - Animated loading indicator
• ToastComponent - Auto-dismiss notifications
• ModalComponent - Accessible dialog with sizes

Utilities

• Pipes - Truncate, TimeAgo
• Directives - ClickOutside, Tooltip
• HTTP Interceptors - Auth, Error handling, Loading, Caching
• TypeScript Path Aliases - Clean imports with @core/*, @shared/*, @features/*

Internationalization

• Complete i18n Support - English & Arabic with RTL support
• Language Switcher - Built-in header component
• Translation Files - JSON-based translation system

Additional Features

• Routing - Pre-configured with lazy loading
• Authentication Pages - Login, Register, Forgot Password
• Example Pages - Home, About, Contact with reactive forms
• PWA Support - Service worker configuration
• Linting & Formatting - ESLint + Prettier + simple-git-hooks (pre-commit linting)
• Modern Stack - Tailwind v4, TypeScript, Signals

🎨 Tailwind CSS v4

This tool uses Tailwind CSS v4 with the official PostCSS approach:

• ✅ Modern PostCSS Plugin - @tailwindcss/postcss
• ⚡ LightningCSS - Fast CSS processing
• 🎨 Modern CSS Features - Nesting, variables, and more built-in
• 🚀 Simplified Build - No preprocessors needed

Note: Tailwind v4 does not support SCSS, Sass, or Less. Modern CSS provides all the features you need!

🎨 Comprehensive Theming System

The starter template includes a powerful Tailwind v4 theming system using the @theme directive:

Theme Colors:

• primary - Main brand color (with full 50-950 scale)
• secondary - Secondary brand color (with full 50-950 scale)
• accent - Accent/highlight color (with full 50-950 scale)
• success - Success states (green)
• danger - Error/danger states (red)
• warning - Warning states (yellow/orange)
• info - Informational states (blue)

Customization: Simply edit src/styles.css and change the color values in the @theme block. All components automatically update!

@theme {
  --color-primary-500: #3b82f6;  /* Change this to your brand color */
  --color-secondary-500: #06b6d4;
  --color-accent-500: #a855f7;
  /* ... complete color scales included */
}

Usage in templates:

<div class="bg-primary-600 text-white">Primary button</div>
<div class="bg-secondary-500">Secondary element</div>
<p class="text-danger-600">Error message</p>

All UI components, pages, and layouts use these theme colors, making it easy to rebrand your entire application by changing a few color values!

📄 License

MIT License - see the LICENSE file included in the package.

🙏 Support & Community

If you find this tool helpful, please consider:

• ⭐ Star the package on npm
• 🔄 Share with your developer friends
• 📧 Contact: [email protected]