# angular-tailwind is an admin dashboard starter, and three of its features are still unchecked

> angular-tailwind is a free Angular 22 and Tailwind CSS 4 admin dashboard starter kit built by Luciano Oliveira to learn Tailwind. The shell, dark theme, auth module, dashboard, RTL support and Playwright end-to-end tests are done; route guards, animations and Jasmine unit tests are not.

**lannodev/angular-tailwind** — Angular & Tailwind CSS Admin Dashboard Starter Kit, Free and Open Source

- Repository: https://github.com/lannodev/angular-tailwind
- Website: https://at.lanno.dev
- Stars: 517 · Forks: 211
- Language: TypeScript
- License: MIT
- Published: 2026-10-22 · Updated: 2026-10-22 · Language: en
- Canonical page: https://hysenlabs.com/projects/lannodev-angular-tailwind

## A learning project that turned into a usable starter kit

The motivation section says it plainly. For the author, the best strategy for learning new skills is to practice, and the project was created to learn more about Tailwind CSS using his favourite framework, Angular.

That origin explains the shape of the repository. It is a starter kit in the sense that the layout, the theme system and the chart components are already assembled, and it is a personal project in the sense that the author is explicit about the state. The README carries a line stating that the project is not finished yet, and a demo at at.lanno.dev.

The description calls it an Angular and Tailwind CSS Admin Dashboard Starter Kit, Free and Open Source, and the package manifest says the same at version 0.11.0 with a private flag, which means the package is not published to a registry and is only consumed from the repository. The author is Luciano Oliveira, the licence is MIT, and the homepage field in the manifest points at the GitHub repository rather than the demo.

The topic tags list the things you would expect and a few you would not: admin-dashboard, angular, collaborate, dashboard, free, open-source, student-vscode, tailwind, tailwindcss. The student-vscode tag is the giveaway that this is a teaching project, which is useful context for how you should read the code.

For an engineer deciding whether to adopt it, the useful framing is that this is one developer's Tailwind learning exercise that other developers now use as a starting point, and the feature list is honest about what is and is not there.

## The feature list separates what works from what does not

The features list is a checklist with boxes, and the three unchecked boxes matter as much as the ticked ones.

What is done: Sidebar, Dark Theme, Navbar, Footer, Auth Module, Dashboard Module, Standalone components, Angular Signals, Multi Theme, Tests E2E, and RTL support.

What is not: Guards, Animations, and Jasmine tests.

Those three are the practical limitations of the kit, and each one is a category of work you will end up doing yourself.

Guards means route protection is not implemented. The Auth Module exists, so there is a login screen and an authentication flow, but nothing is stopping a user from navigating to a protected route directly. In a real application you need Angular guards, and you are writing them from scratch rather than adapting them.

Animations means there is no motion layer. That is a smaller gap, but in an admin dashboard the absence of transitions is immediately visible next to a competitor's product.

Jasmine tests means there are no unit tests, even though the toolchain is set up for them. The repository has karma.conf.js and tsconfig.spec.json, so the Angular testing scaffold is present, and the test script is ng test. But the checkbox is unticked, so the starting point has no unit test suite to extend. The Playwright end-to-end tests are the checked item, and they cover the flows rather than the components.

The version badges show Angular 22 and Tailwind 4, which are current majors rather than the pinned older versions that make many starter kits rot.

## The command set covers dev server, lint, format and end-to-end tests

The commands table is short and each entry maps to a script in the package manifest.

```json
    "start": "ng serve --open",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "test:e2e": "npx playwright test --ui",
    "lint": "ng lint"
```

npm start starts the server in dev mode and, because of the --open flag on ng serve, it opens a browser for you. npm run lint runs ESLint on the project. npm run prettier runs prettier on the entire src folder, npm run prettier:verify runs prettier-check and throws an error if it fails, and npm run prettier:staged runs prettier on only the staged, changed files. npm run test:e2e runs the Playwright end-to-end test with the UI open, which is the interactive mode rather than the headless one.

The prettier scripts are worth a look because of the glob they use. The prettier and prettier:verify scripts target `src/{app,environments}/**/*{.ts,.html,.scss,.json}`, and the staged variant uses pretty-quick to run the same formatter over the changed files only. The plugin that makes this work is prettier-plugin-tailwindcss, which automatically sorts classes based on the recommended class order, so a class list in a template comes out in the same order every time without anyone thinking about it.

That is a small thing that pays for itself. Without it, Tailwind class ordering is the single most common source of diff noise in a Tailwind codebase, and the fact that this starter ships the plugin means the sorting behaviour is already in place when you copy the project.

