Update v5.0 - Preline MCP, AI Prompts, Animated Icons and more. Visit Changelog

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

Install Preline UI with Astro using Tailwind CSS

Install Preline UI with Tailwind CSS in Astro projects, including JavaScript plugin setup, Astro integration, app styles, and optional dependencies.

Installation

Please note that the plugin has been tested with the 7.1.6 version of the framework. The framework was installed using the standard npm create astro@latest command.
If you are using your own project structure or a different version, pay attention to the file paths and features of your version!

Astro quick setup

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

Preline UI + Astro

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

    The Preline UI loader further down this page (and the type definitions before it) assumes the optional third-party libraries used by Datatable, Datepicker, Range Slider, and File Upload are already installed:

    Terminal 
                                
                              npm install jquery lodash dropzone nouislider datatables.net-dt vanilla-calendar-pro

    jquery, lodash and dropzone do not ship their own TypeScript definitions, so the type definitions step below also needs:

    Terminal 
                                
                              npm install -D @types/jquery @types/lodash @types/dropzone

    If you do not plan to use one of those components, skip its library and remove the matching lines from the type definitions and loader below.

  2. Include Preline CSS

    Import Preline into projects_root_directory/src/styles/global.css.

    global.css 
                              
                            @import "tailwindcss";

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

                            /* Optional Preline UI Datepicker Plugin */
                            /* @import "preline/datepicker-styles-utility.css"; */
                          
                            /* Plugins */
                            /* @plugin "@tailwindcss/forms"; */

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

                            /* Optional Preline UI Datatable Plugin: DataTables.net renders its own
                              search/length/paging controls alongside Preline's own; hide the native
                              ones since they can't be disabled through DataTables options alone. */
                            /*
                            .dt-layout-row:has(.dt-search),
                            .dt-layout-row:has(.dt-length),
                            .dt-layout-row:has(.dt-paging) {
                              display: none !important;
                            }
                            */

    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/global.d.ts.

    global.d.ts 
                              
                            import type { JQueryStatic } from 'jquery';
                            import type _ from 'lodash';
                            import type Dropzone from 'dropzone';
                            import type noUiSlider from 'nouislider';
                            import type DataTables from 'datatables.net-dt';
                            import type { Calendar } from 'vanilla-calendar-pro';

                            declare global {
                              interface Window {
                                $: JQueryStatic
                                jQuery: JQueryStatic
                                _: typeof _
                                Dropzone: typeof Dropzone
                                noUiSlider: typeof noUiSlider
                                DataTable: typeof DataTables
                                VanillaCalendarPro: typeof Calendar
                                HSStaticMethods?: {
                                  autoInit: (collection?: string[]) => void
                                }
                              }
                            };

                            export {};

  4. Create a Preline UI loader

    Create a script that registers the required external libraries and initializes Preline UI in projects_root_directory/src/scripts/preline.ts.

    preline.ts 
                              
                            import $ from 'jquery';
                            import _ from 'lodash';
                            import Dropzone from 'dropzone';
                            import noUiSlider from 'nouislider';

                            window.$ = $;
                            window.jQuery = $;
                            window._ = _;
                            window.Dropzone = Dropzone;
                            window.noUiSlider = noUiSlider;

                            async function initPreline() {
                              try {
                                const dtModule = await import('datatables.net-dt');
                                window.DataTable = dtModule.default ?? dtModule;

                                const vcModule = await import('vanilla-calendar-pro');
                                window.VanillaCalendarPro = vcModule.Calendar ?? vcModule.default ?? vcModule;

                                const { HSStaticMethods } = await import('preline/non-auto');
                                HSStaticMethods.autoInit();
                              } catch (e) {
                                console.warn('[preline] initialization error:', e);
                              }
                            }

                            if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', initPreline);
                            else initPreline();

                            document.addEventListener('astro:page-load', initPreline);

  5. Load the Preline UI loader

    Import the loader in projects_root_directory/src/layouts/Layout.astro so Preline UI initializes with the layout.

    Layout.astro

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);

Community workarounds

Explore community-shared fixes, examples, and integration tips for edge cases that come up while using Preline UI.

Build process workaround for Astro projects

Issue #61 by @krankos

© 2026 Preline Labs.