FormlyTailwindcss


Installation

Create a new Angular app or use your existing one.

1. Install TailwindCSS and Forms plugin

``bash


select forms plugin

ng add ngx-tailwind

alternative install via

npm install -D @tailwindcss/forms
`

2. Install Formly

`bash
ng add @ngx-formly/schematics
`

3. Install Formly TailwindCSS theme

`bash
npm i @notiz/formly-tailwindcss
`

4. Import FormlyTailwindcssModule

`ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ReactiveFormsModule } from '@angular/forms';
import { FormlyModule } from '@ngx-formly/core';
import { FormlyTailwindcssModule } from '@notiz/formly-tailwindcss';

@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
AppRoutingModule,
ReactiveFormsModule,
FormlyModule.forRoot({ extras: { lazyRender: true } }),
FormlyTailwindcssModule,
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
`

5. Add Tailwind purge path './node_modules/@notiz/formly-tailwindcss/esm2020/*/.js'

$3

| Usage |  Purge Path |
| ----------------------------------- | -------------------------------------------------------------------- |
| @notiz/formly-tailwindcss | './node_modules/@notiz/formly-tailwindcss/esm2020/lib/*/.js' |
| @notiz/formly-tailwindcss/layouts | './node_modules/@notiz/formly-tailwindcss/esm2020/layouts/*/.js' |
| both | './node_modules/@notiz/formly-tailwindcss/esm2020/*/.js'` |