Config TailwindCSS with Hugo

Assuming we have a project directory as below:

content\
layouts\
├── _default
│   ├── baseof.html
├── partials\
    ├── footer.html
    ├── head.html
    ├── header.html
package.json
postcss.config.js
tailwind.config.js

Install required packages.

yarn add tailwindcss postcss postcss-cli autoprefixer

Process TailwindCSS with Hugo Pipe's PostCSS.

{{ $options := dict "inlineImports" true }}
{{ $styles := resources.Get "css/style.css" }}
{{ $styles = $styles | resources.PostCSS $options }}
{{ if hugo.IsProduction  }}
  {{ $styles = $styles | minify | fingerprint | resources.PostProcess }}
{{ end }}

<link href="{{ $styles.RelPermalink }}" rel="stylesheet" />

To make purgecss works properly in production. We need to set NODE_ENV=production in the build command.

NODE_END=production hugo --gc --minify