[Bun] WARN - "As of Tailwind CSS v3.0, trueGray has been renamed to neutral" etc

[thunfisch987]

Environment

• Operating System: Linux
• Node Version: v20.8.0
• Nuxt Version: 3.7.4
• CLI Version: 3.9.0
• Nitro Version: 2.6.3
• Package Manager: [email protected] to 1.0.7
• Builder: -
• User Config: devtools, modules, experimental, ui, typescript, tailwindcss, app, colorMode, pwa
• Runtime Modules: @vite-pwa/[email protected], @nuxt/[email protected]
• Build Modules: -

Version

v2.9.0

Reproduction

Reproduction not possible because stackbiltz does not use bun

Description

This is not a breaking bug, but i'm curious why this only happens when using Bun, because it works perfectly fine except for this.

This does not happen when only using @nuxtjs/tailwindcss.

When i run the development server with bun run dev everything works as normal (because it uses node to run it), but when i use bun run --bun dev errors like

 WARN

 WARN  warn - As of Tailwind CSS v2.2, lightBlue has been renamed to sky.

 WARN  warn - Update your configuration file to silence this warning.

see also: tailwindlabs/tailwindcss#4690

Additional context

Logs

❯ bun run --bun dev
$ nuxt dev
Nuxt 3.7.4 with Nitro 2.6.3                                                                                                          10:23:38 PM
                                                                                                                                     10:23:39 PM
  ➜ Local:    http://localhost:3000/
  ➜ Network:  use --host to expose


 WARN                                                                                                                                10:23:41 PM


 WARN  warn - As of Tailwind CSS v2.2, lightBlue has been renamed to sky.                                                            10:23:41 PM


 WARN  warn - Update your configuration file to silence this warning.                                                                10:23:41 PM


 WARN                                                                                                                                10:23:41 PM


 WARN  warn - As of Tailwind CSS v3.0, warmGray has been renamed to stone.                                                           10:23:41 PM


 WARN  warn - Update your configuration file to silence this warning.                                                                10:23:41 PM


 WARN                                                                                                                                10:23:41 PM


 WARN  warn - As of Tailwind CSS v3.0, trueGray has been renamed to neutral.                                                         10:23:41 PM


 WARN  warn - Update your configuration file to silence this warning.                                                                10:23:41 PM


 WARN                                                                                                                                10:23:41 PM


 WARN  warn - As of Tailwind CSS v3.0, coolGray has been renamed to gray.                                                            10:23:41 PM


 WARN  warn - Update your configuration file to silence this warning.                                                                10:23:41 PM


 WARN                                                                                                                                10:23:41 PM


 WARN  warn - As of Tailwind CSS v3.0, blueGray has been renamed to slate.                                                           10:23:41 PM


 WARN  warn - Update your configuration file to silence this warning.                                                                10:23:41 PM

ℹ Using default Tailwind CSS file                                                                                  nuxt:tailwindcss 10:23:42 PM
✔ Nuxt DevTools v1.0.0-beta.1 enabled, press Shift + Alt + D in app to open.                                                        10:23:43 PM
ℹ Tailwind Viewer: http://localhost:3000/_tailwind/                                                                nuxt:tailwindcss 10:23:43 PM
✔ Nitro built in 1936 ms                                                                                                      nitro 10:23:54 PM
ℹ Vite client warmed up in 10101ms                                                                                                  10:23:55 PM
^C

[lnoss]

I think the answer might be obvious, since we do not have many options: a problem with the handling of weak/strong references, or more generally Bun's garbage collector implementation. I don't know how to express this directly to Bun maintainers.

[thunfisch987]

Sorry, i don't know much about the implementations and so on, that's why i asked.
Should i leave this open?
I don't mind the warnings

[thunfisch987]

After reading the other issue i remembered that i tried to use delete as explained in tailwindlabs/tailwindcss#4690 (comment) but it did not change anything, so it really seems to be delete that's the problem.

[ghost]

Any fixes for this, since NuxtUI automatically imports tailwind?

[thunfisch987]

You have to track it under oven-sh/bun#6747, fixes for this have to be implemented in Bun

[pi0]

A workaround to get rid of it:

// https://github.com/nuxt/ui/issues/809
import { createRequire } from 'node:module'
const _require = createRequire(import.meta.url)
const defaultColors = _require('tailwindcss/colors.js')
delete defaultColors.lightBlue
delete defaultColors.warmGray
delete defaultColors.trueGray
delete defaultColors.coolGray
delete defaultColors.blueGray

(you can put it in nuxt.config or essentially any place before module)

/cc @benjamincanac it is also doable within module but sadly I could not setup a dev env for nuxt/ui feel free to do it simply importing this way would solve module too.

[benjamincanac]

@pi0 Thanks a lot for the fix! 😊

[KomalJadhav2226]

@thunfisch987 @pi0 @benjamincanac If you remove the ...colors from theme.extend.colors, it works properly.
theme:{ extend:{ colors:{ ...colors } } }