When using it in a React component that would compute the full class name,
one would like to use it in Tailwind's safelist config:
safelist: [
{ pattern: /^icon(-.*)?$/ },
],
but it shows up a warning in the build output:
warn - The safelist pattern `/^icon(-.*)?$/` doesn't match any Tailwind CSS classes.
warn - Fix this pattern or remove it from your `safelist` configuration.
warn - https://tailwindcss.com/docs/content-configuration#safelisting-classes
When using it in a React component that would compute the full class name, one would like to use it in Tailwind's
safelistconfig:but it shows up a warning in the build output:
Unfortunately, this is an unexpected bug with no fix : https://github.com/tailwindlabs/tailwindcss/discussions/7406
Instead, let's always include these classes when imported, by removing it from the
@layer componentsdirective.