Utility classes not being built with hugo

support
1

When I use the postcss cli, my utility class shows up. But when I use hugo, it doesn’t. Here is my postcss configuration and the html file loading the css.
PostCSS config

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

HTML File:

{{ $styles := resources.Get "css/main.css" 
| css.PostCSS (dict "inlineImports" true)
| minify
}}
<link rel="stylesheet" href="{{ $styles.RelPermalink }}">
<link rel="stylesheet" href="{{ $styles.RelPermalink }}">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>{{ if .IsHome }}{{ site.Title }}{{ else }}{{ printf "%s | %s" .Title site.Title }}{{ end }}</title>
{{ partialCached "head/css.html" . }}
{{ partialCached "head/js.html" . }}
2

did you had a look at that one GitHub - bep/hugo-starter-tailwind-basic: A basic and simple to set up Hugo with TailwindCSS starter project.

as you share only partially, check the example for cachebusters and tailwind.config.js

3

Here is the github repository. GitHub - Garbg/HSNews-GoHugo I updated it to match the repository you provided but it still doesn’t work.

4

mmh, that’s just a theme

  • the main.css only includes some tailwind stuff (cannot see any custom stuff)
  • the head/css.html has no CSS processing

please recheck

5

I’m not using the head/css.html I’m including the stylesheet in head.html itself
Edit: I switched back to head/css.html and it still doesn’t work

6

I have one here based on the starter and other posts.

customizes colors and creates a new .btn class

just pushed it to my repo:

git clone --single-branch -b topic-51871 https://github.com/irkode/hugo-forum.git topic-51871
cd topic-51871
npm install --save-dev

# avoid refresh problem on first build
hugo

hugo server

maybe helpfull

I’ll recheck your repo supposedly tomorrow

7

mmh, keep in mind that you have two folders

  • your site source
  • the themes in subfolder themes

so if you run hugo in your site root, there’s no content in layouts/ and the purgecss config will remove all.

adding that to the sites root works for me - I added <body class="px-6">in baseof.html of the theme and git it in the resulting css.

const purgecss = require('@fullhuman/postcss-purgecss');
const tailwindConfig = process.env.HUGO_FILE_TAILWIND_CONFIG_JS || './tailwind.config.js';
const tailwind = require('tailwindcss')(tailwindConfig);

module.exports = {
   plugins: [
      tailwind,
      require('autoprefixer'),
      purgecss({
         content: ['./themes/HSNews-GoHugo/layouts/**/*.html']
      })
   ]
}
8

That worked (I added it, I kept the original) but I also changed

content: ["./hugo_stats.json"]

in the tailwind configuration to

content: ["./hugo_stats.json", "./themes/**/hugo_stats.json"]

For reference the commits that I solved the problem with are commit numbers 2ddbeb7bf3f61c7ac86480e5ce003f28c4411287 and 0f4999ed44cb54b23b73724f5e62a28c72e8ec01

9

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