tailwind tree shakes 'lg:' prefixed classnames added through a plugin even if added to safelist with a regex

[x-o1d]

What version of Tailwind CSS are you using?
v3.1.6

What build tool (or framework if it abstracts the build tool) are you using?
Nx

What version of Node.js are you using?
v16.14.2

What browser are you using?
any

What operating system are you using?
macOS

Reproduction URL
NA

Describe your issue
A tailwind plugin is used to read style values from a .js file and create tailwind utility classes.

// text-styles.js
export const TextStyles = {
  Display: {
    Large: {
      fontSize: '50px',
      fontWeight: 700,
      lineHeight: '120%',
    },
    Small: {
      fontSize: '28px',
      fontWeight: 600,
      lineHeight: '120%',
    },
  },
}

// tailwind.config.js

const { TextStyles } = require('./text-styles.js');

const TextStylesPlugin = {};
Object.keys(TextStyles).map(variant => {
  Object.keys(TextStyles[variant]).map(size => {
    TextStylesPlugin['.nextgen-' + variant.toLowerCase() + '-' + size.toLowerCase()] = TextStyles[variant][size];
  });
});

module.exports = {
  // other config
  plugins: [
    plugin(function ({ addUtilities }) {
      addUtilities(TextStylesPlugin)
    })
  ],
  safelist: [{
    pattern: /nextgen/
  }]
}

while the safelist pattern ensures that the utility class is available even if the ultimate className used in react is dynamically constructed, tailwind still treeshakes it's 'lg:' variant.

Expected behavior:

specifying pattern /nextgen/ should prevent both nextgen-display-${size} and lg:nextgen-display-${size} from being treeshaken.

Current behavior:

only nextgen-display-${size} is included in the final build css, lg:nextgen-display-${size} does not work.

[adamwathan]

Hey! See the docs, how this works is all explained there:

https://tailwindcss.com/docs/content-configuration#using-regular-expressions

Patterns can only match against base utility names like /bg-red-.+/, and won’t match if the pattern includes a variant modifier like /hover:bg-red-.+/.

If you want to force Tailwind to generate variants for any matched classes, include them using the variants option.

Here's a demo of it working with your code:

https://play.tailwindcss.com/jFCWmzSAXK?file=config

[x-o1d]

Thankyou so much!!