Bug? Safelist Includes Opacity for Every Pattern Defined.

[digidux]

Hello there!

I'm trying to add these colors to the safelist in tailwind.config.js:

pattern: /text-x(0|1|2|3|4|5|6|7|8|9)(cat|dog)/

The problem is that after compiling the assets, Tailwind outputs the opacity for every color mentioned above. (Eg. text-x0cat/5, textx0cat/10).

Is this a bug, or a feature? Is there any way to omit the opacity versions for the text-x0cat?

P/S - I need to safelist these because the quiz generates the classes dynamically by using a JS function.

[wongjn]

It is fundamentally how regular-expression-safelist works. The pattern will safelist any class candidates that match. text-x0cat/5, text-x0cat/10, etc. are class candidates like any other class and Tailwind makes no special treatment when matching with pattern.

If you want to exclude these opacity-modified classes, consider being more strict with your regular expression, something like:

/^text-x(0|1|2|3|4|5|6|7|8|9)(cat|dog)$/

Or slightly simplified to:

/^text-x\d(cat|dog)$/

[digidux]

Ah regex. I guess I forgot the first principle of writing the pattern. Thanks!