Issue with using {color} in app.config.ts variants

[letoast]

Environment

---

• Operating System: Linux
• Node Version: v18.20.3
• Nuxt Version: 3.12.4
• CLI Version: 3.12.0
• Nitro Version: 2.9.7
• Package Manager: [email protected]
• Builder: -
• User Config: modules
• Runtime Modules: @nuxt/[email protected]
• Build Modules: -

---

Version

2.18.1

Reproduction

https://stackblitz.com/edit/nuxt-ui-snm3l2?file=app.config.ts

Description

If using {color} in app.config.ts variants (https://ui.nuxt.com/getting-started/theming#smart-safelisting), even with "primary", the generated classes are ignored by tailwind. See reproduction (hover classes)

Additional context

No response

Logs

No response

[letoast]

Update 4. aug. 2024: Managed to reproduce the issue, updated the reproduction link. Please help.

Update 3. aug. 2024: the issue still appears. After clearing my .nuxt folder, it came back. It looks like tailwind is not safelisting those classes. The problem is that I'm not able to reproduce it easily in stackblitz, because our project is quite complex (lots of nuxt layers). I'll try to reproduce it and if I manage, I will reopen the issue.

Update: 2. aug. 2024: Found out that the issue in the reproduction was the preferred color mode: system. Also I removed @nuxtjs/tailwindcss from my project (because it's included with @nuxt/ui) and it seems to have fixed the problem.

[benjamincanac]

Since hover:text-{color}-100 class doesn't exist, you need to safelist this class like we do here for example: https://github.com/nuxt/ui/blob/8d9b89dec7a82fab1379af0d7e7f237735ef3454/src/runtime/utils/colors.ts#L63

You can read more about this here: https://tailwindcss.com/docs/content-configuration#safelisting-classes

You can achieve this in your tailwind.config.ts:

import type { Config } from 'tailwindcss'

export default <Partial<Config>>{
  safelist: [{
    pattern: RegExp(`^text-(red|blue)-100$`),
    variants: ['hover']
  }]
}

It will be much easier in v3 as we've completely drop the need for safelists.

[letoast]

Since hover:text-{color}-100 class doesn't exist, you need to safelist this class like we do here for example: https://github.com/nuxt/ui/blob/8d9b89dec7a82fab1379af0d7e7f237735ef3454/src/runtime/utils/colors.ts#L63

You can read more about this here: https://tailwindcss.com/docs/content-configuration#safelisting-classes

You can achieve this in your tailwind.config.ts:

import type { Config } from 'tailwindcss'



export default <Partial<Config>>{

  safelist: [{

    pattern: RegExp(`^text-(red|blue)-100$`),

    variants: ['hover']

  }]

}

It will be much easier in v3 as we've completely drop the need for safelists.

Right, but the documentation explicitly says

The module uses the Tailwind CSS safelist feature to force the generation of all the classes for the primary color only as it is the default color for all the components.

And I've used primary there.

I've looked through your source code and if I remember correctly nuxt/ui safelists only a few classes (bg- and some others), which means I have to safelist a load of classes. It's not just text-{color}- that I've used and the repro is just an example.

EDIT: Just an edit to my comment. The above might have come out in a negative way, but it wasn't meant so. I should have added above that a caveat in the documentation (that not all primary classes are actually generated) might be the right thing to do as there might be others who try to do the same.

[github-actions[bot]]

This issue is stale because it has been open for 30 days with no activity.

[github-actions[bot]]

This issue is stale because it has been open for 30 days with no activity.

[cesswhite]

It will be much easier in v3 as we've completely drop the need for safelists.

Hi! @benjamincanac I'm currently using version 3 of Nuxt UI, but when setting up the safelist in tailwind.config.ts, it doesn't seem to work. How can something similar be implemented?

Thanks in advance

config file

import type { Config } from 'tailwindcss'
export default <Partial<Config>>{
  safelist: [
    {
      pattern: /ring-(slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(50|100|200|300|400|500|600|700|800|900|950)/,
    },
    {
      pattern: /accent-(slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(50|100|200|300|400|500|600|700|800|900|950)/,
    },
    {
      pattern: /text-(slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(50|100|200|300|400|500|600|700|800|900|950)/,
    },
    {
      pattern: /bg-(slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(50|100|200|300|400|500|600|700|800|900|950)/,
    },
    {
      pattern: /from-(slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(50|100|200|300|400|500|600|700|800|900|950)/,
    },
    {
      pattern: /from-(0%|5%|10%|15%|20%|25%|30%|35%|40%|45%|50%|55%|60%|65%|70%|75%|80%|85%|90%|95%|100%)/,
    },
    {
      pattern: /to-(slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(50|100|200|300|400|500|600|700|800|900|950)/,
    },
    {
      pattern: /to-(0%|5%|10%|15%|20%|25%|30%|35%|40%|45%|50%|55%|60%|65%|70%|75%|80%|85%|90%|95%|100%)/,
    },
    {
      pattern: /via-(slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(50|100|200|300|400|500|600|700|800|900|950)/,
    },
    {
      pattern: /via-(0%|5%|10%|15%|20%|25%|30%|35%|40%|45%|50%|55%|60%|65%|70%|75%|80%|85%|90%|95%|100%)/,
    },
    {
      pattern: /bg-linear-to-(t|tr|r|br|b|bl|l|tl)/,
    },
  ],
}

[benjamincanac]

@cesswhite You don't need safelists with Nuxt UI v3, would you mind opening a new issue with a reproduction of what you're trying to achieve?

[cesswhite]

@benjamincanac The goal is to rebuild this tool: https://www.onamu.dev/ using UI v3. It's a tool for dynamic gradients, and the main objective is to ensure that all gradients are available, as we previously achieved with the safelist. However, some colors are not displaying correctly

Before submitting an issue, I’d like to confirm whether it’s truly an issue or just a mistake on my part.

[benjamincanac]

@cesswhite The safelist feature doesn't exists in Tailwind CSS v4, not sure to understand why you need it 🤔

[github-actions[bot]]

This issue is stale because it has been open for 30 days with no activity.

[albertpratomo]

I can confirm that I also get this bug in Nuxt UI v2.19.2

@benjamincanac Is there a plan to fix this in v2?

[benjamincanac]

@albertpratomo What bug? The solution to safelist classes has already been given above.

[albertpratomo]

@benjamincanac So do you mean the "Smart safelisting" feature by Nuxt UI is not working?

And that we have to manually safelist classes via Tailwind config regex?

[benjamincanac]

I didn't mean that no, the smart safelisting is working fine. The smart safelisting applies when using Vue components, it's unrelated to the classes you write in your app.config.ts. As mentioned, here is the answer above https://github.com/nuxt/ui/issues/2007#issuecomment-2273551754 when using -{color}-. If it doesn't solve your issue or is unrelated, please open a new one with a reproduction.

[albertpratomo]

Ah okay, from the docs I assumed that the smart safelisting will check the classes I wrote in app.config.ts too. So seems like this assumption is wrong.

// in app.config.ts
ui: {
    button: {
      variant: {
        solid: 'bg-{color}-700',
      },
    },
}

// in nuxt.config.ts
ui: {
    safelistColors: ['primary'],
},

// in App.vue
<template>
  <UButton />
</template>

to clarify: Nuxt UI won't automatically safelist bg-primary-700?

[albertpratomo]

@benjamincanac sorry to ping, could you confirm?