Docs
Framework Guides
Ruby on Rails

Install Preline UI with Ruby on Rails using Tailwind CSS

Install Preline UI with Tailwind CSS in Ruby on Rails projects, including JavaScript plugin setup, Importmap, layout scripts, and optional dependencies.

Ruby on Rails quick setup

If Tailwind CSS is not set up yet, start with the official Rails + Tailwind CSS guide first.

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

Update Tailwind CSS config

Add Preline UI's content paths and plugin to tailwind.config.js.

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'),
                              ],
                            }

Configure CSS and JavaScript entry files

Update your CSS and JavaScript entry files to load Preline UI and reinitialize it after Turbo page loads.

app/assets/stylesheets/application.css

                          
                            @import 'tailwindcss';
                            @import 'preline/variants.css';

                            /* Preline Themes */
                            @import "./themes/theme.css";

See 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();
                              }
                            });

Configure Importmap and vendor files

Add the Preline pin to Importmap, then copy the JavaScript file into 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/

Rails Importmap cannot serve files directly from node_modules/. Copying the file into vendor/javascript/ keeps it available to the Rails asset pipeline.

Optional Preline UI styles

Preline UI ships with a small set of opinionated base styles. If you want them in your project, add them to your CSS file. These defaults used to come bundled with Tailwind CSS v3, so they are still available as an optional layer in Preline UI.

CSS

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