Custom utility with 2 or more declarations are not applied correctly

[MuhammadM1998]

Environment

• Operating System: Linux
• Node Version: v20.12.0
• Nuxt Version: 3.17.3
• CLI Version: 3.25.1
• Nitro Version: 2.11.12
• Package Manager: pnpm@8.15.6
• Builder: -
• User Config: modules, devtools, compatibilityDate, future, css
• Runtime Modules: @nuxt/ui@3.1.1
• Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt

Version

v3.1.3

Reproduction

https://codesandbox.io/p/devbox/nuxt-ui3-n3sxks

Description

We're defining our typography style guide as custom utilities that consist of font-size and font-weight declarations like so

/* main.css */
@import 'tailwindcss'
@import 'nuxt/ui'

@utility text-display-1 {
  font-size: 54px;
  font-weight: 600;
}

@utility text-display-2 {
  ...
}

When applying custom utilities to Nuxt UI components, whether globally in app.config or individually via the ui prop, only one class is applied, and the other is discarded. For example, with the Button component has text-sm font-medium applied by default to the base slot, passing text-display-1 to that slot only overrides the size (blue arrow in the screenshot) while the weight still uses the font-medium class (red arrows in the screenshot)

Commenting either one of the classes applies the other correctly. The problem happens only if there are two (or more?) classes

Additional context

We workaround this by marking the class as important !text-display-1

Logs