Tailwind Ng
Tailwind CSS components for Angular.
:rocket: Motivation
Tailwind NG is an open source UI components library that aims to provide a seamless and robust integration of Tailwind CSS components with Angular 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 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:
- Prerequisites:
- Node.js v22 or later
- Angular v19 or later
- Tailwind CSS v4 or later
- For more information on how to install and use Tailwind NG, please refer to the documentation.
: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:
