Install Preline UI with Ember.js using Tailwind CSS

Install Preline UI with Tailwind CSS in Ember.js projects, including JavaScript plugin setup, route rescans, element modifiers, and optional dependencies.

Ember.js quick setup

If Tailwind CSS is not set up yet, start with the official Ember.js + 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

Import Preline CSS and source files

Import variants.css and theme.css into app/app.css, the CSS entry created by the Tailwind CSS Ember guide above. This is not the same file as app/styles/app.css, which is Ember's classic build's auto-included stylesheet and has nothing to do with the Vite CSS pipeline. Then add the @source entry for Preline UI JavaScript.

app/app.css

                          
                            @import "tailwindcss";

                            @import "preline/variants.css";
                            @source "../node_modules/preline/dist/*.js";

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

Keep every @import above the @source line. Per the CSS spec, @import must precede all other statements, aside from @charset or an empty @layer. Once a non-import statement like @source appears, PostCSS silently drops any @import that follows it, and only logs a build warning rather than throwing a runtime error. In practice this means theme.css would never load, so Preline UI's custom Tailwind CSS variants (like hs-accordion-active:*) and plugin-specific utility styles would quietly stop compiling.

See the Theme docs to learn more about Preline Themes.

Add Preline UI to the app entry

Import Preline UI in your application entry file, app/app.js.

app/app.js

                          
                            import 'preline'

No root template changes needed

Nothing else to do here. Ember's own index.html at the project root already renders the compiled assets for you through {{content-for "head"}} and {{content-for "body"}}. This is default ember-cli boilerplate, not something Preline UI requires you to add. Once step 3 imports preline from app/app.js, it's already part of the bundle these placeholders inject.
<!doctype html> <head> {{!-- ... --}} {{content-for "head"}} </head> <body> {{content-for "body"}} </body>
```
                          
                        
```

Specific guide

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

Ember.js

Using Preline UI with Ember.js

Read the practical guide for route rescans, element modifiers, module imports, cleanup, and optional dependencies in Ember.js applications.

View guide

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