PurgeCSS ignores the used classes

Question

Fairly new to Tailwind and PostCSS/PurgeCSS, im trying to reduce the size of my CSS file. Before adding some custom css in the tailwind.css file below @tailwind base... and some variables like h-(screen-1.5) in my tailwind.config file, i have noticed the it's working! When i run npm run production i don't find the classes of tailwind like flex... in my build folder but i find the added custom classes! here is an example of the added custom css

@tailwind base;
@tailwind components;
@tailwind utilities;

.toggle-checkbox:checked {
    @apply: right-0;
    right: 0;
    border-color: #3db992;
}
.toggle-checkbox:checked + .toggle-label {
    background-color: #3db992;
}

@media (min-width: 400px) {
    .btn:before {
        content: '';
        width: 15px;
        height: 15px;
        position: absolute;
        top: 13px;
        left: 14px;
        background: url(../img/ic.svg) no-repeat;
    }
}

<div class="flex flex-col sb:flex-row items-center max-w-screen-hp mx-auto px-3 md:px-6"></div>

I have tried to add the comments / purgecss start ignore / and / purgecss end ignore / but in vain, i don't know if it has something to do with the Extractor! here is my postcss.confige code :

const purgecss = require('@fullhuman/postcss-purgecss')({
  content: ['./public/**/*.html'],
  defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
})
module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    ...process.env.NODE_ENV === 'production'
      ? [purgecss, require('cssnano')]
      : []
  ]
}

Answer 1

Tailwind CSS has PurgeCSS built-in. This page will help you to remove unused styles in tailwindcss.

https://tailwindcss.com/docs/controlling-file-size