Environment

Nuxt project info:

• Operating System: Linux
• Node Version: v18.18.0
• Nuxt Version: 3.7.3
• CLI Version: 3.9.0
• Nitro Version: 2.6.3
• Package Manager: npm@9.4.2
• Builder: -
• User Config: ssr, modules, ui
• Runtime Modules: @nuxt/ui@2.9.0
• Build Modules: -

Version

v2.9.0

Reproduction

https://stackblitz.com/edit/nuxt-nuxtlabs-ui-ngqpbh?file=README.md

1. Add ssr: true to nuxt.config.ts
2. run npx nuxi generate
3. cat .output/public/index.html

RESULT: There are css classes for indigo, pink, orange even those are not used in this project. The primary color is lime.
EXPECTED RESULT: indigo, pink, orange and other non-used color classes should not be in the generated css.

Having safelistColors: ["lime"] in the nuxt.config.ts does not help. Workaround is to limit the actual colors of the theme in TailwindCSS config as described generally here https://tailwindcss.com/docs/customizing-colors#using-the-default-colors and for nuxt/ui specifically here: #802 (comment)

Description

As nuxt/ui document (https://ui.nuxt.com/getting-started/theming#smart-safelisting) 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.
Then, the module will automatically detect when you use one of those components with a color and will safelist it for you. This means that if you use a red color for a Button component, the red color classes will be safelisted for the Button component only. This will allow to keep the CSS bundle size as small as possible.

The idea is that no other colors are safelisted than the primary color (and others needed, like red for warnings etc). Still, the generated CSS contains classes for other default colors of TailwindCSS.

Additional context

No response

Logs

No response