[bug]: When using tailwind class prefix, importing a component, which has multiple whitespaces between classes, adds a prefix to a whitespace

[LukasKez]

Describe the bug

I noticed that when using tailwind class prefix and installing a UI component, it adds a prefix to a whitespace, if the class definition had multiple whitespaces between classes, essentially adding a class of a tailwind prefix.

Affected component/components

AlertDialog, Carousel, Dialog, Sheet

How to reproduce

1. Setup tailwind prefix (using tw- for this example)
2. Do a fresh installation of a sheet component
3. SheetOverlay component and right sheet variant will have tw- classes.

Codesandbox/StackBlitz link

https://codesandbox.io/p/sandbox/react-shadcn-ui-demo-967vh5

Logs

No response

System Info

-

Before submitting

• [X] I've made research efforts and searched the documentation
• [X] I've searched for existing issues

[LukasKez]

The prefixes work great. What I mean is, that if the component had multiple whitespaces in the class definition (like sheet component does), when installing the component, the prefix is added to a whitespace and gives this as a result:

tw- is a prefix, and should not be added as a separate class, which is happening right now.

Here's a link to source code, there are two whitespaces between background color and open state animation classes: https://github.com/shadcn-ui/ui/blob/816b654f07b77c9c4c160ed42f0bb104592e3484/apps/www/registry/default/ui/sheet.tsx#L24.

[servesh-chaturvedi]

Great catch! I didn't actually understand the question at first. Thanks for putting the ss to clarify.