Tailwind CSS gebruiken met een Hugo website

CSS was nog nooit zo makkelijk als met Tailwind CSS. Met Tailwind hoef je namelijk zelf helemaal geen CSS te schrijven, maar gebeurt alle styling met behulp van HTML-classes.

In de post over het opzetten van een contactformulier verwees ik al even kort naar het gebruik van Tailwind CSS voor de vormgeving van Bits+Bites. Het opzetten van Tailwind CSS voor je Hugo website is niet lastig, maar je moet wel even weten hoe het moet. Deze tutorial helpt je bij de eerste implementatie.¹

Tailwind voor Hugo

Uiteindelijk scheelt het gebruik van Tailwind CSS veel tijd bij het ontwikkelen van een template. Het implementeren kost ook niet zoveel tijd, maar er zijn wel een aantal stappen die je moet doorlopen.

Voorwaarden

Deze tutorial gaat ervan uit dat er al een eigen Hugo thema is aangemaakt. Heb je dat nog niet gedaan? Deze post helpt je daarbij.

Ook is het noodzakelijk om Node.js geïnstalleerd te hebben. Op een Mac met homebrew (aanrader!) is dit erg makkelijk met het commando brew install node.

Installeren

Navigeer in een terminal naar de map waar je thema in is opgeslagen: themes/themanaam.
Initialiseer Node.js om package.json te genereren:
```
npm init -y
```
-y geeft aan om de standaardwaarden te gebruiken, in plaats van dat er bij het initialiseren verschillende vragen worden gesteld. Voor het gebruik met Tailwind zijn de standaardwaarden toereikend.
Installeer Tailwind als een development dependency:
```
npm install --save-dev tailwindcss
```
Initialiseer Tailwind, waarmee tailwind.config.js wordt aangemaakt:
```
npx tailwindcss init
```
tailwind.config.js bevat de configuratie voor Tailwind. Hoewel je hierin veel kunt instellen rond de vormgeving van je website, geven we voor nu alleen aan waar de voor Tailwind relevante bestanden staan. Voor een Hugo-website zijn dit de Markdown-bestanden in de map content, en de HTML-templates van je thema. Pas tailwind.config.js aan om de locaties van de relevante bestanden toe te voegen:
```
module.exports = {
  content: ["../content/**/*.md", "./layouts/**/*.html"],
  theme: {
      extend: {},
  },
  plugins: [],
};
```
Tailwind gebruikt één CSS-bestand als input, om op basis de HTML aangeroepen classes een tweede CSS-bestand aan te maken. Maak, als die er nog niet is, de map assets aan en voeg daar het bestand input.css aan toe. Voeg de volgende regels toe aan input.css:
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```
Voeg het Tailwind-commando om de uiteindelijke CSS te bouwen toe aan package.json:
```
"scripts": {
  "build-tw": "npx tailwindcss -i ./assets/input.css -o ./assets/output.css"
}
```
Met het uitvoeren van het commando npm run build-tw wordt het script build-tw uitgevoerd, wat ervoor zorgt dat Tailwind de templates scant op de gebruikte classes en het bestand ./assets/output.css compileert.

Voeg het gecompileerde bestand toe binnen de <head>-tags van je website:

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  {{ $style := resources.Get "output.css" }} 
  <link rel="stylesheet" href="{{ $style.RelPermalink }}">
</head>

Roep Tailwind-classes aan binnen de <body> om je website vorm te geven:

<body>
  <h1 class="text-3xl font-bold underline">
      Hello world!
  </h1>
</body>

Ga om je site te draaien uit de thema-map naar de root-map van je website. Draai je site met:
```
  hugo server --disableFastRender
```
Draai elke keer als je wijzigingen in je thema aanbrengt het commando npm run build-tw vanuit de thema-map om deze in Tailwind te laten doorvoeren

Configureren

In principe kun je Tailwind CSS zonder verdere configuratie gebruiken. Voor Hugo-website is er echter wel iets om rekening mee te houden.

In de standaardconfiguratie verwijdert Tailwind namelijk alle styling van heading-elementen, terwijl Hugo juist alle headings in Markdown omzet naar heading-elementen in HTML.

De makkelijkste manier om dit op te lossen en de heading-elementen weer te stylen is met behulp van de Typography-plugin. Installeer deze door in de thema-map het volgende commando uit te voeren:

npm install -D @tailwindcss/typography

Voeg vervolgens de plugin toe aan tailwind.config.js

module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}

Om de Typography-plugin in je template te gebruiken, voeg je de class prose toe aan een article-element:

<article class="prose lg:prose-xl">
    <h1>Artikel titel</h1>
</article>

Een andere mogelijkheid is door zelf styling toe te voegen in input.css. Om styling aan h1 en h2 toe te voegen, kan input.css er zo uit komen te zien:

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

@layer base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
}

Kijk voor meer informatie over custom CSS in de Tailwind documentatie.

Deze post is grofweg gebaseerd op deze uitleg, die me erg heeft geholpen bij het implementeren van Tailwind CSS op Bits+Bites. ↩︎

#tutorial #hugo #frameworks #web #Tailwind

Terug naar overzicht