Best way to handle styling

[jolbol1]

In v2 components I have extended the render props methods of styling certain components. This works however you do have to do a work around with tailwind at the moment, by making all duplicate styles important that you want to appear.

Example - Button:

To style this button we can use the render props:

import { Button } from "@/components/ui/button"

export function ButtonDemo() {
  return <Button className={({ isHovered }) => isHovered ? "!bg-red-600" : ""}>Button</Button>
}

Since the default styles however have a data-[hovered]:bg-primary/90. The default styles will be applied, unless as above we make the class important !

You could get around this by allowing the correct merge behaviour by changing the string too data-[hovered]:bg-red-600 but it seems like bad DX to check for hovering twice.

My plan, to enable all forms of styling to have good DX in the future is change all defaults to use the render prop methods, this way tailwind merge should correctly apply passed in classNames.

Render props docs

[jolbol1]

Also think utilising the react-aria-component helpers such as --trigger-width should be built in to a few of the components such as select/dropdown.

[junwen-k]

This library looks amazing! Just wondering if you've considered using the official Tailwind plugin to style the components? I do understand that once we do that it means all user would need to install the plugin as well, though.

[jolbol1]

This library looks amazing! Just wondering if you've considered using the official Tailwind plugin to style the components? I do understand that once we do that it means all user would need to install the plugin as well, though.

Thanks for the kind words!

Yes I did consider using the plugin but as you mentioned, would require an extra install step for users, which is ultimately why I elected not to use it. I wanted installation to be as close to shadcn as possible. I also personally prefer to use as little plugins as possible in tailwind so styles are easily copy and paste-able, and you can easily see how to modify them if you had your own headless components.