tailwind-admin-angular — Angular 后台模板

SHA-256: b4c5557f4dbe843b2bdc3d1b7934b21b19717841adff7810fc0fd2a555465a8e

2026-10-01T14:53:35.060Z

# Tailwind Admin / Angular

[Leia em português](./README.pt-BR.md)

[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](./LICENSE) ![Free](https://img.shields.io/badge/price-free-brightgreen)

Tailwind Admin / Angular is the Angular implementation of the Tailwind admin layout: 4 sibling templates share the same 25 screens and the same visual identity, one per stack. This one is built with Angular 19 standalone components, styled with Tailwind CSS v4 (CSS-first configuration). Authentication and data are mocked, so the whole application runs without a backend. It ships with a light and a dark theme, three languages and an installable PWA setup.

Live preview: https://template.dev.br/preview/tailwind-admin-angular/

## Pages included

25 standalone components in `src/app/pages/`:

- Landing: public marketing page with hero, feature and pricing sections
- Login: sign-in form with validation and mock credentials
- Register: account creation form
- ForgotPassword: request form for a reset link
- ResetPassword: form to set a new password
- Dashboard: KPI stat cards with sparklines, charts and recent activity
- Charts: analytics page with bar, area and donut charts (ApexCharts)
- Forms: inputs, selects, date picker, file upload and inline validation
- Tables: data table with sorting, filtering, pagination and row selection
- Components: catalog of the base UI components
- UiAdvanced: modals, tabs, toasts and other composite widgets
- Typography: type scale, headings and text helpers
- Integrations: third-party service cards with toggles
- Profile: user page with personal data and activity
- Pricing: plan comparison
- Settings: application preferences, theme and language
- Inbox: mail-style app screen with folders and message list
- FileManager: file listing with folders and file actions
- Gallery: image grid
- Invoice: printable invoice detail
- Billing: payment methods and invoice history
- Documentation: in-app reference page for the template
- Maintenance: standalone downtime page
- ComingSoon: standalone pre-launch page
- NotFound: 404 error page

## Tech stack

- Angular 19 with standalone components and the new control flow syntax
- Tailwind CSS v4 (CSS-first configuration)
- TypeScript 5.6 in strict mode
- `@angular/service-worker` 19.2 for the PWA build
- Angular Router with lazy loaded routes and a guard on the app area
- Transloco 8.3 for i18n (en, es, pt-BR)
- ApexCharts 5 via ng-apexcharts 1.15
- TanStack Angular Table 8.21
- Quill 2 through ngx-quill 27 for rich text
- flatpickr 4.6 date picker
- Reactive forms for validation

## Requirements

- Node.js 18 or newer
- npm (the Angular CLI comes from the local devDependencies)

## Getting started

```bash
npm install
npm start      # ng serve at http://localhost:4200
```

Authentication is simulated in an Angular service, so no backend is required. Demo credentials:

- `[email protected]` / `admin123`
- `[email protected]` / `user123`

## Build for production

```bash
npm run build
```

The Angular CLI writes the production build to `dist/`. The service worker is enabled in the production configuration, so test the PWA against the built output rather than `ng serve`.

## Project structure

```
public/
├── assets/i18n/       en.json, es.json, pt-BR.json
└── manifest.webmanifest, pwa-*.png
src/
├── app/
│   ├── components/    layout (header, sidebar, footer) and shared UI
│   ├── core/          services, guards and mock data
│   ├── pages/         25 standalone page components
│   ├── app.routes.ts  route table with lazy loading
│   └── app.config.ts  providers (router, transloco, service worker)
└── styles.css
```

## Theming and customization

Styling is Tailwind CSS v4 with CSS-first configuration. `src/styles.css` imports Tailwind, declares the dark variant with `@custom-variant dark (&:is(.dark *))` and defines the design tokens inside `@theme`: the Outfit font family, extra breakpoints, a title type scale and the full brand color ramp. Below that sit the runtime design tokens, declared as CSS custom properties: the brand ramp (`--color-brand-25` through `--color-brand-950`, with 500 as the primary #465fff), the state colors, and semantic surface tokens under the `--tx-` prefix (sidebar, header, card, border, text). Dark mode swaps the `--tx-` values at runtime, driven by a class on the root element. To rebrand the template, change the brand ramp and the `--tx-` values together.

## Internationalization

Three locales ship in `public/assets/i18n/`: English, Spanish and Brazilian Portuguese. Transloco loads them at runtime and the header switcher persists the user choice.

## The same layout in other stacks

This repository is one of 4 implementations of the same Tailwind admin layout. Every one has the same 25 views and the same visual identity, and all of them are free:

- React 19: https://github.com/danilo62x/tailwind-admin-react
- Vue 3: https://github.com/danilo62x/tailwind-admin-vue3
- Static HTML: https://github.com/danilo62x/tailwind-admin-html

The full catalog of free and paid templates is at https://template.dev.br

## Support this project

This template is free and MIT licensed. If it saves you time, you can support the work with a donation at https://template.dev.br/doar?template=tailwind-admin-angular

## License

[MIT](./LICENSE), copyright 2026 Danilo Quinelato.