shadcn-ui/ui

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

LukasKez opened this issue · 2 comments

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

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

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:

image

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:

"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
.

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