Install Preline UI with Hugo using Tailwind CSS

Install Preline UI with Tailwind CSS in Hugo projects, including JavaScript plugin setup, Hugo Pipes, static scripts, and optional dependencies.

Installation

Please note that the plugin has been tested with the 0.147.3 version of the framework. The framework was installed using the standard hugo new site <project-name> command.
If you are using your own project structure or a different version, pay attention to the file paths and features of your version!

Hugo quick setup

Start with a working Hugo site, then add Tailwind CSS before importing Preline UI.

Some components rely on third-party libraries. The setup below assumes full Preline UI usage with those dependencies preloaded. If you do not plan to use those components, you can remove the related libraries from your configuration.

Install Preline UI

Install preline, then copy the package assets into static/preline so Hugo can serve them.

Terminal

                          
                            npm install preline
                            cp -r node_modules/preline static/preline

Preline UI uses the Tailwind CSS Forms plugin across form components. Install it if you have not already: npm install -D @tailwindcss/forms

Set up Tailwind CSS

Install Tailwind CSS and its PostCSS integration package.

Terminal

                          
                            npm install tailwindcss @tailwindcss/postcss

Create a tailwind.config.js file in the project root and include your Hugo layout, content, and asset paths.

tailwind.config.js

                          
                            /** @type {import('tailwindcss').Config} */

                            module.exports = {
                              content: [
                                './layouts/**/*.html',
                                './content/**/*.md',
                                './assets/**/*.js'
                              ],
                              theme: {
                                extend: {}
                              },
                              plugins: []
                            };

Set up PostCSS

Install PostCSS, the CLI, and Autoprefixer.

Terminal

                          
                            npm install postcss postcss-cli autoprefixer

Create a postcss.config.js file in the project root.

postcss.config.js

                          
                            module.exports = {
                              plugins: {
                                '@tailwindcss/postcss': {},
                                autoprefixer: {}
                              }
                            };

Include Preline CSS

Import Preline into projects_root_directory/assets/css/main.css.

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

                            /* Third-party plugins */
                            /* @plugin "@tailwindcss/forms"; */

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

See the Theme docs to learn more about Preline Themes.

Run the Tailwind build

Run the Tailwind CSS build task.

Terminal

                          
                            npx @tailwindcss/cli -i ./assets/css/main.min.css -o ./static/css/main.css --minify --watch

Load scripts in the base layout

Add the stylesheet and script tags in projects_root_directory/layouts/_default/baseof.html.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>{{ .Title }}</title> <link rel="stylesheet" href="{{ "css/main.css" | relURL }}">  <style> .dt-layout-row:has(.dt-search), .dt-layout-row:has(.dt-length), .dt-layout-row:has(.dt-paging) { display: none !important; } </style> </head> <body> ... </body>  <script src="/vendor/jquery/dist/jquery.min.js"></script> <script src="/vendor/lodash/lodash.min.js"></script> <script src="/vendor/datatables.net/js/dataTables.min.js"></script> <script src="/vendor/dropzone/dist/dropzone-min.js"></script> <script src="/vendor/nouislider/dist/nouislider.min.js"></script> <script src="/vendor/vanilla-calendar-pro/index.js"></script>  <script src="/vendor/preline/dist/index.js"></script> </html>
baseof.html
```
                          
                        
```
If you use any optional third-party scripts, load them in baseof.html before the Preline UI script. Copy those files from node_modules into your static/vendor directory first.

Specific guide

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

Hugo

Using Preline UI with Hugo

Use Preline UI JavaScript plugins in Hugo projects, including static scripts, module imports, Hugo Pipes, cleanup, and optional dependencies.

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

Hugo quick setup

Install Preline UI

Set up Tailwind CSS

Set up PostCSS

Include Preline CSS

Run the Tailwind build

Load scripts in the base layout

Specific guide

Using Preline UI with Hugo

Optional Preline UI styles