There is also a build script and a watch script for a development configuration, and the ng script simply exposes the Angular CLI.

## Tailwind 4 with the official plugin packages, not a hand-rolled config

The dependency list shows the Tailwind 4 setup clearly, and it is worth noticing that the Tailwind packages are all under the @tailwindcss scope.

The runtime dependencies include @tailwindcss/postcss, @tailwindcss/forms, @tailwindcss/typography and @tailwindcss/aspect-ratio. Those are the first-party Tailwind packages rather than community plugins, and the presence of @tailwindcss/postcss is the marker of Tailwind 4, where the PostCSS plugin moved into the main package.

The configuration file at the repository root is a .postcssrc.json, which is the expected shape for a Tailwind 4 project wired through PostCSS.

The remaining Tailwind-related package is tailwind-scrollbar, which is a community plugin for styling scrollbars, and it sits in the dev dependencies. That is a hint about the visual design of the shell, since a dashboard with custom scrollbars is a deliberate look rather than a default.

The Angular side is on 22, with the standard packages at ^22.0.2: core, common, compiler, forms, platform-browser, platform-browser-dynamic, router and animations. The @angular/animations package is present even though the animations feature is unticked, so the dependency is there when you need it.

Standalone components and Angular Signals are both listed as done, which means the code is not built on NgModules and the state handling is signal-based rather than RxJS subjects. rxjs is still a dependency, at ^7.8.2, because Angular itself requires it, and the interop between signals and observables is a normal part of a current Angular codebase.

## Charts, inlined SVG and toast notifications are the three named integrations

The dependencies table names three runtime packages and explains each one, which is a short list for a dashboard.

angular-svg-icon provides a means to inline SVG files to allow for them to be easily styled by CSS and code. That matters for an icon system: an inlined SVG can take a Tailwind text colour class, whereas an icon font or an image file cannot.

apexcharts is described as a modern and interactive open-source charts library, and ng-apexcharts is the Angular wrapper for ApexCharts to build interactive visualizations in Angular. The split is the usual one, a charting library plus its framework adapter, and the adapter is what lets the chart component bind to Angular inputs and signals.

The third is ngx-sonner, which is a toast notification library. It is not in the README's dependency table but it is in the package manifest at ^2.0.1, so the starter has notifications wired up.

The visual assets come from three named sources. The project uses Hero Icons for icons, Hero Patterns for backgrounds, and Popsys illustrations. All three are free to use commercially, and the last one is worth flagging because the illustration sets from Popsys are the kind of thing that ends up in a product's marketing site rather than its own admin panel.

The repository also has an src/assets/preview/ directory with a logo.png and a preview.gif, which is what the README embeds at the top.

For an RTL-supporting layout, the icon set matters more than it would in a left-to-right-only application, since directional icons need mirroring, and inlining them is what makes that possible.

## The repository layout shows an Angular 22 workspace with Playwright on top

The top-level entries describe a standard Angular workspace with the end-to-end testing moved to Playwright.

There is angular.json for the workspace configuration, tsconfig.json with tsconfig.app.json and tsconfig.spec.json for the application and spec compilations, and src/ for the application. The .eslintrc.json is the ESLint configuration, and .prettierrc with .prettierignore handles formatting. There is an .editorconfig for editor settings and a .gitignore.

The testing setup is the notable part. playwright.config.ts sits at the root alongside a tests-e2e/ directory, and karma.conf.js is also present for the Angular unit test runner. The two coexist because the unit test scaffold is inherited from the Angular CLI while the end-to-end tests use Playwright, and the test:e2e script invokes npx playwright test --ui rather than anything from Karma.

The package.json also shows the project is private, so npm publish is not an option and the kit is consumed by cloning it. The version is 0.11.0, and there is a CHANGELOG.md and a CONTRIBUTING.md alongside the LICENSE file.

There is a .github/ directory for the workflow definitions, and the README notes the project uses Hero Icons, Hero Patterns and Popsys illustrations, with a disclaimer that the Tailwind name and logos are trademarks of Tailwind Labs Inc. and the Angular name and logos are trademarks of Google. That disclaimer is the correct thing for a project that combines both toolchains, and it also tells you the kit does not redistribute either trademark.

## Where angular-tailwind is the wrong tool

The first wrong-tool case is a team that needs a complete, defended admin application on day one. The auth module is there, the route guards are not. That gap is not a detail, it is the difference between a login screen and an access control system, and shipping it unfilled means the first thing you write is the part that keeps unauthorised users out of the admin area.

