@notiz/formly-tailwindcss

Formly TailwindCSS theme

Usage no npm install needed!

<script type="module">
  import notizFormlyTailwindcss from 'https://cdn.skypack.dev/@notiz/formly-tailwindcss';
</script>

README

FormlyTailwindcss

npm version Node.js CI

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
  1. Install Formly
ng add @ngx-formly/schematics
  1. Install Formly TailwindCSS theme
npm i @notiz/formly-tailwindcss
  1. 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 {}
  1. Add Tailwind purge path './node_modules/@notiz/formly-tailwindcss/esm2015/**/*.js'

Tailwind purge

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