https://github.com/william-mba/tailwind-ng

Tailwind CSS components for Angular.
https://github.com/william-mba/tailwind-ng

angular css developer frontend ngxtw tailwind-css tailwindcss tailwindui typescript web webapp webapplication webcomponents

Last synced: about 2 months ago
JSON representation

Tailwind CSS components for Angular.

• Host: GitHub
• URL: https://github.com/william-mba/tailwind-ng
• Owner: william-mba
• License: mit
• Created: 2024-05-26T05:30:01.000Z (over 1 year ago)
• Default Branch: next
• Last Pushed: 2025-03-31T13:15:00.000Z (11 months ago)
• Last Synced: 2025-03-31T13:23:33.153Z (11 months ago)
• Topics: angular, css, developer, frontend, ngxtw, tailwind-css, tailwindcss, tailwindui, typescript, web, webapp, webapplication, webcomponents
• Language: TypeScript
• Homepage: https://tailwind-ng.com
• Size: 93 MB
• Stars: 12
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Security: SECURITY.md

Awesome Lists containing this project

• fucking-awesome-angular - tailwind-ng - Open‑source library integrating Tailwind CSS with Angular for seamless, scalable, and joyful UI development. (Third Party Components / UI Libraries built on Tailwind CSS)
• awesome-angular - tailwind-ng - Open‑source library integrating Tailwind CSS with Angular for seamless, scalable, and joyful UI development. (Third Party Components / UI Libraries built on Tailwind CSS)

README

          


  

    

    
Tailwind NG

  





Beautiful, fast and accessible Tailwind CSS components for Angular.







![tailwind-ng](https://badgen.net/bundlephobia/minzip/tailwind-ng)

[![Build Status](https://dev.azure.com/artandev/Labs/_apis/build/status%2Ftailwind-ng?branchName=next)](https://dev.azure.com/artandev/Labs/_build/latest?definitionId=2&branchName=main)

![tree-shaking](https://badgen.net/bundlephobia/tree-shaking/tailwind-ng)



## :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