Support using theme in safelist

[olets]

A common need for me is to safelist classes with a pattern built out of something in the theme. Generic example:

const theConfig = { /* … */ }

module.exports = {
  safelist: [
    {
      pattern: new RegExp(`^classkey-(${Object.keys(theConfig).join('|')})$`),
      variants: [],
    },
  ],
  theme: {
    theKey: theConfig,
    // …
  },
  // …
}

In practice, the code above the export is much longer — on a recent project, about 250 lines. (Beside the point but, for anyone thinking "that's breaking the Tailwind idiom, don't safelist that much!", this is to support dynamic styles —e.g. CMS editors selecting a color from a dropdown— and the UI library —e.g. having a page that shows the design system's typography options.)

My config file would look more "standard" (theme values right in the theme object not bound outside it), and I'd do less scrolling, if safelist knew about theme, like theme and plugins do. I propose supporting this:

module.exports = {
  safelist: ({ theme }) => ([
    {
      pattern: new RegExp(`^classkey-(${Object.keys(theme('theKey')).join('|')})$`),
      variants: [],
    },
  ]),
  theme: {
    theKey: { /* … */ },
    // …
  },
  // …
}