TypeError: Cannot read property 'extractor' of undefined

[thariddler]

Using Tailwind and Vue webpack starter

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

What's the problem?

[JNavith]

Hi, what I believe is happening is that you have a file in the glob done in the content array that does not have an accompanying extractor. I suspect it's the .styl files because they are not included in the extensions for the TailwindExtractor.

Since I just learned from a Google search that .styl is Stylus, a CSS pre-processing language, you should exclude it from your content array because it is not HTML-like. This should fix your problem -- but I'm sorry if it doesn't because this is just the knowledge I got from solving a similar problem for myself.

Edit: Also consider removing "js" from the extensions of your first and only extractor because you do not have any .js files in the content array.