Set up FlyonUI with Angular using Tailwind CSS

Set up FlyonUI with Angular using Tailwind CSS

Integrate FlyonUI with Angular and Tailwind CSS to create a modern, responsive UI, streamlining your development process efficiently.

Installation

The plugin has been tested with the latest framework version (v18.2.0), installed via the standard `ng new project-name` command. Components were created using `ng generate component component-name`. If you're using a custom project structure, pay attention to file paths!

Quick Angular setup

A JavaScript framework for dynamic web applications. If you haven't set up Tailwind CSS yet, check out Angular Tailwind CSS installation guides.

1
Install FlyonUI
Install flyonui via npm.
npm i flyonui

Configure FlyonUI JavaScript paths

Add the path to FlyonUI JavaScript files in your tailwind.config.js file.

// tailwind.config.js
module.exports = {
  content: [
    './node_modules/flyonui/dist/js/*.js',
  ],
  plugins: [
    require('flyonui'), 
    require('flyonui/plugin')
  ],
}

Add the FlyonUI JavaScript

Include FlyonUI JavaScript to the root_directory/angular.json file.

{
  ...
  "projects": {
    "angular": {
      ...
      "architect": {
        "build": {
          ...
          "options": {
            ...
            "scripts": [
              "node_modules/flyonui/flyonui.js"
            ],
            ...
          }
          ...
        }
        ...
      }
      ...
    }
    ...
  }
  ...
}

Add a reinitialization helper

Add code that reinitializes the components every time the page is refreshed to your app. root_directory/src/app/app.component.ts.

...
import { Router, Event, NavigationEnd } from '@angular/router';

import { IStaticMethods } from 'flyonui/flyonui';
declare global {
  interface Window {
    HSStaticMethods: IStaticMethods;
  }
}

@Component({
  ...
})

export class AppComponent {
  constructor(private router: Router) {
    ...
  }

  ngOnInit() {
    this.router.events.subscribe((event: Event) => {
      if (event instanceof NavigationEnd) {
        setTimeout(() => {
          window.HSStaticMethods.autoInit();
        }, 100);
      }
    });
  }
}

Framework guides