Tailwindcss: Purge fails if used in combination with important: '#app'

[alanquigley-toast]

If I run purge with important set to true it works as expected. But when I switch to a string it fails unless I add additional space at the end of the string.

// fails
important: '#app'

// works
important: '#app '

My postcss configuration is as follows.

module.exports = {
  plugins: [
    require('postcss-easy-import'),
    require('postcss-url'),
    require('tailwindcss')(require('./tailwind.config.js')),
    require('postcss-nested'),
    require('postcss-preset-env')({
      stage: 4,
      features: {
        'custom-properties': true
      }
    }),
    require('postcss-flexbugs-fixes'),
    require('postcss-reporter')({ clearAllMessages: true })
  ]
}

[estevanmaito]

Could you be more specific on fails? It shows an error, it purges the wrong classes, it doesn't purge at all...

I'm also leaving the docs for the important config if you didn't read it already, maybe it could solve your problem https://tailwindcss.com/docs/configuration/#important

[gilesbutler]

I'm experiencing this issue too. It just took hours to figure out why all my styles were being purged unless I used /* purgecss start ignore */.

Disabling important: "#app" fixed things.

I don't see any errors on my end @estevanmaito. It just doesn't included any of the Tailwind classes in the output css.

Thanks

[alanquigley-toast]

By fail, I mean that all classes tailwind generated are purged. After reading the documents again I did identify a solution, if I use the app root and not an arbitrarily defined root then it seems to work.

Using the top-level root works #root

const root = document.getElementById('root')

Defining an internal root #inner-root fails to return any classes from the purge.

const root = document.getElementById('root')

ReactDOM.render(
  <div id='#inner-root'>
    <App />
  </div>,
  root
)

The documentation is accurate, but it may be worth expanding a to include this use-case.

[adamwathan]

Can you create a simple project that reproduces the issue? We got a lot of issues that require me to manually recreate someone's project from scratch and I unfortunately just don't have time for that so things end up going unfixed. If you can provide something I can clone and start troubleshooting with right away it's much easier for me to find time to diagnose and fix the issue.

[ericchernuka]

@adamwathan I actually ran into this today and whipped up a fork of the repo with the failing test. https://github.com/ericchernuka/tailwindcss/blob/purge-unused-styles-with-important-id/__tests__/purgeUnusedStyles.test.js

It looks as though purgecss strips most of the tailwind generated classes due to the additional specificity #tailwind > .bg-red-500.

I did find an issue in purgecss regarding this (https://github.com/FullHuman/purgecss/issues/207), but it indicates that to use the whitelist feature, but I wasn't able to get that to actually work as intended.

[adamwathan]

Passes here, as long as I update the fixtures to actually include id="tailwind" somewhere. If you don't have that in your HTML somewhere then those classes _should_ be purged, since they don't match anything in your HTML and have no effect.

Here's the commit showing the updated test and updated text fixture:

https://github.com/tailwindlabs/tailwindcss/commit/2903811767fa03f559e644b5732f0ec3af32f3fd

If for some reason you can't scan the template that contains the ID you are adding, you can use the whitelist feature like this:

module.exports = {
  purge: {
    options: {
      content: [
        // Paths to scan for classes...
      ],
      whitelist: ['tailwind' /* or 'app' or whatever */],
    },
  },
}

[adamwathan]

Closing as everything seems to be working as expected here and haven't seen a reproduction yet.