purge css with tailwind and Vue

postcss.config.js

// Props: https://dev.to/_mikhailbot/vue-cli-3-tailwindcss-and-purgecss-1d1k

const tailwindcss = require('tailwindcss')
const purgecss = require('@fullhuman/postcss-purgecss')
const autoprefixer = require('autoprefixer')
const postcssImport = require('postcss-import')

module.exports = {
  plugins: [
    postcssImport,
    tailwindcss('./tailwind.js'),
    purgecss({
      content: ['./src/**/*.vue'],
      extractors: [
        {
            extractor: class TailwindExtractor {
                static extract(content) {
                    return content.match(/[A-z0-9-:\/]+/g) || [];
                }
            },
            extensions: ['vue']
        }
      ]
    }),
    autoprefixer
  ]
}

Doesn't work with Vite 4.0.4, Node.js 19.x and tailwindcss 3.2.4

[vite:css] [postcss] Class constructor TailwindExtractor cannot be invoked without 'new'

tailwind.config.js:

const tailwindcss = require('tailwindcss')
const autoprefixer = require('autoprefixer')
const purgecss = require('@fullhuman/postcss-purgecss')
const cssnano = require('cssnano')

module.exports = {
  plugins: [
    tailwindcss({}),
    autoprefixer,
    purgecss({
      content: ['./src/**/*.vue'],
      extractors: [{
        extractor: class TailwindExtractor {
          static extract(content) {
              return content.match(/[A-z0-9-:\/]+/g) || [];
          }
        },
        extensions: ['vue']
      }]
    }),
    cssnano({})
  ],
}

That Gist is 3 years old. Tailwind iterated 2 major versions since then, and I think purgeCSS no longer required since Tailwind 2 implements all of that itself.

Yeah... the v2 implemented it, then they killed it in v3 so this gist became needed again :) I made it work with the latest version (3.2.x).

https://github.com/padcom/tailwind-example/blob/master/postcss.config.js