Safelist causing build failures

[Paul G]

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

[Inesh Bose]

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

[Paul G]

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

[Inesh Bose]

Config here for reference:

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

[Inesh Bose]

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"]
            }
        ]
    }
}

[Inesh Bose]

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"]
    }
  ]
}

[Inesh Bose]

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 nuxt/ui#1665 🙂

[Thiraphat Yotharak]

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"

[Inesh Bose]

Going to provide a fix for this in 6.12.1 🙂

[Inesh Bose]

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