Install Preline UI with Ruby on Rails using Tailwind CSS

1. Install Preline UI

   Install preline via npm or yarn.

   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. Configure Tailwind CSS

   Update tailwind.config.js files with Preline UI configuration.

   tailwind.config.js

                         
                           /** @type {import('tailwindcss').Config} */
                           module.exports = {
                             content: [
                               './app/helpers/**/*.rb',
                               './app/javascript/**/*.js',
                               './app/views/**/*',
                               './app/views/**/*.erb',
                               './app/views/**/*.html',
                               './node_modules/preline/**/*.js'
                             ],
                             theme: {
                               extend: {},
                             },
                             plugins: [
                               require('preline/plugin'),
                             ],
                           }
                         
                       

3. Configure CSS and JavaScript

   Update your CSS and JavaScript files to include Preline UI with Turbo integration.

   app/assets/stylesheets/application.css

                         
                           @import 'tailwindcss';
                           @import 'preline/variants.css';
   
                           /* Preline Themes */
                           @import "./themes/theme.css";
                         
                       

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

   app/javascript/application.js

                         
                           // ... other imports
                           import "preline"
   
                           // Initialize Preline components after Turbo page loads
                           document.addEventListener('turbo:load', () => {
                             if (window.HSStaticMethods) {
                               window.HSStaticMethods.autoInit();
                             }
                           });
                         
                       

4. Configure Importmap and Copy Preline Files

   Configure Rails Importmap to serve Preline JavaScript and copy the file to the vendor directory.

   config/importmap.rb

                         
                           pin "preline", to: "preline.js", preload: true
                         
                       

   Terminal

                         
                           mkdir -p vendor/javascript
                           cp node_modules/preline/dist/preline.js vendor/javascript/
                         
                       

   Please note, Rails Importmap cannot serve files directly from node_modules/ directory due to security and architectural constraints. Copying to vendor/javascript/ ensures proper integration with Rails' asset pipeline.

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