Install Preline UI with Astro using Tailwind CSS

Setting up Preline UI in a Astro project using Tailwind CSS.

Installation

Please note that the plugin has been tested with the 5.5.2 version of the framework. The framework was installed using the standard npm create astro@latest command.
If you are using your own project structure or a different version, pay attention to the file paths and features of your version!

Quick Astro setup

Astro is the all-in-one web framework designed for speed. If you haven't set up Tailwind CSS yet, check out Astro Tailwind CSS installation guides.

Some components require third-party libraries. The settings below assume full use of Preline UI, including preloaded dependencies. If you do not intend to use those components that rely on third-party libraries, you may exclude them from your configuration.

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

Include Preline CSS

Include Preline in your global.css file, e.g. projects_root_directory/src/styles/global.css.

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

                        /* Plugins */
                        /* @plugin "@tailwindcss/forms"; */

Add the Preline UI JavaScript

Include Preline UI JavaScript to the projects_root_directory/src/layouts/Layout.astro file.
--- import "../styles/global.css"; --- <!doctype html> <html lang="en"> ... <body> ... <slot /> </body>  <script is:inline src="./assets/vendor/jquery/dist/jquery.min.js"></script> <script is:inline src="./assets/vendor/lodash/lodash.js"></script> <script is:inline src="./assets/vendor/datatables.net/js/dataTables.min.js" ></script> <script is:inline src="./assets/vendor/dropzone/dist/dropzone-min.js"></script> <script is:inline src="./assets/vendor/nouislider/dist/nouislider.min.js" ></script> <script is:inline src="./assets/vendor/vanilla-calendar-pro/index.js"></script>  <script is:inline src="./assets/vendor/preline/dist/index.js"></script> </html>
Layout.astro
```
                      
                    
```

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

Community Workarounds

Check out this section for community-shared tips and tricks. It's a spot for finding those handy hacks and solutions that enhance your experience with Preline UI.

Solution for build process in Astro projects.

Issue #61 by @krankos

Install Preline UI with Astro using Tailwind CSS

Installation

Quick Astro setup