Components look broken if NuxtUI is installed in a Tailwind project where --spacing is 1px

[martinszeltins]

Environment

Nuxt project info:
|                      |                                                       |
| -------------------- | ----------------------------------------------------- |
| **Operating system** | `Linux 5.15.0-170-generic`                            |
| **CPU**              | `Intel(R) Core(TM) i5-10300H CPU @ 2.50GHz (8 cores)` |
| **Node.js version**  | `v24.13.0`                                            |
| **nuxt/cli version** | `3.33.1`                                              |
| **Package manager**  | `pnpm@10.28.2`                                        |
| **Nuxt version**     | `4.3.1`                                               |
| **Nitro version**    | `2.13.1`                                              |
| **Builder**          | `vite@7.3.1`                                          |
| **Config**           | `extends`                                             |
| **Modules**          | `-`                                                   |

Is this bug related to Nuxt or Vue?

Nuxt

Package

v4.x

Version

4.3.1

Reproduction

N/A

Description

When NuxtUI is installed in a Tailwind project where --spacing is defined as 1px meaning px-1 would be px: 1px then all NuxtUI components look broken and you need to manually go and adjust every single component. Is there any workaround for this?

Additional context

No response

Logs

[mdotme]

In tailwind px-1 supposed to be 0.25rem (4px) not 1px but where Nuxt UI relies on tailiwind surely it will break. I recommend to not remap these default util classes. Instead you can use px-px (1px) I guess. Pardon me just curious why would you remap default px-1 to 1px?

[benjamincanac]

As @mdotme mentioned, you're not supposed to do that otherwise how are we supposed to style components without using classes like px-4, etc.?

[martinszeltins]

As @mdotme mentioned, you're not supposed to do that otherwise how are we supposed to style components without using classes like px-4, etc.?

But why is there such a feature of Tailwind if you are not supposed to use it?

[benjamincanac]

It might be useful to rewrite the entire scale when working on a standalone Tailwind CSS project but Nuxt UI rely on the default Tailwind spacing scale. You could maybe change it to 3px instead of 4px but 1px is drastic.