Purging more classes then expected

[michaelsmedley]

Hi all

Got a very strange one here - when I run PurgeCSS, I am seeing more CSS classes being removed then I expect.

I currently have a set up using Tailwind CSS and PurgeCSS. I would put together a demo repo, however the project I am using it in uses the Vue Storefront framework, so it's a bit tricky for me to get it setup sorry, hopefully I will be able to explain the scenario clearly though:

I have the following code in a template - this isn't being called as an additional component and is just coded into a page file:

<section class="intro text-center pt-4 pb-7">
      <header-group :level="1" class="text-text-primary">
        <template #supertitle>
          <span class="text-text-secondary">Your Local</span>
        </template>
        Fencing &amp; Decking Specialists
      </header-group>
    </section>

When this is run through PurgeCSS, all classes remain except for the .pt-4 class - in fact a majority of any of my .pt-* classes seem to be stripped, despite being used on several elements. I have also noticed that I am losing responsive classes too, which Tailwind css defines as i.e. md: bg-blue lg:bg-red

I am currently using ^1.3.0 of the @fullhuman/postcss-purgecss plugin. My webpack configuration for PurgeCSS is currently:

const purgecss = require('@fullhuman/postcss-purgecss')({
  content: [
    path.join(themeRoot, '/components/theme/*.vue'),
    path.join(themeRoot, '/components/theme/**/*.vue')
  ],
  defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
})

const postcssConfig = {
  loader: 'postcss-loader',
  options: {
    ident: 'postcss',
    plugins: loader => [
      require('tailwindcss')(path.join(themeRoot, 'tailwind.config.js')),
      require('postcss-flexbugs-fixes'),
      require('autoprefixer')({
        flexbox: 'no-2009'
      }),
      ...(process.env.NODE_ENV === 'production' ? [purgecss] : [])
    ]
  }
}

This is based on the recommendation from the Tailwind CSS docs.

I understand that there are a few more variables in the way rather then a standard setup, but if anybody has any pointers for me on either of my issues I would be very grateful

Thanks all