The second wrong-tool case is a team that wants a design system rather than a layout. This is a starter kit with a specific visual design, not a component library. If your requirement is a set of accessible, composable primitives that your own designers will restyle, you want a component library instead, and you will spend your time fighting the starter's opinions about spacing and colour.

The third wrong-tool case is a project that is not Angular. The whole thing is Angular, down to the standalone components and the signal-based state, and there is nothing here you can lift into a React or Vue application other than the Tailwind class conventions.

For the alternative approach, the difference in approach is between a themed starter and a component library. A component library gives you a set of composable primitives with a theming API, and you assemble the layout yourself. This starter gives you a finished layout, a theme switcher, a chart page and a test harness, and you replace the pieces you need. For a side project or an internal tool, the finished layout is worth far more than the composability. For a product with a design team, the opposite is true.

There is also the option of the official Angular tooling plus Tailwind configured by hand, which costs an afternoon and gives you nothing you did not choose to have.

## MIT licensed, a 0.x version, and a project that says it is unfinished

The licence is MIT, with a LICENSE file at the root of the repository.

The version in the package manifest is 0.11.0 and the repository has no GitHub releases, so the changelog is the CHANGELOG.md file rather than a tag history. The last push to the repository was on 2026-10-19, so the tree is being worked on, and the default branch is main.

The dependency versions tell you how the project handles upgrades. The Angular packages are on ^22.0.2 and Tailwind is on the 4.x line with @tailwindcss/postcss at ^4.3.1. Caret ranges on a 22.x Angular mean a minor update arrives on npm without a code change, which is the modern Angular release model, and it is the reason the project can stay on Angular 22 and Tailwind 4 while still being current.

The test:e2e script runs npx playwright test --ui, which means the Playwright browsers are fetched on demand rather than pinned in the repository, and the CI setup in .github/ will have to install them.

Two practical notes for anyone picking this up. First, the repository has a student-vscode topic tag, which tells you the code is written as teaching material, so expect clear but not always production-grade structure, and do not read a file's shape as an architectural decision. Second, the feature list explicitly says the project is not finished yet, which is unusual candour in a starter kit README and is genuinely useful: you can see exactly which boxes are ticked before you clone anything.

The demo at at.lanno.dev is the fastest way to decide whether the design suits you, and the source is there to be changed.

## Conclusion

angular-tailwind suits a developer who wants an Angular admin interface with Tailwind already wired up, with a sidebar, a dark and multi-theme setup, an auth module and working end-to-end tests to copy, and who is comfortable filling in the missing pieces. It does not suit a team that needs route guards, animations or unit tests out of the box, since all three are listed as unfinished. Before adopting, run npm start and npm run test:e2e to confirm the dev server and Playwright setup work on your machine, and expect to write the guard and animation layers yourself.

## FAQ

### What is angular-tailwind?

It is an Angular 22 and Tailwind CSS 4 admin dashboard starter kit, free and open source, created by Luciano Oliveira to learn Tailwind. It ships a sidebar, navbar, footer, auth module, dashboard module, dark and multi theme support, standalone components, Angular Signals and RTL support.

### Does angular-tailwind include route guards and unit tests?

No. The feature list marks Guards, Animations and Jasmine tests as unfinished. There is a Karma and Angular test scaffold, and the checked testing item is the Playwright end-to-end suite, so unit tests are yours to write.

### How do I run the angular-tailwind dev server and its tests?

npm start runs ng serve with the browser opened automatically, npm run lint runs ESLint, and npm run test:e2e runs Playwright in interactive UI mode. The formatting scripts are npm run prettier, npm run prettier:verify and npm run prettier:staged.

### Which charting and icon libraries does angular-tailwind use?

apexcharts with the ng-apexcharts Angular wrapper for charts, angular-svg-icon to inline SVG files so they can be styled by CSS and code, and ngx-sonner for toast notifications. Icons and illustrations come from Hero Icons, Hero Patterns and Popsys.

## Sources

- [Issues](https://github.com/lannodev/angular-tailwind/issues)
- [lannodev/angular-tailwind on GitHub](https://github.com/lannodev/angular-tailwind)
- [License: MIT](https://github.com/lannodev/angular-tailwind/blob/main/LICENSE)
- [Project website](https://at.lanno.dev)
- [README](https://github.com/lannodev/angular-tailwind/blob/main/README.md)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/lannodev-angular-tailwind