Hugo + Tailwind CSS

Paso a paso de cómo integrar Tailwind CSS (con PostCSS) a un proyecto en Hugo.

Hugo Extended

Vamos a necesitar la versión extended de Hugo. Esta versión incluye soporte para Hugo Pipes, que es una manera que nos ofrece Hugo para procesar assets, imágenes, y código JS.

Hugo Version Output

Hay muchas formas de instalar Hugo. Una posibilidad es desde github, para la release de una versión particular (por ejemplo v0.86.0) la descarga _extended_ que corresponda con nuestro OS.

En mi caso la versón sería hugo_extended_0.86.0_Linux-64bit.deb

Teniendo Hugo instalado, podemos crear un proyecto nuevo:

hugo new site hugo-tailwind-example
cd hugo-tailwind-example

Instalación de Dependencias

Dentro del nuevo proyecto Hugo inicializamos NPM, para poder instalar algunas dependencias.

npm init -y
npm install tailwindcss postcss postcss-cli autoprefixer

Configuración de Tailwind

Inicializamos tailwind, creando un archivo postcss.config.js y otro tailwind.config.js. Hay un comando que se encarga de crear ambos archivos:

npx tailwind init -p

La configuración de PostCSS debería quedar sin cambios:

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

A la configuración de Tailwind le agregamos lo necesario para purge:

// tailwind.config.js
module.exports = {
  purge: {
    enabled: process.env.HUGO_ENVIRONMENT === "production",
    content: [
      "./layouts/**/*.html", 
      "./content/**/*.md", 
    ],
  },
  // ...
}

Layout en Hugo

Una vez configurado todo, podemos empezar a escribir los los estilos y layouts necesarios.

assets/style.css:

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

layouts/_default/baseof.html:

<!DOCTYPE html>
<html lang="{{ .Language.Lang }}">
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    {{ $styles := resources.Get "style.css" | postCSS }}
    {{ if .Site.IsServer }}
        <link rel="stylesheet" href="{{ $styles.RelPermalink }}"/>
    {{ else }}
        {{ $styles := $styles | minify | fingerprint | resources.PostProcess }}
        <link rel="stylesheet" href="{{ $styles.RelPermalink }}" integrity="{{ $styles.Data.Integrity }}"/>
    {{ end }}
</head>
<body>
    {{ block "main" . }}{{ end }}
</body>
</html>

layouts/index.html:

{{ define "main" }}
<main class="container mx-auto my-24 px-4 py-24 bg-gray-700 text-center rounded shadow-md">
    <h1 class="text-3xl font-bold text-gray-50">Hugo con Tailwind!</h1>
</main>
{{ end }}

Si todo lo anterior funcionó correctamente, al ejecutar hugo server, deberíamos ver el sitio funcionando:

hugo server

Hugo + Tailwind

Fuente