FormlyTailwindcss

Installation

Create a new Angular app or use your existing one.

1. Install TailwindCSS and Forms plugin

# select forms plugin
ng add ngx-tailwind

# alternative install via
npm install -D @tailwindcss/forms

2. Install Formly

ng add @ngx-formly/schematics

3. Install Formly TailwindCSS theme

npm i @notiz/formly-tailwindcss

4. Import FormlyTailwindcssModule

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'

Tailwind purge

| 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' |