Beautiful, fast and accessible Tailwind CSS components for Angular.
[](https://dev.azure.com/artandev/Labs/_build/latest?definitionId=2&branchName=main)
## :rocket: Motivation
Tailwind NG is an open source UI components library that aims to provide a seamless and robust integration of [Tailwind CSS](https://tailwindcss.com/) components with [Angular](https://angular.dev) to make building a great UI easier and joyful at any scale.
## :bulb: Why Tailwind NG ?
Tailwind NG is built with state of the art design principles to provide components that are:
- **Beautiful**: well-designed components that look great out of the box.
- **Fast and lightweight**: for optimal responsiveness and rendering speed at any scale.
- **Reliable**: well-tested to ensure consistent performance and predictable behaviors.
- **Accessible**: built-in accessibility features compliant to [W3C WAI-ARIA](https://www.w3.org/TR/wai-aria/) standards.
- **Customizable**: fully customizable, extensible and composable to fit your specific needs.
## :heart: Contributing
We welcome contributions to Tailwind NG! If you have ideas, suggestions, or bug fixes, please check out our [contributing guide]().
## :sparkles: Getting Started
To get started with Tailwind NG, you can follow the steps below:
0. Prerequisites:
- [Node.js](https://nodejs.org/en/) v22 or later
- [Angular](https://angular.io) v19 or later
- [Tailwind CSS](https://tailwindcss.com/docs/installation) v4 or later
1. For more information on how to install and use Tailwind NG, please refer to the [documentation](https://tailwind-ng.com/docs/getting-started).
## :package: Packages reference
Tailwind NG is modular and it is composed of the following packages:
| Name | Description | Version (latest) | Size (min+zip) |
| --------------------------------------------- | ------------------------------------------------------------------------------------ | --------------------------------------------------------- | ----------------------------------------------------- |
| [tailwind-ng][tailwind-ng-npm] | Provides a set of well-designed UI components out of the box. | ![tailwind-ng-version][tailwind-ng-version] | ![tailwind-ng-size][tailwind-ng-minzip] |
| [@tailwind-ng/core][tailwind-ng-core-npm] | Provides core utilities and abstractions. | ![tailwind-ng-core-version][tailwind-ng-core-version] | ![tailwind-ng-core-size][tailwind-ng-core-minzip] |
| [@tailwind-ng/themes][tailwind-ng-themes-npm] | Provides a set of pre-built themes available via the CDN and npm. | ![tailwind-ng-themes-version][tailwind-ng-themes-version] | ![tailwind-ng-themes-size][tailwind-ng-themes-minzip] |
| @tailwind-ng/icons | This package will provides a set of reusable icons from Heroicons and googles fonts. | TODO | TODO |
## :sparkle: Credits
Tailwind NG is made possible thanks to the inspirations from the following projects:
- [Tailwind UI](https://tailwindui.com/)
- [Material Design](https://m3.material.io/)
[tailwind-ng-version]: https://badgen.net/npm/v/tailwind-ng
[tailwind-ng-npm]: https://www.npmjs.com/package/tailwind-ng
[tailwind-ng-minzip]: https://badgen.net/bundlephobia/minzip/tailwind-ng
[tailwind-ng-core-npm]: https://www.npmjs.com/package/@tailwind-ng/core
[tailwind-ng-core-version]: https://badgen.net/npm/v/@tailwind-ng/core
[tailwind-ng-core-minzip]: https://badgen.net/bundlephobia/minzip/@tailwind-ng/core@latest
[tailwind-ng-themes-npm]: https://www.npmjs.com/package/@tailwind-ng/themes
[tailwind-ng-themes-version]: https://badgen.net/npm/v/@tailwind-ng/themes
[tailwind-ng-themes-minzip]: https://badgen.net/bundlephobia/minzip/@tailwind-ng/themes@latest
