Install Preline UI with Adonis using Tailwind CSS

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/resources/css/app.css, the CSS entrypoint the web starter kit already wires into Vite. Also point @source at your own view templates. Edge templates are scanned automatically as long as they are not excluded by .gitignore, but declaring the path explicitly keeps class detection reliable regardless of where your .edge files live.

   app.css

                             
                               @import "tailwindcss";
   
                               @import "preline/variants.css";
                               @source "../../node_modules/preline/dist/*.js";
                               @source "../views";
   
                               /* 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

   If your Vite entrypoint is TypeScript, create a global.d.ts file for the shared window typings, for example projects_root_directory/resources/js/global.d.ts. Skip this step if resources/js/app.js stays plain JavaScript, which is what the web starter kit ships by default.

   global.d.ts

                             
                               import { JQueryStatic } from 'jquery'
                               import type { DataTable } from 'datatables.net'
                               import type { Dropzone } from 'dropzone'
                               import noUiSlider from 'nouislider'
                               import * as VanillaCalendarPro from 'vanilla-calendar-pro'
                               import { HSStaticMethods } from 'preline/non-auto'
   
                               declare global {
                                 interface Window {
                                   // Optional third-party libraries
                                   _: typeof import('lodash')
                                   $: JQueryStatic
                                   jQuery: JQueryStatic
                                   DataTable: typeof DataTable
                                   Dropzone: typeof Dropzone
                                   noUiSlider: typeof noUiSlider
                                   VanillaCalendarPro: typeof VanillaCalendarPro
   
                                   // Preline UI
                                   HSStaticMethods: typeof HSStaticMethods
                                 }
                               }
   
                               export {}
                             
                           

4. Load the entrypoint from your layout

   Edge templates only render HTML on the server, so the script that initializes Preline UI has to ship from the Vite entrypoint your shared layout loads with the @@vite tag, for example in projects_root_directory/resources/views/components/layout.edge.

   layout.edge

                             
                               <head>
                                 ...
                                 @@vite(['resources/css/app.css', 'resources/js/app.js'])
                               </head>
                             
                           

   Edge navigation is a full page load, unlike Inertia or an SPA, so there is no client-side router or DOM diffing to account for. A single autoInit call that runs once the DOM is ready is enough, since there is no per-navigation or per-component re-init step to write.

5. Add Preline UI to the app entry

   Expose any optional third-party dependencies on window from their own module, imported before preline itself, then call autoInit once the DOM is ready. The separate module matters: within a single file, ES modules evaluate all of that file's own static imports as one batch before any of the file's own top-level statements run, so assigning window.jQuery = jQuery and importing preline in the same file does not reliably run the assignment first.

   resources/js/vendor-globals.js

                             
                               import jQuery from 'jquery'
                               import DataTable from 'datatables.net'
                               import _ from 'lodash'
                               import * as VanillaCalendarPro from 'vanilla-calendar-pro'
                               import noUiSlider from 'nouislider'
                               import Dropzone from 'dropzone'
   
                               window.jQuery = jQuery
                               window.$ = jQuery
                               window.DataTable = DataTable
                               window._ = _
                               window.VanillaCalendarPro = VanillaCalendarPro
                               window.noUiSlider = noUiSlider
                               window.Dropzone = Dropzone
                             
                           

   resources/js/app.js

                             
                               import './vendor-globals.js'
                               import { HSStaticMethods } from 'preline/non-auto'
   
                               document.addEventListener('DOMContentLoaded', () => {
                                 HSStaticMethods.autoInit()
                               })
                             
                           

   preline/non-auto is the better entry here because initialization is handled explicitly. The default preline entry registers per-plugin window load listeners, while preline/non-auto does not. Pairing the non-auto entry with the explicit DOMContentLoaded call keeps initialization timing under the application's control and avoids a second automatic initialization path.

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

Specific guide

Continue with a focused guide for wiring Preline UI JavaScript plugins into this framework.