Create Angular + Tailwind

Production-ready Angular + Tailwind CSS starter templates

Quick Start

npx create-ng-tailwind my-app

Then follow the prompts to choose your template.

cd my-app
npm install
ng serve

Your app runs at http://localhost:4200

Templates

Starter (Recommended)

Professional foundation with everything you need:

• Header, Footer, Auth pages (Login, Register, Forgot Password)
• i18n (English & Arabic with RTL)
• Toast & Modal systems
• SEO optimization
• HTTP interceptors (Auth, Error, Loading, Cache)
• PWA support

Dashboard

Admin dashboard with:

• Collapsible sidebar navigation
• Stats cards with icons and trends
• Chart components (Bar, Line, Donut)
• Data table with sorting & pagination
• 5 pages: Overview, Analytics, Users, Orders, Settings
• i18n support (EN/AR) with RTL
• Dark mode ready

Minimal

Clean slate - just Angular + Tailwind CSS configured.

Features Comparison

| Feature | Minimal | Starter | Dashboard | | ------------------ | ------- | ------- | --------- | | Tailwind CSS v4 | ✅ | ✅ | ✅ | | Routing | ✅ | ✅ | ✅ | | i18n (EN/AR + RTL) | - | ✅ | ✅ | | Auth UI | - | ✅ | - | | HTTP Interceptors | - | ✅ | ✅ | | Toast/Modal | - | ✅ | ✅ | | SEO Service | - | ✅ | ✅ | | PWA | - | ✅ | ✅ | | ESLint + Prettier | ✅ | ✅ | ✅ | | Sidebar Layout | - | - | ✅ | | Charts | - | - | ✅ | | Data Tables | - | - | ✅ |

Project Structure

src/app/
├── core/           # Services, guards, interceptors, i18n
├── shared/         # Components, pipes, directives
├── features/       # Page components (home, about, auth...)
├── layout/         # Header, footer, sidebar
├── app.config.ts   # App configuration
├── app.routes.ts   # Routing
└── app.ts          # Root component

Theming

Edit src/styles.css to customize colors:

@theme {
  --color-primary-500: #3b82f6;
  --color-secondary-500: #06b6d4;
  --color-accent-500: #a855f7;
}

Use in templates:

<button class="bg-primary-500 text-white">Click me</button>

CLI Options

# Interactive (default)
npx create-ng-tailwind my-app

# With options
npx create-ng-tailwind my-app --template=starter --ssr --zoneless

# Available templates
--template=<minimal|starter|dashboard>

# Other flags
--ssr                  # Enable Server-Side Rendering
--zoneless             # Create zoneless application
--ai-config            # Configure AI tools (Claude, Cursor, etc.)
--ng-version=<v>       # Pin Angular CLI version (latest|21|20|19).
                       # Default: auto-pick the highest version compatible
                       # with your current Node.js runtime.

Node.js / Angular Compatibility

This CLI auto-detects your Node.js version and picks the highest compatible Angular CLI release. You don't normally need to think about it — but if you want to pin a specific Angular version, pass --ng-version=<v>.

| Angular CLI | Required Node.js | | ----------- | --------------------------------- | | 22 (latest) | ^22.22.3 \|\| ^24.15.0 \|\| >=26.0.0 | | 21 | ^20.19.0 \|\| ^22.12.0 \|\| >=24.0.0 | | 20 | ^20.11.1 \|\| ^22.0.0 \|\| ^24.0.0 | | 19 | ^18.19.1 \|\| ^20.11.1 \|\| ^22.0.0 |

If no Angular version supports your Node, the CLI prints an upgrade hint and exits.

Requirements

• Node.js 18+ (Node 20.11.1+ recommended for Angular 20+)
• npm 9+

License

MIT

Support

• Contact: [email protected]