Installation
Setting up Preline UI in a Hugo project using Tailwind CSS.
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 is a Static Site Generator for modern web experiences.
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 using your preferred package manager.
npm install preline
cp -r node_modules/preline static/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
Install Tailwind CSS.
npm install tailwindcss @tailwindcss/postcss
Create a tailwind.config.js file in the root of your project.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./layouts/**/*.html',
'./content/**/*.md',
'./assets/**/*.js'
],
theme: {
extend: {}
},
plugins: []
};
Install PostCSS.
npm install postcss postcss-cli autoprefixer
Create a postcss.config.js file in the root of your project.
module.exports = {
plugins: {
'@tailwindcss/postcss': {},
autoprefixer: {}
}
};
Include Preline in your projects_root_directory/assets/css/main.css file.
@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"; */
Run the Tailwind CSS build task.
npx @tailwindcss/cli -i ./assets/css/main.min.css -o ./static/css/main.css --minify --watch
Create the baseof.html file in the projects_root_directory/layouts/_default
Please note: if you use any opinionated scripts, add them to your baseof.html file before the Preline UI script. Be sure to copy these scripts from the node_modules folder into your static/vendor directory.
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.
/* 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);