‘Basic usage’ of purging removes pseudo-elements from modern-normalize

Many thanks for making Tailwind available.

When purging is enabled as per the basic usage in the documentation, pseudo-element selectors such as ::-moz-focus-inner are removed from the modern-normalize styles. (Selectors such as [type='reset'] are also removed from modern-normalize styles, but I expect this is because no such elements exist in the content I’m feeding purge, and so probably makes sense.)

To avoid this, I’m using layers: ['components', 'utilities'] in the purge config. This ability to restrict purging is mentioned in the documentation, but the connection to preserving the reset is not made clear, which I expect means many users of Tailwind will be missing normalizing styles without realising.

Can/should the base layer be exempted from purging by default?

[bjuppa]

For anyone in need of a quick fix, here’s an example tailwind.config.js with a safelist option added to keep the pseudo element selectors starting with : from being purged:

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
    purge: {
        content: [
            './vendor/laravel/jetstream/**/*.blade.php',
            './storage/framework/views/*.php',
            './resources/views/**/*.blade.php',
        ],
        options: {
            safelist: [/^:/],
        },
    },

    // ...
}

Perhaps it’d make sense for Tailwind to add the pattern /^:/ by default to purgecss’ safelist config? If it is possible to push a regex onto the preserved list as @TheEskhaton suggested, I think that’d be great!

Here’s the full list of selectors used in Tailwind you’d expect to be kept but are currently purged:

• ::-moz-focus-inner
• :-moz-focusring
• :-moz-ui-invalid
• ::-webkit-inner-spin-button+ ::-webkit-outer-spin-button
• ::-webkit-search-decoration
• ::-webkit-file-upload-button
• ::-webkit-datetime-edit-fields-wrapper
• ::-webkit-date-and-time-value

[adamwathan]

Good catch, we’ll look into coming up with a solution for this. I think ideally we should try to find a way to make PurgeCSS only purge class selectors by default and not base elements or attribute selectors.