Unclear how preserveHtmlElements works with Hugo

[jensamunch]

Hugo calls purgecss manually (see below) and preserveHtml doesn't seem to be respected
since eg. blockquote is purged.

What's the recommended way to do this?

const autoprefixer = require('autoprefixer')({
})

const purgecss = require('@fullhuman/postcss-purgecss')({

  // Specify the paths to all of the template files in your project
  content: [
    'layouts/**/*.html',
  ],
  whitelist: ['bg-paceA', 'bg-paceB', 'bg-paceC', 'bg-paceD', 'h1', 'h2', 'h3', 'p', 'blockquote', 'strong'],

  // This is the function used to extract class names from your templates
  defaultExtractor: content => {
    // Capture as liberally as possible, including things like `h-(screen-1.5)`
    const broadMatches = content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || []

    // Capture classes within other delimiters like .block(class="w-1/2") in Pug
    const innerMatches = content.match(/[^<>"'`\s.()]*[^<>"'`\s.():]/g) || []

    return broadMatches.concat(innerMatches)
  }
})

module.exports = {    
    plugins: [        
        require('postcss-import'),
        require('tailwindcss')('assets/css/tailwind.config.js'),
        ...(process.env.HUGO_ENVIRONMENT === 'production' ? [purgecss] : []),
        ...(process.env.HUGO_ENVIRONMENT === 'production' ? [autoprefixer] : []),
    ]
}

[adamwathan]

If Hugo is using PurgeCSS directly and not the Purge functionality built in to Tailwind, then Tailwind's purge options will have no effect since Hugo is completely bypassing them.

Personally I would use the built-in Purge and enable it manually based on the HUGO_ENVIRONMENT variable.

I would expect this configuration to do what you want:

// postcss.config.js
const autoprefixer = require("autoprefixer")({});

module.exports = {
  plugins: [
    require("postcss-import"),
    require("tailwindcss")("assets/css/tailwind.config.js"),
    ...(process.env.HUGO_ENVIRONMENT === "production" ? [autoprefixer] : []),
  ],
};

// tailwind.config.js
module.exports = {
  purge: {
    enabled: process.env.HUGO_ENVIRONMENT === "production",
    content: ["layouts/**/*.html"],
    options: {
      whitelist: ["bg-paceA", "bg-paceB", "bg-paceC", "bg-paceD"],
    },
  },
  // ...
};

[jensamunch]

thanks adam that works well! was not clear from documentation but hopefully this will help somebody else as well!