How to purge TailwindCSS

support
1

Hello everyone

I am fairly new to Hugo, but I do understand HTML and CSS pretty well.

I guess my issue is a setup issue. I followed this video in order to get TailwindCSS set up with Hugo.

In my head.html file for my custom theme, I have the following:

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>{{ .Title }}</title>
  <meta name="description" content="Mechanic360.io homepage" />

  <meta name="author" content="J Khalaf" />

  <meta property="og:title" content="Mechanic360.io homepage" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://mechanic360.io" />
  <meta property="og:description" content="Mechanic360.io homepage" />
  <meta property="og:image" content="image.png" />

  <link rel="icon" href="/favicon.ico" />
  <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />

  {{ $styles := resources.Get "css/styles.scss" | toCSS | postCSS (dict "config"
  "./assets/css/postcss.config.js") }} {{ if .Site.IsServer }}
  <link rel="stylesheet" href="{{ $styles.RelPermalink }}" />

  {{ else }} {{ $styles := $styles | minify | fingerprint |
  resources.PostProcess }}

  <link
    rel="stylesheet"
    href="{{ $styles.Permalink }}"
    integrity="{{ $styles.Data.Integrity }}"
  />

  {{ end }}

  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link
    href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Source+Sans+Pro:wght@400;600;700&display=swap"
    rel="stylesheet"
  />
</head>

There is some “magic” there that I don’t understand. Is the setup above “wrong”? How can I get the purging to work? Right now, the produced CSS when I run hugo -D is 3.2Mb which is massive and I’m only using a few of Tailwind’s classes.

Any help would be greatly appreciated.

2

You are more likely to receive a prompt and accurate response if you post a link to the public repository for your project.

See https://discourse.gohugo.io/t/requesting-help/9132.

Let us see your code

Include a link to the source code repository of your project, because we really need the context of seeing your templates and partials to be able to help you. It is trivial to do a quick git clone on your repo, then run hugo server in your project, to help you out. On the other hand, recreating your code from screenshots, or sort of guessing at it, is not.

If you can’t share your repository for whatever reason, consider creating a dummy repo that you can share, which reproduces the problem you’re experiencing.

3

Here is the repository @jmooring :heart:

1 Like
4

This project has TailwindCSS with purge set up:

1 Like
5

https://github.com/JwanKhalaf/Mechanic360-Site/

404 Page Not Found
Perhaps your repository is private.