Safelist causing build failures

[paulvonber]

Version

@nuxtjs/tailwindcss: 6.12.0 @nuxt/ui: 2.15.2 nuxt: 3.11.2

Having a safelist array in tailwind.config.{js,ts} messing up the build

[ineshbose]

Hi, thanks for opening an issue - this bug makes sense. Can you share your Tailwind configuration, or is this coming from nuxt/ui?

[paulvonber]

That's my tailwind.config.js so everything is ok unless I add safelist

[ineshbose]

Config here for reference:

export default {
  safelist: [
    {
      pattern: /^(bg|border|text)-(neutral|gray)-(50|100|200)$/,
      variants: ['md', 'lg', 'hover', 'group-hover']
    }
  ]
}

[ineshbose]

Sorry, I'm not able to replicate it. Do you think you can create a reproduction?

Use https://stackblitz.com/github/nuxt/starter/tree/v3-stackblitz or https://stackblitz.com/github/nuxt-modules/tailwindcss as a starter.

[stevenhurth]

Using NuxtUI, we had the exact same issue yesterday, with the safelist pattern/variants defined in our nuxt.config.ts file.

To keep development moving along, we were able to get rid of the safelist entirely by reworking some dynamic widths, but the WARN message regarding functional plugins in the tailwindcss.config still resides, and now intellisense no longer works.

For reference, this was our config before nixing the safelist entirely.

tailwindcss: {
    config: {
        safelist: [
            {
                pattern: /^w-(\d+\/\d+|full)$/,
                variants: ["sm", "md", "lg", "xl"]
            }
        ]
    }
}

[ineshbose]

Using NuxtUI, we had the exact same issue yesterday, with the safelist pattern/variants defined in our nuxt.config.ts file.

To keep development moving along, we were able to get rid of the safelist entirely by reworking some dynamic widths, but the WARN message regarding functional plugins in the tailwindcss.config still resides, and now intellisense no longer works.

For reference, this was our config before nixing the safelist entirely.

tailwindcss: {

    config: {

        safelist: [

            {

                pattern: /^w-(\d+\/\d+|full)$/,

                variants: ["sm", "md", "lg", "xl"]

            }

        ]

    }

}

Thanks for chiming in @stevenhurth. There's a PR open in NuxtUI to support this latest feature. With your config however (thanks for reference), the regex in safelist would need to move to a tailwind.config file as its non-serialisable. Perhaps the module isn't detecting this and putting you back to the old version so the build is failing - I'll provide a fix for backwards compatibility but can you confirm if moving this to a separate config file helps?

[stevenhurth]

@ineshbose

I gave it a shot, but it's still a no-go. The error gets logged x73, even when in it's own tailwind.config.

export default {
  safelist: [
    {
      pattern: /^w-(\d+\/\d+|full)$/,
      variants: ["sm", "md", "lg", "xl"]
    }
  ]
}

[ineshbose]

Okay I was testing usage of safelist on project without nuxt/ui, but I can confirm this issue.

I traced it back to this code causing the issue: https://github.com/nuxt/ui/blob/8d9d9736ba6a0f25d8cd0b60e1ca50b072a3d176/src/module.ts#L149

and this should be solved by https://github.com/nuxt/ui/pull/1665 🙂

[fasterv410]

I also got this problem while npm run build https://stackblitz.com/edit/nuxt-starter-urujx1?file=tailwind.config.ts

"@nuxt/ui": "^2.15.2",
"nuxt": "^3.11.2"

[ineshbose]

Going to provide a fix for this in 6.12.1 🙂

[ineshbose]

It should not crash (but give a soft warning) on nightly now if you would like to confirm. Will release accordingly 🙂

[ineshbose]

Would someone like to confirm if nightly works with their project? :)

[SergkeiM]

Hi @ineshbose

I can confirm is working now.

My use case:

I have a NuxtModule that installs @nuxtjs/tailwindcss and sets some default for tailwind.

Some code:

