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: pnpm@8.15.6
• Builder: -
• User Config: modules
• Runtime Modules: @nuxt/ui@2.18.3

• 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.