[Feature Request] Native Tailwind Support

[mmailaender]

Again Sunday and I had some time to reflect the existing Frameworks/Libraries 😉

In my eyes Reshaped becomes more and more the MVP for an easy to start Framework that will fit well for probably 70% to 80% of the use cases. You don't need to learn the big deep hole CSS and you also don't need to deal with base component creation in React. So with some polishing Reshaped should be able to get in the "ease of use" category ahead of Mantine, Chakra, Material UI, Tailwind CSS etc.

But the "ease of use" comes with a Price, and that is limited flexibility. So for advanced cases, it seems that Tailwind CSS with Headless UI is the better fit, because you can really almost do anything with it. Nevertheless, Tailwind has a lot higher learning curve, so for beginners not the best choice.

Now the cool part, that I realized: Reshaped and Tailwind can be used together (and a lot better since you started to create your components unstyled e.g. Accordion) with the className property. And I think that's pretty sweet, because beginners can start easy with Reshaped, and if they need some more sophisticated stuff they can extend it with Tailwind.

Of course there are some limitations to know. The design tokens like color, border radius etc. are not in sync between Reshaped and Tailwind CSS.

So I thought why not integrating Tailwind natively into Reshaped? Having some docs that explaining the usage together and thinking about some presets that would make Tailwind easier to use in the context of Reshaped like design tokens.

What do you think?

PS: Not sure if you have seen, that I've created a "Discussion". Thought that these types of topics maybe fit there better 🤔

[blvdmitry]

I've actually had the same conversation on Twitter with someone else. I see this as multiple parts:

• Documentation about how to integrate Reshaped with Tailwind (and reuse variables from Reshaped in TW classes, I assume that should be possible at least with a plugin)
• Provide more base unstyled components we've discussed in another issue
• Export internal utilities we use for styling (a JS function that returns classNames and variables and supports responsive syntax same as components)

P.S: I get notifications about the discussions as well, not sure why it won't show counter bubble for it though.

[muco-rolle]

Part 3 sounds better to me, if we get the styling utils it'd be easier to extend Reshaped or build more components on top of it.

[blvdmitry]

This issue should be resolved now with https://github.com/formaat-design/community/tree/master/examples/integration-tailwind