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/inertia/css/app.css.

   main.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"; */
   
                               /* Third-party 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/inertia/types/global.d.ts.

   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 type { IStaticMethods } from 'preline/dist'
   
                               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: IStaticMethods
                                 }
                               }
   
                               export {}
                             
                           

4. Reinitialize on component mount

   Re-run Preline UI initialization from projects_root_directory/inertia/plugins/preline.ts whenever mounted Vue components need it.

   preline.ts

                             
                               import type { App } from 'vue'
   
                               export default {
                                 install: (app: App) => {
                                   app.mixin({
                                     async mounted() {
                                       await import('preline/dist')
                                       window.HSStaticMethods.autoInit()
                                     }
                                   })
                                 }
                               }
                             
                           

5. Add Preline UI to the app entry

   Import and attach the required external libraries in projects_root_directory/inertia/app/app.ts, then register the Preline plugin.

   app.ts

                             
                               ...
   
                               import $ from 'jquery'
                               import _ from 'lodash'
                               import noUiSlider from 'nouislider'
                               import 'datatables.net'
                               import 'dropzone/dist/dropzone-min.js'
                               import * as VanillaCalendarPro from 'vanilla-calendar-pro'
   
                               window._ = _
                               window.$ = $
                               window.jQuery = $
                               window.DataTable = $.fn.dataTable
                               window.noUiSlider = noUiSlider
                               window.VanillaCalendarPro = VanillaCalendarPro
                               window.Dropzone = window.Dropzone || {}
   
                               import PrelinePlugin from '../plugins/preline'
   
                               ...
   
                               createInertiaApp({
                                 ....
   
                                 setup({ el, App, props, plugin }) {
                                   createSSRApp({ render: () => h(App, props) })
                                     .use(plugin)
                                     .use(PrelinePlugin)
                                     .mount(el)
                                 }
                               })
                             
                           

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