Missing tailwind classes for dynamic colors

[MickL]

Environment

------------------------------
- Operating System: Darwin
- Node Version:     v21.6.1
- Nuxt Version:     3.13.1
- CLI Version:      3.13.1
- Nitro Version:    2.9.7
- Package Manager:  bun@1.1.26
- Builder:          -
- User Config:      compatibilityDate, devtools, modules
- Runtime Modules:  @nuxt/ui@2.18.4
- Build Modules:    -
------------------------------

Version

2.18.4

Reproduction

https://github.com/MickL/nuxtui-colors-bug

Description

When the color prop is created dynamically, some css styles are not generated, especially for subtle and soft variants:

For example, subtle badges dont have correct border color and the background colors are missing:

It should look like this:

In my reproduction repo I used a table:

  <UTable :columns :rows>
    <template #colors-data="{row}">
      <UBadge :color="row.color" variant="subtle">Subtle Badge</UBadge>
      <UButton :color="row.color" variant="soft">Soft Button</UButton>
    </template>
  </UTable>

[Tragio]

Hi @MickL 🙏

You can take a look at this: https://ui.nuxt.com/getting-started/theming#smart-safelisting

You will need to define it as a safe list since it is a dynamic prop.

[MickL]

This is what I did. But it ends up in a very large list. Is this really the only option? Why do I have red font and green font if they are also dynamic?

[Malik-Jouda]

@MickL

export default defineNuxtConfig({ ui: { safelistColors: ['green', 'yellow'] } })

[benjamincanac]

@MickL You can also comment in your code // <UBadge color="green" /> for example so the parser knows to safelist the green classes for the Badge component.

[MickL]

Thanks!