Install Preline UI with Astro using Tailwind CSS

1. Install Preline UI

   Install Preline using your preferred package manager.

   Terminal

                           
                             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, e.g. projects_root_directory/src/styles/global.css.

   global.css

                           
                             @import "tailwindcss";
   
                             @source "../../node_modules/preline";
   
                             /* Preline UI */
                             @import 'preline/variants.css';
   
                             /* Optional Preline UI Datepicker Plugin */
                             /* @import 'preline/src/plugins/datepicker/styles.css'; */
   
                             /* Plugins */
                             /* @plugin "@tailwindcss/forms"; */
   
                             /* Preline Themes */
                             @import "preline/css/themes/theme.css";
                           
                         

   Check out the Theme docs to learn more about Preline Themes.

3. Add type definitions for Preline

   Create the global.d.ts file in the project root directory, e.g. 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';
                             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 Preline UI JavaScript loader

   Create the Preline UI JavaScript loader inside the project: projects_root_directory/src/scripts/preline.ts

   preline.tsx

                           
                             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');
                                 window.DataTable = dtModule.default ?? dtModule;
   
                                 const vcModule = await import('vanilla-calendar-pro');
                                 window.VanillaCalendarPro = vcModule.Calendar ?? vcModule.default ?? vcModule;
   
                                 await import('preline');
                                 window.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. Add the Preline UI JavaScript

   Include Preline UI JavaScript to the projects_root_directory/src/layouts/Layout.astro file.

   --- import "../styles/global.css"; --- <!doctype html> <html lang="en"> ... <body> ... <slot /> </body> <!-- Preline UI --> <script> import '../scripts/preline.ts'; </script> </html>
   Layout.astro

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

Community Workarounds

Check out this section for community-shared tips and tricks. It's a spot for finding those handy hacks and solutions that enhance your experience with Preline UI.