Nuxt/Tailwind generates unnecessary color css definitions on colors that are not used in the project

[jrutila]

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

[benjamincanac]

As mentioned in #877, I already answered this here: #802 (comment)

[jrutila]

To me it looks like this code in module.ts:

    nuxt.hook('tailwindcss:config', function (tailwindConfig) {
      const globalColors: any = {
        ...(tailwindConfig.theme.colors || defaultColors),
        ...tailwindConfig.theme.extend?.colors

....
      // only excludes   'inherit',  'transparent',  'current',  'white',  'black',  'slate',  'gray',  'zinc',  'neutral',  'stone',  'cool'
      const colors = excludeColors(globalColors)
...
      tailwindConfig.safelist = tailwindConfig.safelist || []
      tailwindConfig.safelist.push(...generateSafelist(options.safelistColors, colors))

will not care about the components but will generate a tailwindConfig safelist that contains all defaultColors (from tailwindcss/colors), unless there is a tailwindConfig.theme.colors defined. And this causes orange, fuchsia and others to appear in the generated css. I don't think Notification component needs those colors?

Is this working as intended? I think it is in contradiction with the doc.

[jrutila]

Hmm... Now really reading your comment once more. So, the fuchsia and orange and others are generated just to make it possible to write those colors in the Notification component? As that cannot be automatically detected?

Where do we draw a line what colors should be possible to use with Notification? Couldn't you just then safelist that specific color as you have to do with the default color for button (example in the docs: https://ui.nuxt.com/getting-started/theming#smart-safelisting)

[benjamincanac]

Exactly we can't detect colors as you trigger notifications from the useToast composable, that's why my advice was to select the colors you want in your tailwind.config.ts.

[ineshbose]

If you're using SSG, do you think this can help? #877 (comment)