# Utility classes not being built with hugo

**URL:** <https://discourse.gohugo.io/t/utility-classes-not-being-built-with-hugo/51871>\
**Category:** support\
**Tags:** tailwind\
**Created:** [October 9, 2024, 10:53pm UTC](https://discourse.gohugo.io/t/utility-classes-not-being-built-with-hugo/51871 "2024-10-09T22:53:51Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![DeviousCat](https://avatars.discourse-cdn.com/v4/letter/d/8baadc/32.png) [@DeviousCat](https://discourse.gohugo.io/u/DeviousCat)\
**Post date:** [October 9, 2024, 10:53pm UTC](https://discourse.gohugo.io/t/utility-classes-not-being-built-with-hugo/51871/1 "2024-10-09T22:53:51Z")

</div>

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

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

```

HTML File:

```auto
{{ $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" . }}

```

---

<div class="post-metadata">

**Author:** ![irkode](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/irkode/32/26135_2.png) [@irkode](https://discourse.gohugo.io/u/irkode)\
**Post date:** [October 10, 2024, 8:00am UTC](https://discourse.gohugo.io/t/utility-classes-not-being-built-with-hugo/51871/2 "2024-10-10T08:00:41Z")

</div>

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.](https://github.com/bep/hugo-starter-tailwind-basic)

as you share only partially, check the example for _cachebusters_ and _tailwind.config.js_

---

<div class="post-metadata">

**Author:** ![DeviousCat](https://avatars.discourse-cdn.com/v4/letter/d/8baadc/32.png) [@DeviousCat](https://discourse.gohugo.io/u/DeviousCat)\
**Post date:** [October 10, 2024, 8:22pm UTC](https://discourse.gohugo.io/t/utility-classes-not-being-built-with-hugo/51871/3 "2024-10-10T20:22:53Z")

</div>

Here is the github repository. [GitHub - Garbg/HSNews-GoHugo](https://github.com/Garbg/HSNews-GoHugo) I updated it to match the repository you provided but it still doesn’t work.

---

<div class="post-metadata">

**Author:** ![irkode](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/irkode/32/26135_2.png) [@irkode](https://discourse.gohugo.io/u/irkode)\
**Post date:** [October 10, 2024, 9:03pm UTC](https://discourse.gohugo.io/t/utility-classes-not-being-built-with-hugo/51871/4 "2024-10-10T21:03:54Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![DeviousCat](https://avatars.discourse-cdn.com/v4/letter/d/8baadc/32.png) [@DeviousCat](https://discourse.gohugo.io/u/DeviousCat)\
**Post date:** [October 10, 2024, 9:15pm UTC](https://discourse.gohugo.io/t/utility-classes-not-being-built-with-hugo/51871/5 "2024-10-10T21:15:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![irkode](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/irkode/32/26135_2.png) [@irkode](https://discourse.gohugo.io/u/irkode)\
**Post date:** [October 10, 2024, 9:59pm UTC](https://discourse.gohugo.io/t/utility-classes-not-being-built-with-hugo/51871/6 "2024-10-10T21:59:20Z")

</div>

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:

```auto
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

---

<div class="post-metadata">

**Author:** ![irkode](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/irkode/32/26135_2.png) [@irkode](https://discourse.gohugo.io/u/irkode)\
**Post date:** [October 11, 2024, 8:13am UTC](https://discourse.gohugo.io/t/utility-classes-not-being-built-with-hugo/51871/7 "2024-10-11T08:13:28Z")

</div>

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.

```auto
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']
      })
   ]
}

```

---

<div class="post-metadata">

**Author:** ![DeviousCat](https://avatars.discourse-cdn.com/v4/letter/d/8baadc/32.png) [@DeviousCat](https://discourse.gohugo.io/u/DeviousCat)\
**Post date:** [October 11, 2024, 7:12pm UTC](https://discourse.gohugo.io/t/utility-classes-not-being-built-with-hugo/51871/8 "2024-10-11T19:12:55Z")

</div>

> [@irkode](#):
>
> `'./themes/HSNews-GoHugo/layouts/**/*.html'`

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

```auto
content: ["./hugo_stats.json"]

```

in the tailwind configuration to

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

```

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

---

<div class="post-metadata">

**Author:** ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)\
**Post date:** [October 13, 2024, 7:13pm UTC](https://discourse.gohugo.io/t/utility-classes-not-being-built-with-hugo/51871/9 "2024-10-13T19:13:10Z")

</div>

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