Adding Tailwindcss

support
1

I would like to use the Tailwindcss framework with my Hug project. I’m not sure how to add this in rather than using their CDN. How can I add this to my project the right way?

2 Likes
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
3

Hi thank you for helping. I am getting an error when trying to push to local server. I have my postcss.config.js in my root directory and my styles.css in assets/css. I included the code you provided in my partials/head.html. Please see the error I receive. I tried fixing it but not sure what I’m doing wrong I’m on my third day learning Hugo.

render of "home" failed: execute of template failed: template: index.html:1:3: executing "index.html" at <partial "head" .>: error calling partial: "C:\Users\Ram\Documents\hugo\13\layouts\partials\head.html:17:36": execute of template failed: template: partials/head.html:17:36: executing "partials/head.html" at <resources.PostCSS>: error calling PostCSS: no Resource provided in transformation
render of "page" failed: execute of template failed: template: _default/single.html:1:3: executing "_default/single.html" at <partial "head" .>: error calling partial: "C:\Users\Ram\Documents\hugo\13\layouts\partials\head.html:17:36": execute of template failed: template: partials/head.html:17:36: executing "partials/head.html" at <resources.PostCSS>: error calling PostCSS: no Resource provided in transformation
Rebuild failed:

Failed to render pages: render of "page" failed: execute of template failed: template: _default/single.html:1:3: executing "_default/single.html" at <partial "head" .>: error calling partial: "C:\Users\Ram\Documents\hugo\13\layouts\partials\head.html:17:36": execute of template failed: template: partials/head.html:17:36: executing "partials/head.html" at <resources.PostCSS>: error calling PostCSS: no Resource provided in transformation
4

Did you put your styles.css inside /assets/css/ ??
Message seems to indicate it is not there.

5

@bep @divinerites
Yes I even tried moving the assets to different parts of the directory. I made a fresh Hugo directory to test it out and I get the error:

Failed to render pages: render of "home" failed: "C:\Users\Ram\Documents\newhugotest\testpostcss\layouts\index.html:10:36": execute of template failed: template: index.html:10:36: executing "index.html" at <resources.PostCSS>: error calling PostCSS: no Resource provided in transformation

The new test repo is https://github.com/hungryram/tailwindtest.git if you’d like to check it out. I’ve been trying all day :confused:

6

Where is your hugo code ?

[EDIT] : ah I see, but it seems that you do not have a proper hugo structure folders.
At least you have to create a /assets/css/ folder and put your styles.css inside.

7

I was able to figure it out without using PostCSS. Currently creating a boilerplate for myself so I could just build off of it with Netlify CMS.

8

But you didn’t follow our advices. that is the reason of your error message.

9

Hi, yes I did that but I kept getting a PostCSS error. Kind of gave up due to frustration and went a different route I followed the installation of Brads video: https://www.youtube.com/watch?v=UBOj6rqRUME&t=342s

Changed some of the filing structure and currently building a boilerplate here where you can see the repo here: https://github.com/hungryram/hugo-boilerplate.git

Let me know what you think. Still a few days into Hugo, I like it so far, definitely prefer it over Gatsby for a smaller site.

10

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.