https://cal.com logo
Join Slack
Powered by
<@U02A4NHQFPD> maybe?
# developers
p
@Alex / KATT maybe?
he started the <Button> component but i think it grew out of control
s
Button for reference
a
it can get pretty crazy, here’s a good article: https://www.benmvp.com/blog/polymorphic-react-components-typescript/
s
Thank you @Alex / KATT - Will give this a read 🙂
a
i might add that tailwind doesn’t really shine at being part of a react-based design system
you can have a look at the Button-component in cal though
with refs and stuff it gets very hairy, esp if you wanna map different props to different actual dom elements
s
Yeah I made a thread internally saying pretty much that 😅 After making our whole v2 design system I decided it's getting a bit complex in some places
j
For me personally exactly this is why I find it hard to start using tailwind in my own projects. I think something like Stitches still shines in that 🤔 But I’ve also realised there might be a very fun opportunity for creating a library combining both Stitches and Tailwind approaches called Twitches 😂 Not sure what it would look like yet though.
s
There is actually something that exists - twin.macro @Jeroen Reumkens this might be what you're looking for
j
I think what we need is a good approach to combine variants together. Which in the case of tailwind would combine multiple classes. The example of Robin does that in a basic form, but doesn’t support the compounding which eg stitches brings. For me that is where the power lies for bigger design systems / component libs.
twin.macro is indeed like a css-in-js solution for tailwind, but it’s still lacking things like variants and especially a way to combine multiple variants I think? 🤔
But probably makes sense right, as soon as you want to add a bit more complexity, you have to step out of your 
className
property and move to JS land.
p
stitches + tailwind demo: https://codesandbox.io/s/rxv7x
this looks like the ideal solution?
since we already use radix may as well adopt stitches
but it doesnt seem maintained anymore, is it?
s
Doesn’t look very active that’s the only thing
p
last commit 3 months ago
i mean if it works it works 😄
j
This would actually be more towards what I think a stiches + tailwind combo would look like: https://windstitch.vercel.app/ But if you’re willing to go that far — by already removing most of your classnames out of the render and creating a custom component out of it — you start to wonder why not fully switch to Stitches indeed.
As for your concerns about maintainability, I agree with your doubts.. Not sure what the future will look like, since I thought Pedro stepped back as the main maintainer, right?
p
there is a framework for everything lol
yeah pedro is full time at rainbow now
windstitch looks very interesting
s
It looks good - however, I believe only for simple components. As soon as you want to pass an Icon or just about anything into it - Making it reusable with that approach would be come a lot harder. However - https://windstitch.vercel.app/docs/create-a-component#using-a-custom-component might solve my issue here
p
i am just not keen on adopting a practise that is not popular yet. for a closed source project ok, but many people will look at and use our components
and the more low-level (as in tailwind + classnames) we get, the better in my opinion
@Alex / KATT do you have a code example for this https://www.benmvp.com/blog/polymorphic-react-components-typescript/ using tailwind?
a
no, i think that is a bit overkill, but the button component isn’t far off
Open in Slack
PreviousNext
Powered by