@notiz/formly-tailwindcss

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'