Hugo + Tailwind CSS

#Hugo #Tailwind CSS #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
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 | safeURL }}"/>
    {{ else }}
        {{ $styles := $styles | minify | fingerprint | resources.PostProcess }}
        <link rel="stylesheet" href="{{ $styles.RelPermalink | safeURL }}" 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
Hugo + Tailwind

Fuente