Install Preline UI with Adonis 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 projects_root_directory/inertia/css/app.css file.

   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"; */
                         
                       

3. Add type definitions for Preline

   Create the global.d.ts file in the project root directory, e.g. 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. Add a reinitialization helper

   Add code that reinitializes the components every time the page is refreshed to projects_root_directory/inertia/plugins/preline.ts

   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 the Preline UI JavaScript

   Add the Preline UI JavaScript in your app entry point projects_root_directory/inertia/app/app.ts

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