Hugo and Tailwind CSS

Designing for Speed and Simplicity: Tailwind CSS and Hugo, The Perfect Pair

A simple guide to adding Tailwind to the Hugo website development workflow

What is Hugo Framework and Tailwind CSS?

Hugo is a static website generator that is designed to be fast and efficient. It is written in Go and is built on the concept of “content as data” which allows for a separation of concerns between the content and the presentation. This approach results in faster website building and rendering times because the content is pre-built and served as static files, rather than being generated dynamically on each page request.

One of the key features of Hugo is its speed. It uses Go’s built-in concurrency features to process multiple templates and pages at once, which can result in build times that are significantly faster than other static website generators. Additionally, Hugo is optimized for performance, with built-in caching and minification of assets to further speed up the website loading time.

Tailwind CSS is a utility-first CSS framework that is designed to make styling websites faster and more efficient. It is built on the concept of “utility classes” which are pre-defined CSS classes that can be applied to HTML elements to quickly style them in a consistent and predictable way.

Tailwind CSS provides a wide range of utility classes for styling various aspects of a website, such as colors, typography, spacing, and layout. This means that developers don’t have to write custom CSS for each element and can instead focus on the HTML markup and the overall layout of the website. This promotes consistency in design by providing a set of predefined classes that can be used throughout the website and makes it easy to create a consistent look and feel across all pages of the website.

Styling in Hugo

Styling CSS in the Hugo framework can be relatively straightforward, but there are a few things to keep in mind. Hugo uses Go templates to generate the HTML for your website, which means that you will need to have a basic understanding of Go templates in order to style your CSS.

Potential difficulty with styling CSS in Hugo is that it uses a different directory structure than other frameworks. In Hugo, the CSS files are typically stored in the “static” folder, separate from the HTML templates. This can be a bit confusing for developers who are used to having all of their CSS in the same place as their HTML.

The use of a CSS framework like Tailwind CSS can bring some complexity when used in Hugo. Tailwind CSS requires a good understanding of the framework in order to use it effectively, and it can be challenging to integrate it into your existing Hugo templates but I’m here to help.

Setting Up Hugo and Tailwind CSS

First Hugo project needs to be setup. When Hugo executes it’s install process it scaffolds a directory structure. Install Hugo on OS https://gohugo.io/installation/

hugo new site [dirname]
cd [dirname]
hugo server

Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

Hugo project directory

[dirname]/
├── archetypes/
│   └── default.md
├── assets/
├── content/
├── data/
├── layouts/
├── public/
├── static/
├── themes/
└── config.toml

For the sake of demonstrating css styling a home page template is created and added to the layouts directory

[dirname]/
├── archetypes/
├── assets/
├── content/
├── data/
├── layouts/
│   └── __default
|.        └── baseof.html
|         └── home.html
├── public/
├── static/
├── themes/
└── config.toml

Next install Tailwind CSS from the static folder. Tailwind will create a configuration file where template file paths will be added for Tailwind to detect their changes. For Hugo, Tailwind should detect the html templates in the layout directory and markdown files in the content directory

npm install -D tailwindcss
npx tailwindcss init

[dirname]/
├── archetypes/
├── assets/
├── content/
├── data/
├── layouts/
│   └── __default
|         └── baseof.html
|         └── home.html
├── public/
├── static/
│   └──src
|       └── input.css
|   └── tailwind.config.js
├── themes/
└── config.toml

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["../content/*.md", "../layouts/**/*.html"],
  theme: {
    extend: {},
  },
  plugins: [],
};

input.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Next there are two actions that should happen one run the development server and the other is to watch the template files for any changes then output the stylesheet. Each command can execute in different terminal sessions.

# Terminal Session 1
hugo server

# Terminal Session 2
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

To begin styling add a link selector pointing to the output.css to the baseof.html template. From there Tailwind are added to the home.html file and placeholder in _index.md to see how the style renders.

// baseof.html

<head>
 <meta charset="UTF-8">
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>{{.Title}}</title>
 <link rel="stylesheet" href="/dist/output.css">
</head>

<body class="bg-slate-100">
 {{ block "main" .}} {{ end }}
</body>

</html>

// home.html

{{define "main"}}

<div class="container mx-auto bg-white p-10 mt-10">
 <h1 class="text-3xl mb-5">{{.Title}}</h1>
 {{.Content}}
</div>

{{end}}

---
title: "Hugo & Tailwind Dynamic Duo"
layout: home
---

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dui enim, iaculis vitae felis et, mattis accumsan justo. Vestibulum ac egestas purus. In lectus eros, semper vel bibendum et, iaculis ut ligula. Phasellus eget condimentum nunc. Pellentesque et libero ornare, rutrum libero nec, interdum turpis. In hac habitasse platea dictumst. Aenean quis dignissim dolor, nec imperdiet turpis. Pellentesque varius felis nec magna semper, ac vehicula mauris finibus. Nunc dictum imperdiet fringilla. In hac habitasse platea dictumst. Aliquam est eros, vestibulum nec nibh eget, efficitur luctus nisl. Vivamus tincidunt eu libero non rutrum. Vivamus molestie ipsum quam, ac facilisis quam dignissim eu. Donec vitae magna id metus auctor facilisis id ut libero. Quisque egestas fermentum elit sed commodo. Cras mauris tellus, hendrerit ac dolor eget, tristique porttitor dolor.

The home page should render as shown below. :) and there you have it a Hugo and Tailwind workflow. To expand further on customizing templates look at Hugo’s section about Markdown Render Hooks

Hugo and Tailwind page render

Using Hugo and Tailwind CSS together can make it easier to maintain and update the website in the future, as the consistency in design and the use of predefined classes can make it easier to navigate and make changes to the codebase.

In conclusion, the combination of Hugo and Tailwind CSS can provide a powerful toolset for website development, allowing for faster, more efficient, and visually appealing websites, with a consistent design, high level of customization and responsive design.