Hugo and Tailwindcss

Install

Hugo

> choco install hugo-extended -confirm
> hugo new site website
> cd .\website\
> hugo new theme bitmagie

modify config.toml

theme = "bitmagie"

Tailwindcss

> yarn init -y
> yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest 
> yarn add -D @tailwindcss/typography
> yarn add -D postcss-cli@latest postcss-import@latest
> yarn add -D @fullhuman/postcss-purgecss
> mkdir -p themes\bitmagie\assets\css\
> cd .\themes\bitmagie\assets\css\
> npx tailwindcss init -p
> ni styles.scss

insert into postcss.config.js

const themeDir = __dirname + '/../../';

const purgecss = require('@fullhuman/postcss-purgecss')({
    // see https://gohugo.io/hugo-pipes/postprocess/#css-purging-with-postcss
    // and https://github.com/dirkolbrich/hugo-theme-tailwindcss-starter
    content: [
      './hugo_stats.json',
      themeDir + '/hugo_stats.json'
    ],
    defaultExtractor: (content) => {
      let els = JSON.parse(content).htmlElements;
      return els.tags.concat(els.classes, els.ids);
    }
})

module.exports = {
    plugins: [
      require('postcss-import')({
	  path: [themeDir]
      }),
      require('tailwindcss')(themeDir + 'assets/css/tailwind.config.js'),
      require('autoprefixer')({
	  path: [themeDir]
      }),
      ...(process.env.HUGO_ENVIRONMENT === 'production' ? [purgecss] : [])
    ]
}

insert into styles.css

@import "node_modules/tailwindcss/base";
@import "node_modules/tailwindcss/components";
@import "node_modules/tailwindcss/utilities";

insert into tailwind.config.js

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

insert into layouts/partials/head.html

{{ $styles := resources.Get "css/styles.css" | toCSS | postCSS (dict "config" "./assets/css/postcss.config.js") }}
{{ if .Site.IsServer }}
  <link rel="stylesheet" href="{{ $styles.RelPermalink }}">
{{ else }}
  {{ $styles := $styles | minify | fingerprint | resources.PostProcess }}
  <link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}">
{{ end }}

add head to html-head section

<head>
          .
          .
          .
          
     {{partial "head" .}}
</head>

Setup Hugo with Tailwindcss

Hugo and Tailwindcss

Install

Hugo

Tailwindcss