Hugo + TailwindCSS purging too aggressively

support
1

Hello,

I developed a theme but I’m struggling to deploy it alongside my blog via github pages due to overly aggressive CSS purging.

I’ve successfully deployed the theme’s exampleSite as a demo. (See README for link.)

This is the blog repo (working on the devel branch). Most of the CSS is purged.

Purging is achieved using:

purge: {
    enabled: process.env.HUGO_ENVIRONMENT === "production",
    content: [
      "./layouts/**/*.html",
    ],
  },

in assets/css/tailwind.config.js as the hugo_stats.json-based method also resulted in over-purging.

  • Is a postcss.config.js file needed in the blog repo?
  • Is the presence of a syntax.css file changing what’s purged based on:
    {{- $res := slice (resources.Get "css/styles.css" | postCSS (dict "config" "./assets/css/postcss.config.js")) -}}
    {{ if and .Site.Params.highlight (fileExists "assets/css/syntax.css") -}}
    {{- $res = $res | append (resources.Get "css/syntax.css") -}}
    {{- end -}}

    {{- $res = $res | resources.Concat "css/main.css" -}}

    {{ if hugo.IsProduction -}}
    {{- $res = $res | minify | fingerprint | resources.PostProcess -}}
    {{- end }}
    <link rel="stylesheet" href="{{ $res.RelPermalink }}">

found in the theme’s layouts/partials/head.html?

I’d appreciate any hints!

2

I read through the Tailwind documentation a while back and made a manic version of a purge configuration :wink:

  purge: {
    enabled: process.env.HUGO_ENVIRONMENT === "production",
    content: [
      "./hugo_stats.json",
      "./layouts/**/*.{vue,js,ts,jsx,tsx,html}",
      "./assets/**/*.{vue,js,ts,jsx,tsx,html}",
    ],
    extractors: [
      {
        extractor: (content) => {
          // noinspection JSUnresolvedVariable
          const els = JSON.parse(content).htmlElements;
          return els.tags.concat(els.classes, els.ids);
        },
        extensions: ["json"],
      },
    ],
    // in case of missing styles read this part of the documentation
    // https://tailwindcss.com/docs/optimizing-for-production#removing-all-unused-styles
    mode: "all",
    preserveHtmlElements: false,
    safelist: ["text-center"],
    // https://purgecss.com/configuration#options
    options: {
      // https://tailwindcss.com/docs/optimizing-for-production#removing-unused-keyframes
      keyframes: true,
      fontFace: true,
      variables: true,
      rejected: false,
    },
  },

You need to enable hugo_stats.json generation.

3

Thanks for the input. I tried this method previously using postcss-purgecss and it had the same issue, but I tried again using the purge option in the tailwind config and still nearly everything is purged.

It works as expected with the demo site in the theme repo which makes me wonder:

  • Is it a problem with the blog repo’s build process? The github workflow is nearly identical to the demo site’s.
  • Is the directory structure or configuration of the blog repo incorrect somehow?

These are the most noticeable differences between the functioning and disfunctioning repo.

Also to note: The css is purged correctly in local builds of each repo.

4

I mimicked the directory structure of the theme repo by symlink’ing the main directory into the theme dir and building from there. For some reason, this worked. Perhaps something to do with how the purge contents are specified in the tailwind config.

Additional insights would still be valuable as this seems like a hack…

5

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