Adding Tailwindcss

support
2

Hey,

Once I get some free time I will create a GitHub Tailwind starter template. But my current recommended setup would be to install Tailwind and the other PostCSS plugins you want to use via NPM and then do something like this in your header template:

    {{ $options := dict "inlineImports" true }}
    {{ $isProd :=  eq hugo.Environment "production"}}
    {{ $styles := resources.Get "css/styles.css" }}
    {{ $styles = $styles | resources.PostCSS $options }}
    {{ if $isProd }}
    {{ $styles = $styles | minify | fingerprint }}
    {{ end }}
    <link href="{{ $styles.RelPermalink }}" rel="stylesheet" />

Then put your css below /assets/css, e.g.:

@tailwind base;

@tailwind components;
@tailwind utilities;

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,600,700,700i&display=swap');

@import "components/all.css";

html {
  font-size: 14px;
}

Note that this:

    {{ $options := dict "inlineImports" true }}

Which enables native inline CSS import in Hugo requires a fairly recent Hugo version.

6 Likes