Tailwind CSS + Hugo | Step 1 – Create the Theme

The first step in this process is to create a new Hugo theme.

hugo new theme tailwind-keyes

This command creates a skeleton theme:

themes/tailwind-keyes
├── archetypes
│   └── default.md
├── layouts
│   ├── 404.html
│   ├── _default
│   │   ├── baseof.html
│   │   ├── list.html
│   │   └── single.html
│   ├── index.html
│   ├── partials
│   │   ├── footer.html
│   │   ├── header.html
│   │   └── head.html
├── LICENSE
├── static
│   ├── css
│   └── js
└── theme.toml

To use the theme modify the theme in the config file (config.yaml in my scenario):

theme: tailwind-keyes

The dev server can now be run:

hugo server

This returns an error as I use two custom shortcodes in the keyes.ie site: rawhtml and swatch.

Error: Error building site: ".../content/colophon.md:17:1": failed to extract
shortcode: template for shortcode "rawhtml" not found

To remedy this, the shortcodes from my original theme are copied into place and now the hugo server command works.

When I visit the dev server a blank page greets me. This is becuase we don’t have any content handling in the theme yet.

To make the request return some HTML I add the following to layouts/index.html (the homepage of the site):

{{ define "main" }}
  <h1>Hello Tailwind Hugo</h1>
{{ end }}

And now we have a working Hugo site.

The next step will be to have a look at the Tailwind layout functionality, and decide how it can be used to create the homepage grid.