6

fairly new to Tailwind and PostCSS/PurgeCSS, so hoping this is a fairly simple fix.

In my tailwind.config.js, I am extending some of the spacing values, including adding a 0.5 value to align with the default Tailwind spacing scale. My file looks like this (extract):

module.exports = {
    important: false,
    theme: {
        spacing: {
            '0.5': '0.125rem',
        },
    },
}

I'm then using PostCSS to compile my CSS, which looks as follows, as you can see I'm using a bunch of plugins which work great:

module.exports = {
    parser: 'postcss-scss',
    plugins: [
        require('postcss-import'),
        require('postcss-nested'),
        require('postcss-responsive-type'),
        require('tailwindcss'),
        require('autoprefixer'),
        require('cssnano'),
    ]
}

Up to this point, all working great! However, I want to purge the css to remove all of the unused utility classes that Tailwind creates. This effects my postcss file as follows:

module.exports = {
    parser: 'postcss-scss',
    plugins: [
        require('postcss-import'),
        require('postcss-nested'),
        require('postcss-responsive-type'),
        require('tailwindcss'),
        require('autoprefixer'),
        require('@fullhuman/postcss-purgecss')({
            content: [
                './*.php',
                './**/*.php',
            ],
            defaultExtractor: content => content.match(/[\w-:/]+(?<!:)/g) || []
        }),
        require('cssnano'),
    ]
}

This is the point at which I lose some styles, specifically the specially configued Tailwind ones such as .h-0.5.

I siuspect the issue is within the defaultExtractor line?

defaultExtractor: content => content.match(/[\w-:/]+(?<!:)/g) || []

Anyone able to lend a hand? Thanks

dungey_140
  • 2,602
  • 7
  • 34
  • 68

2 Answers2

5

Solved! It was, as expected, very simple. I was simply missing the '.' for the defaultExtractor:

defaultExtractor: content => content.match(/[\w-:./]+(?<!:)/g) || []
fredrivett
  • 5,419
  • 3
  • 35
  • 48
dungey_140
  • 2,602
  • 7
  • 34
  • 68
  • 1
    yet "." Is not being excluded? defaultExtractor: content => content.match(/[\w-:./]+(?<!:)/g) || [] – soria Jan 19 '21 at 05:59
  • I've used @soria's comment and @dupflo's answer to do an edit here, the author clearly intended to include the `.` but it was omitted, this is now fixed – fredrivett Mar 22 '22 at 12:37
  • 3
    (Repost) Tailwind now also allows classes like: `w-[100px]` or `bg-[#A1B2C3]`. I've added the allowance of: `[`, `]`, `%` and `#` into the regex to support those too: `/[\w\-:.\/\[#%\]]+(?<!:)/g` – Kerwin Sneijders May 05 '22 at 12:51
  • This doesn't work with tailwindcss 3.2; any updates on this one? – Ali Baghban Mar 07 '23 at 09:01
2
defaultExtractor: (content) => content.match(/[\w-:./]+(?<!:)/g) || [],

Fixed it

Dupflo
  • 305
  • 3
  • 7