import { installModule } from '@nuxt/kit'
export default defineNuxtModule<ModuleOptions>({
    meta: {
        name: 'myModule',
        configKey: 'myModule'
    },
    defaults(nuxt) {
        return {
            enabled: true,
            screens: {
                sm: '576px',
                md: '768px',
                lg: '992px',
                xl: '1200px',
                xxl: '1400px'
            },
        }
    },
    async setup (options, nuxt) {
          nuxt.hook('tailwindcss:config', function (tailwindConfig) {
                 tailwindConfig.theme.screens = options.screens

                 tailwindConfig.safelist = [
                       ...(tailwindConfig.safelist || []),
                       {
                           pattern: /^col-([1-9]|1[0-2])$/,
                           variants: ['sm', 'md', 'lg', 'xl', 'xxl'],
                       }
                 ]
          })
          await installModule('@nuxtjs/tailwindcss')
    }

In version v6.12.0 this doesn't work as it strips out the regex, in nightly build (6.12.1-1715798143.63a8a8e) this works, but it gives this warnings

[nuxt:tailwindcss 2:18:06 PM]  WARN  A hook has injected a non-serializable value in config["plugins"], so the Tailwind Config cannot be serialized. Falling back to providing the loaded configuration inlined directly to PostCSS loader.. Please consider using a configuration file/template instead (specifying in configPath of the module options) to enable additional support for IntelliSense and HMR.

[nuxt:tailwindcss 2:18:06 PM]  WARN  A hook is injecting RegExp values in your configuration (check config["safelist"]) which may be unsafely serialized. Consider moving your safelist to a separate configuration file/template instead (specifying in configPath of the module options)

Can you point me with correct direction on how to to make this correctly so warnings will not appear? The warning message is not clear for me. Thank you.

[ineshbose]

I can confirm is working now.

Many many thanks for confirming. :pray:

I have a NuxtModule that installs @nuxtjs/tailwindcss and sets some default for tailwind. ... In version v6.12.0 this doesn't work as it strips out the regex, in nightly build (6.12.1-1715798143.63a8a8e) this works, but it gives this warnings ... Can you point me with correct direction on how to to make this correctly so warnings will not appear? The warning message is not clear for me. Thank you.

Sure - it's the RegExp value being added by your hook that would be better to add via a template. I'm just working on #853 that adds an example to the docs on how you can author a module to extend the Tailwind configuration; if you see the Stackblitz example here, based on that, we can change your module code to this:

import { installModule, addTemplate } from '@nuxt/kit'
export default defineNuxtModule<ModuleOptions>({
    meta: {
        name: 'myModule',
        configKey: 'myModule'
    },
    defaults(nuxt) {
        return {
            enabled: true,
            screens: {
                sm: '576px',
                md: '768px',
                lg: '992px',
                xl: '1200px',
                xxl: '1400px'
            },
        }
    },
    async setup (options, nuxt) {
          nuxt.hook('tailwindcss:config', function (tailwindConfig) {
                 tailwindConfig.theme.screens = options.screens
          })

          const configTemplate = addTemplate({
            filename: 'myModule-tw.config.mjs',
            write: true,
            getContents: () => `export default { safelist: [{ pattern: /^col-([1-9]|1[0-2])$/, variants: ['sm', 'md', 'lg', 'xl', 'xxl'] }] }`
          })
          await installModule('@nuxtjs/tailwindcss', {
            configPath: [
              configTemplate.dst,
              join(nuxt.options.rootDir, 'tailwind.config')
            ]
         })
    }

(above code may have minor syntax issues as I'm on mobile). I appreciate that 6.12.0 requires module authors to write this little bit of code more, but it helps the module consumers to work with their configuration in a more safe and efficient way.

I hope this helps - let me know! 🙂

[SergkeiM]

Hi @ineshbose

Thank you a lot, works like a charm now.

module authors to write this little bit of code more

But is definetly better and cleaner. Great work thank you a lot.