Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for alpha values in safelist #8774

merged 1 commit into from Jul 4, 2022


Copy link

This PR adds support for opacity values when safe listing utilities. You can specify these opacity values in the pattern used to generate the utilities like so:

safelist: [
    pattern: /^bg-(red)-(100|200)(\/40|50)?$/,
    variants: ['hover'],

Note that the opacity modifier in the above pattern is optional which means we'll generate the bare utility along side the utility with an opacity. The pattern above will generate the following classes: bg-red-100, bg-red-100/40, bg-red-100/50, bg-red-200, bg-red-200/40, bg-red-200/50 as well as all their hover variants.

With this change it becomes more important to anchor your patterns with ^ and $ as the pattern /bg-red-100/ will generate bg-red-100, bg-red-100/5, bg-red-100/10, bg-red-100/20, etc… which may not be what you want. Anchoring your patterns will address this issue.

Supersedes #7674

Co-authored-by: Petr Novak <>
@thecrypticace thecrypticace merged commit 1029775 into master Jul 4, 2022
@thecrypticace thecrypticace deleted the feature/alpha-in-safe-list branch July 4, 2022 20:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
None yet

Successfully merging this pull request may close these issues.

None yet

1 participant