UFormGroup error state doesn't load css classes

[kstraszewski]

Version

@nuxthq/ui: 2.50
nuxt: v3.6.1

Reproduction Link

https://stackblitz.com/edit/nuxtlabs-ui-3bkhpx?file=app.vue,package.json

Steps to reproduce

Look at UInput

What is Expected?

UInput should load ring-red-500 dark:ring-red-400 focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400 classes but they does not exist. Framework properly adding those classes, but those classes does not load.

What is actually happening?

[kstraszewski]

The problem is that tailwind doesn't load this classes, when I add some span anywere in the project, everything works fine:

      <span
        class="ring-red-500 dark:ring-red-400 focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400"
      ></span>

[benjamincanac]

The issue here is that the red color for the Input hasn't been safelisted as there is no such code as <UInput color="red" />. We should safelist it by default I guess.

[benjamincanac]

For now, you can safelist the red color manually in your nuxt.config.ts:

ui: {
    safelistColors: ['red']
}