Install Preline UI with Ember.js using Tailwind CSS

Setting up Preline UI in an Ember.js project using Tailwind CSS.

Quick Ember.js setup

JavaScript web application framework with expressive, elegant syntax. If you haven't set up Tailwind CSS yet, check out Ember.js Tailwind CSS installation guides.

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

Add the Preline UI CSS Variants and @source for Preline UI JavaScript

Import the Preline UI CSS Variants file variants.css into your app/styles/app.css file, ensuring it comes after the tailwindcss import and add source for Preline UI JavaScript.

app/styles/app.css

              
                @import "tailwindcss";
    
                /* Preline UI */
                @import "../../node_modules/preline/variants.css";
                @source "../../node_modules/preline/dist/*.js";
    
                /* Plugins */
                /* @plugin "@tailwindcss/forms"; */

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

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

Add the Preline UI JavaScript

Add the Preline UI JavaScript in your app entry point app/app.js

app/app.js

              
                import 'preline'

Loading your scripts

With your Ember entry points configured, you only need reference them in your application's root template
<!doctype html> <head> {{!-- ... --}} {{content-for "head"}} </head> <body> {{content-for "body"}} </body>
```
              
            
```

Optional Preline UI Styles

Please note, Preline UI comes with some opinionated styles that are applied to components by default. If you want these styles in your project, you may include them into your CSS file. These styles used to come by default in Tailwind v3, so we decided to keep them 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);

Install Preline UI with Ember.js using Tailwind CSS

Quick Ember.js setup