Tailwind safelist patterns for multiple patterns?

dungey_140 0
Viewed 66

I'm trying to use safelist patterns (formerly whitelist patterns) with Tailwind CSS V3.1.6 and have the following. It's not working, but essentially I'm trying to safelist all values beginning with bg-, text- and border-

safelist: [
  // Retain all classes starting with...,
  {
    pattern: /bg-/,
    pattern: /text-/,
    pattern: /border-/,
  },
],
tailwind-css
1 Answers

You can safelist multiple entrances within an array of objects like

safelist: [
  {pattern: /bg-./},
  {pattern: /text-./},
  {pattern: /border-./},
]

but in your case it would be shorter to use pipe sign "|"

safelist: [
  {pattern: /(bg|text|border)-./}
]

More about safelisting with regular expressions can be found here

Ihar Aliakseyenka0
Related