Tailwindcss: [ISSUE] Purge CSS - Remove responsive and hover css class

[alexgilbertDG]

I'm using Gulp to create a build folders. I'm using basic html template and css files with tailwind css
@tailwind preflight; and @tailwind utilities; . When I try to purge all unused css classes, my output is working fine until i'm using responsive, hover classes (hover:, md:, lg:). So I think the issue is that the html class is md: and the css classes is md\: because css need to escape :

Maybe there is a option in my gulp file to make those two value equal.

There's my gulp config:

`

return gulp.src(['./css/main.css'])

    .pipe(postcss([
        tailwindcss('./tailwind.js'),
        require('autoprefixer'),
        require('postcss-flexibility') // make the display: -js flexibility trick for old browser // https://github.com/7rulnik/postcss-flexibility
    ]))
    .pipe(purgecss({
        content: ["index.html"],
        extractor: class TailwindExtractor {
            static extract(content) {
              return content.match(/[A-z0-9-:\/]+/g) || [];
            }
          }
    }))
    .pipe(cleanCSS({compatibility: 'ie8'}))
    .pipe(concat('main.min.css'))
    .pipe(gulp.dest('./css'));

`

I try using without the extractor class and it's the same thing.

Thanks

Version:
"devDependencies": {
"gulp-clean-css": "^3.9.0",
"gulp-concat": "^2.6.1",
"postcss-flexibility": "^2.0.0",
"tailwindcss": "^0.4.1"
},
"dependencies": {
"connect": "^3.6.5",
"gulp-clean": "^0.4.0",
"gulp-htmlmin": "^4.0.0",
"gulp-purgecss": "^0.20.0",
"gulp-uglify": "^3.0.0",
"purgecss-from-html": "^1.0.0",
"serve-static": "^1.13.1"
}
Node: 6.6.0

[adamwathan]

Hmm this should be handled by this commit to Purgecss from last November:

https://github.com/FullHuman/purgecss/commit/c99e597d2e49dc07b1b327399be6bd0ae11f882e

I can't reproduce it here, but either way this would be something to bring up as an issue on the Purgecss repo rather than here.

Going to close this as not a Tailwind issue, but if you want to share a small repository that reproduces this behavior I'm still happy to help troubleshoot.

[alexgilbertDG]

Go checkout this repo, simple gulp file with two versions of the same css, one purge, one not. The purge one don't work.
https://github.com/alexgilbertDG/TailwindcssTest

Thanks for the support ! I open a issue on the purgecss repo https://github.com/FullHuman/purgecss/issues/56

[tlgreg]

Seems like the issue is in the options.
extractor should be extractors (plural) and it should be an array of extractor objects, like so:

// ...
.pipe(purgecss({
    content: ["index.html"],
    extractors: [
        {
            extractor: TailwindExtractor,
            extensions: ['html']
        }
    ]
}))

[alexgilbertDG]

Thanks so much ! I just updated my repo with a working version, If tailwind want to shared it in the documentation https://tailwindcss.com/docs/controlling-file-size(Because right now there's no gulpfile doc) I got no problem with that.

[mwidmann]

Sorry, if I post in this closed issue @adamwathan , but using the configuration settings in https://tailwindcss.com/docs/controlling-file-size#setting-up-purgecss the purged css is missing all the responsive styles. I thus updated the config to look like this and it works.

const purgecss = require('@fullhuman/postcss-purgecss')({
  ...
  extractors: [
    {
      extractor: class TailwindExtractor {
        static extract(content) {
          return content.match(/[A-Za-z0-9-_:\/]+/g) || []
        }
      },
      extensions: ['css', 'html', 'vue'],
    },
  ],
  // defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
}

my full postcss.config.js looks like this for a nuxt.js project:

const purgecss = require('@fullhuman/postcss-purgecss')({
  // Specify the paths to all of the template files in your project
  content: ['./layouts/**/*.vue', './components/**/*.vue', './pages/**/*.vue'],
  whitelist: ['html', 'body'],

  extractors: [
    {
      extractor: class TailwindExtractor {
        static extract(content) {
          return content.match(/[A-Za-z0-9-_:\/]+/g) || []
        }
      },
      extensions: ['css', 'html', 'vue'],
    },
  ],
})

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    ...(process.env.NODE_ENV === 'production' ? [purgecss] : []),
  ],
}

[CvX]

@mwidmann what's your purgecss version? The defaultExtractor option used in the documentation has been added version 1.3.0.

[mwidmann]

I had version 1.1.0 (=latest) of @fullhuman/postcss-purgecss installed, but that came with [email protected] and had the issue.

I ran npm i -D @fullhuman/[email protected] and now I have [email protected] installed and it works now.

Thank you very much, @CvX

[CvX]

Btw. the latest version of @fullhuman/postcss-purgecss is 1.2.0: https://www.npmjs.com/package/@fullhuman/postcss-purgecss?activeTab=versions

That version specifically updates the purgecss dependency to 1.3.0. 🙂

[mwidmann]

I was looking in the github repository and there the latest release was 1.1.0 https://github.com/FullHuman/postcss-purgecss/releases. So many sources to check.... :)