-
Notifications
You must be signed in to change notification settings - Fork 125
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Discussion: Tailwind modifiers #751
Comments
Looking into this right now, I don't think |
One "argument" in favor of using <SelectPrimitive.Content
ref={ref}
className={cn(
"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
position === "popper" &&
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
className
)}
position={position}
{...props}
>
```
but if it's an exception or there are only a few exceptions like that, then it's probably better to combine. |
@maiieul from what I understand - it'll always be the tailwind plugin will just make it easier for TW users to write did I understand it correctly? |
Hmmm I'm not sure if the plugin is just an add-on or if it's required. But even if it's just an add-on to avoid the bracket syntax, I'm not sure I prefer Here's the tailwind docs: https://tailwindcss.com/docs/hover-focus-and-other-states#data-attributes |
I personally prefer the least amount of characters when possible. I'm on the fence |
Kobalte does something interesting. You add a plugin to your tailwind config, and the modifiers are changed:
https://kobalte.dev/docs/core/overview/styling#using-the-tailwindcss-plugin
This makes styling component states much cleaner. Thoughts?
The text was updated successfully, but these errors were encountered: