Update v4.2 - New components, 10+ framework guides, and quality improvements. Visit Changelog

........ Github
Figma X (Twitter)

Install Preline UI with Angular using Tailwind CSS

Install Preline UI with Tailwind CSS in Angular projects, including JavaScript plugin setup, Angular configuration, global styles, and optional dependencies.

Installation

Please note that the plugin has been tested with the 19.2.0 version of the framework. The framework was installed using the standard ng new <project-name> command. Components were created by ng generate component <component-name> command.
If you are using your own project structure or a different version, pay attention to the file paths and features of your version!

Angular quick setup

If Tailwind CSS is not set up yet, start with the official Angular + Tailwind CSS guide first.

Preline UI + Angular

Some components rely on third-party libraries. The setup below assumes full Preline UI usage with those dependencies preloaded. If you do not plan to use those components, you can remove the related libraries from your configuration.

  1. Install Preline UI

    Install preline with your preferred package manager.

    Terminal 
                              
                            npm install preline

    Preline UI uses the Tailwind CSS Forms plugin across form components. Install it if you have not already: npm install -D @tailwindcss/forms

  2. Include Preline CSS

    Import Preline into projects_root_directory/src/styles.css.

    styles.css 
                              
                            @import "tailwindcss";
                            
                            @import "preline/variants.css";
                            @source "../node_modules/preline/dist/*.js";

                            /* Optional Preline UI Datepicker Plugin */
                            /* @import "preline/src/plugins/datepicker/styles.css"; */

                            /* Plugins */
                            /* @plugin "@tailwindcss/forms"; */

                            /* Preline Themes */
                            @import "./themes/theme.css";

    See the Theme docs to learn more about Preline Themes.

  3. Add type definitions for Preline

    Create a global.d.ts file for the shared window typings, for example projects_root_directory/src/global.d.ts.

    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

    Register the required external libraries in projects_root_directory/angular.json, then load Preline UI.

    angular.json 
                              
                            {
                              ...
                              "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. Reinitialize on route changes

    Re-run Preline UI initialization after Angular route changes in projects_root_directory/src/app/app.component.ts.

    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

Preline UI ships with a small set of opinionated base styles. If you want them in your project, add them to your CSS file. These defaults used to come bundled with Tailwind CSS v3, so they are still available as an optional layer in Preline UI.

CSS 
                        
                          /* 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);

© 2026 Preline Labs.