Omit className property and remove tailwind-merge

[nirtamir2]

Hi,
I'm using shadcn/ui and I'm really happy. I love to own the components and change the styles from time to time, but still save time and have beautiful styles as default.
I want to suggest an option to use shadcn/ui without exposing the className prop (and without tailwind-merge).
When I create UI components I don't expose className property - so other usages of the component won't be able to override classes.
Instead of using 'className- I add a variant to the component or use a wrapper element withclassNameto change the layout and positioning. AddingclassNameto the component makes the code less robust and more error-prone. I also think that it's better to remove tailwind-merge - because of this. Instead, I use css values that do not have collision (and if so - it's a different variant). What do you think? Is it possible to create a flag of shadcn/ui without exposing className or without usingtailwind-merge`?

const DialogOverlay = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Overlay>,
  Omit<
    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>,
    "className"
  >
>((props, ref) => (
...

// Or

<
  React.ElementRef<typeof DialogPrimitive.Content>,
  Omit<
    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,
    "className"
  > & /* This is a variant I use for example instead of exposing className */ { hasShadow?: boolean }
>

Those changes make the components more robust to css changes.
BTW - removing tailwind-merge can save some kb in the bundle too.

WDYT?

EDIT: tailwind-merge also write about the drawbacks of exposing className in their documentation https://github.com/dcastil/tailwind-merge/blob/v2.2.0/docs/when-and-how-to-use-it.md#more-difficult-to-refactor-highly-reusable-components

[silvenon]

I support the idea of removing tailwind-merge. shadcn/ui allows us to own the code, so using tailwind-merge is not only unnecessary, but also arguably an anti pattern because listing class names that aren't being used causes Tailwind to generate unused styles.

Because we own the components we can work around any styling issues in any way that we want, that's the whole point. Perhaps even omit className altogether for certain components, as suggested by the OP, and use some more controlled props like variant or whatever is appropriate for those components.

[kellycampbell]

Using tailwind-merge adds about 70K, 15K gzipped to a bundle. This is huge when working on an embedded platform and trying to minimize flash image size.