It seems like it is impossible to safelist some TailwindCSS classes properly

Hello!

It seems like it is impossible to safelist some TailwindCSS classes properly, for example: safelist: ['px-6', 'py-6', 'px-16', 'py-8', 'm-4', 'm-3', '-mt-32', 'pb-8', 'h-3', 'pt-12', 'h-32', '-mt-10', 'md:mt-4', 'ml-20', 'mt-16', 'mt-0', 'mt-8', 'ml-2', 'w-3/12', 'w-4/12', 'w-2/12', 'ml-8', 'ml-12'] It doesn’t safelist some classes like w-3/12, w-2/12 etc.

“tailwindcss”: “^2.0.1” “@fullhuman/postcss-purgecss”: “^3.0.0”

[pranav-js]

anyone who came after looking for fix, use

defaultExtractor: (content) => {
    // Capture as liberally as possible, including things like `h-(screen-1.5)`
    const broadMatches = content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || [];

    // Capture classes within other delimiters like .block(class="w-1/2") in Pug
    const innerMatches = content.match(/[^<>"'`\s.()]*[^<>"'`\s.():]/g) || [];

    return broadMatches.concat(innerMatches);
  },

inside your purgecss.config.js

[leviwheatcroft]

There’s actually some published extractors, as well as more detailed documentation.

In my own case I’m using nuxt / vue & pug, so the class attribute in templates can end up being a bit of a mess, like this:

  .menu(
    :class="[ { hidden: !active }, { flex: active }, 'flex-col', 'md:flex', 'md:flex-row', 'items-center' ]"
  )

I modified the published purgecss-from-pug extractor and I’m using this:

import lex from 'pug-lexer'

const purgeFromPug = (content) => {
  // see:
  // https://github.com/pugjs/pug-lexer/blob/master/test/cases/classes.expected.json
  // for an example of what the lexer return structure looks like
  // see:
  // https://purgecss.com/extractors.html#creating-an-extractor
  // for details about extractors, as well as some examples.
  const tokens = lex(content)
  const selectors = []
  for (const token of tokens) {
    if (token.type === 'class')
      selectors.push(...token.val.split(' '))
    else if (
      token.type === 'attribute' &&
      (
        token.name === 'class' ||
        token.name === ':class' ||
        token.name === 'id'
      )
    )
      selectors.push(...(token.val.match(/[\w-/:]+(?<!:)/g) || []))
  }
  return selectors
}