[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
- Setup tailwind prefix (using
tw-
for this example) - Do a fresh installation of a sheet component
SheetOverlay
component andright
sheet variant will havetw-
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:
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:
ui/apps/www/registry/default/ui/sheet.tsx
Line 24 in 816b654
Great catch! I didn't actually understand the question at first. Thanks for putting the ss to clarify.