Install Preline UI with Flask using Tailwind CSS

1. Install Preline UI

   Install preline via npm or yarn in your Flask project directory.

   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. Add the Preline UI CSS Variants and @source for Preline UI JavaScript

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

   static/css/input.css

                 
                   @import "tailwindcss";
       
                   /* Preline UI */
                   @import "../../node_modules/preline/variants.css";
       
                   /* Plugins */
                   /* @plugin "@tailwindcss/forms"; */
   
                   /* Preline Themes */
                   @import "./themes/theme.css";
                 
               

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

3. Include Preline UI JavaScript in Flask Templates

   Copy the Preline JavaScript file to your static directory and include it in your Flask templates.

   Terminal

   					  
   							cp node_modules/preline/dist/preline.js static/js/
   					  
   					

   templates/base.html

   <!-- Include Preline JS before closing body tag --> <script src="{{ url_for('static', filename='js/preline.js') }}"></script>

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