Install Preline UI with Blazor using Tailwind CSS

1. Install Preline UI

   Install preline via npm in your Blazor 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. Update Tailwind CSS Configuration

   Add Preline UI CSS variants and forms plugin to your src/input.css file.

   src/input.css

   							
   								@import "tailwindcss";
   
   								/* Preline UI */
   								@source "./node_modules/preline/dist/*.js";
   								@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. Build CSS and Copy Preline JavaScript

   Build Tailwind CSS and copy Preline JavaScript to your wwwroot directory.

   Terminal

   						
                 npx @tailwindcss/cli -i ./src/input.css -o ./wwwroot/css/tailwind.css
                 mkdir -p wwwroot/js
                 cp node_modules/preline/dist/preline.js wwwroot/js/
   						
   					

4. Update App.razor with SPA Navigation Support

   Update your Components/App.razor to include Preline JavaScript with SPA navigation support.

   <!-- Include CSS and JavaScript --> <link rel="stylesheet" href="css/tailwind.css" /> <script src="js/preline.js"></script> <script> // Initialize Preline components function initializePreline() { if (window.HSStaticMethods) { window.HSStaticMethods.autoInit(); } } document.addEventListener('DOMContentLoaded', initializePreline); window.initializePreline = initializePreline; </script>
   Components/App.razor

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