Awesome

<div align="center"> <a href="https://ngxtw.williammba.com/"> <img src="src/docs/assets/images/ngxtw-logo-doc.png" alt="ngxtw" height="200" /> <h1>NGxTW</h1> </a> </div> <div align="center"> The best way to quickly integrate <a href="https://tailwindui.com/">Tailwind CSS components</a> with <a href="https://angular.dev/">Angular</a>. <br/> <br/> <br/>

</div>

Resources

Quick start

0. Prerequisites

Install Tailwind CSS in your Angular project.

1. Install NGxTW package

Using npm

npm install ngxtw

Using yarn

yarn add ngxtw

2. Modify tailwind.config.js

module.exports = {
  ...
  content: [
    ...
    // add the line bellow
    "./node_modules/ngxtw/**/*.{html,ts}"
  ]

3. Import NGxTW components

If you are using standalone components, import our components in your *.component.ts file

@Component({
  standalone: true,
  imports: [
    ...
    // Some components
    ButtonComponent,
    DropdownComponent,
    BadgeComponent,
  ],
  ...
})
export class DemoComponent {
  ...
}

If you are using NgModule based components, import our components in your *.module.ts file

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    // Some components
    ModalDialogModule,
    ComboboxModule,
    TypographyModule
  ],
  bootstrap: [DemoAppComponent]
})
export class DemoAppModule { }

🎉Congratulations! You are all set 🚀 </br>

What's next ? Visit our website for more details on components.

NOTE

If you imported our forms components, install Tailwind CSS forms plugin.

Install the forms plugin from npm

npm install -D @tailwindcss/forms

Modify tailwind.config.js

module.exports = {
  ...
  plugins: [
    // add the line bellow
    require('@tailwindcss/forms')
  ]
}

Give a star ⭐️

Feel free to give a star to this library if you like it.