Install Preline UI with Angular using Tailwind CSS

1. Install Preline UI

   Install Preline using your preferred package manager.

                       
                         npm install preline
                       
                     

   Please note, Preline UI uses Tailwind CSS Forms plugin in all form components. Don't forget to install it, if you haven't done so already: npm install -D @tailwindcss/forms

2. Include Preline CSS

   Include Preline in your global.css file.

                       
                         @import "tailwindcss";
   
                         @import "preline/variants.css";
   
                         /* Optional Preline UI Datepicker Plugin */
                         /* @import "preline/src/plugins/datepicker/styles.css"; */
   
                         /* Plugins */
                         /* @plugin "@tailwindcss/forms"; */
                         /* @plugin "@tailwindcss/aspect-ratio"; */
                       
                     

3. Add type definitions for Preline

   Create the global.d.ts file in the project root directory, e.g. projects_root_directory/src/global.d.ts

                       
                         import type { IStaticMethods } from "preline/dist";
   
                         declare global {
                           interface Window {
                             // Optional third-party libraries
                             _;
                             $: typeof import("jquery");
                             jQuery: typeof import("jquery");
                             DataTable;
                             Dropzone;
                             VanillaCalendarPro;
   
                             // Preline UI
                             HSStaticMethods: IStaticMethods;
                           }
                         }
   
                         export {};
                       
                     

4. Add the Preline UI JavaScript

   Include Preline UI JavaScript to the projects_root_directory/angular.json file.

                         
                           {
                             ...
                             "projects": {
                               "angular": {
                                 ...
                                 "architect": {
                                   "build": {
                                     ...
                                     "options": {
                                       ...
                                       "scripts": [
                                         // Optional third-party libraries
                                         "node_modules/jquery/dist/jquery.min.js",
                                         "node_modules/lodash/lodash.min.js",
                                         "node_modules/dropzone/dist/dropzone-min.js",
                                         "node_modules/nouislider/dist/nouislider.min.js",
                                         "node_modules/datatables.net/js/dataTables.min.js",
                                         "node_modules/vanilla-calendar-pro/index.js",
   
                                         // Preline UI
                                         "node_modules/preline/dist/index.js"
                                       ],
                                       ...
                                     }
                                     ...
                                   }
                                   ...
                                 }
                                 ...
                               }
                               ...
                             }
                             ...
                           }
                         
                       

5. Add a reinitialization helper (optional)

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

                         
                           ...
                           import { Router, Event, NavigationEnd } from '@angular/router';
   
                           @Component({
                             ...
                           })
   
                           export class AppComponent {
                             constructor(private router: Router) {
                               ...
                             }
   
                             ngOnInit() {
                               this.router.events.subscribe((event: Event) => {
                                 if (event instanceof NavigationEnd) {
                                   setTimeout(() => window.HSStaticMethods.autoInit(), 100);
                                 }
                               });
                             }
                           }
                         
                       

Optional Preline UI Styles

                  
                    /* Adds pointer cursor to buttons */
                    @layer base {
                      button:not(:disabled),
                      [role="button"]:not(:disabled) {
                        cursor: pointer;
                      }
                    }

                    /* Defaults hover styles on all devices */
                    @custom-variant hover (&:hover);