ngx-twcss v0.5.4

Resources

• Roadmap
• Components docs
• Live demo

Quick start

0. Prerequisites

Install Tailwind CSS in your Angular project.

1. Install ngx-twcss

npm install ngx-twcss

2. Modify tailwind.config.js

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

3. Enable the animations module

Import provideAnimations from @angular/platform-browser/animations and add it to the providers list in the bootstrapApplication function call.

bootstrapApplication(AppComponent, {
  providers: [
    provideAnimations(),
  ]
});

For NgModule based applications import BrowserAnimationsModule, which introduces the animation capabilities into your Angular root application module.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule
  ],
  declarations: [ ],
  bootstrap: [ ]
})
export class AppModule { }

4. Install forms plugin (if you will use forms elements)

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')
  ]
}

5. Import Ngx-twcss components

For standalone components, import components in your *.component.ts file

@Component({
  standalone: true,
  imports: [
    ...
    // Some components
    Button,
    Icon,
    ButtonGroup,
    Dropdown,
    Badge,
    Avatar,
    ModalDialog
  ],
  ...
})
export class ExampleComponent {
  ...
}

For NgModule based components, import components in your *.module.ts file

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    // Some components
    Button,
    Icon,
    ButtonGroup,
    Dropdown,
    Badge,
    Avatar,
    ModalDialog
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Usage samples

<tw-button>Back</tw-button>
<tw-button>Complete</tw-button>

For more usage samples, please visit the github repo.

Give a Star ⭐️

Thanks to star this library to help increase it reach if you find it helpful or use it in your project.