safelist documentation

[LegendSebastianoL]

Is your feature request related to a problem?

I was upgrading and following the guide but I had some problems with the safelist option due to a functional component that works like this:

    :class="[
      data.staticClass,
      data.class,
      {
        [`col-span-${props.span}`]: props.span,

where span it's just a number and of course, the jit will never see those classes, and following the documentation didn't help get the desired result.

Describe the solution you'd like

By adding this example to the documentation I think that people would benefit from it, and maybe explain as well that dynamic classes created like that would be ignored by jit, you can see it in the video on their own page https://tailwindcss.com/docs/upgrade-guide

  safelist: [
    'whitelisted',
    {
      pattern: /col-(span|start)-\d*$/,
      variants: ['sm', 'md', 'lg', 'xl']
    }
  ]

My jit it's supposed to be disabled, this is the nuxt.config.js code

  tailwindcss: {
    cssPath: '~/assets/css/tailwind.css',
    configPath: 'tailwind.config.js',
    jit: false,
    viewer: false
  },