Support the className prop

[mxstbr]

Imagine a world in which twin.macro is usable as a global Babel plugin. (hopefully soon?! #247) We could then use the tw="" prop on all JSX elements anywhere in our apps:

<div tw="border hover:border-black" />

What if twin.macro could optionally support using className instead?

This would enable us to use the className="" prop just like the tw="" prop:

<div className="border hover:border-black" />

Why is that cool?

• It's the exact same developer experience as "normal" Tailwind.css, but with all the benefits of twin.macro.
• ...including full text editor auto-complete support... 😱
• ...and full TailwindUI support! 😍

What are the downsides?

• It might be confusing for folks that are used to "normal" Tailwind.css, as twin.macro supports features that "normal" Tailwind doesn't, and they might expect this to be "normal" Tailwind.
• It might break if users actually have a global class name that they add to their className string, e.g. <div className="my-global-btn-class border hover:border-black" />

Thoughts? 🤔

[ben-rogerson]

Sounds like a good feature to me!
I decided to rocket ahead with this, check #282 for the implementation 🎉

including full text editor auto-complete support

This is already possible with the tailwind vscode extension and a few setting tweaks.

full TailwindUI support!

I haven't used the paid version of TailwindUI - are there react components? As we're in react-land, we're using the className prop and from what I've seen in TailwindUI, it's in html using the class attribute. It's a bit hard to tout full tailwindui support if this is the case.

Imagine a world in which twin.macro is usable as a global Babel plugin

That world is still in planning phase :)

[thecodeclimber]

The makers of tailwind css/tailwind ui are creating tailwind specific components for React (and vue -- with other frameworks on the way). It is called Headless UI: https://headlessui.dev/ (you can also learn more about it here: https://blog.tailwindcss.com/headless-ui-unstyled-accessible-ui-components).

Right now they just have four components with more on the way (they have hired a full-time developer to work on this: https://blog.tailwindcss.com/from-900-to-1-how-we-hired-robin-malfait).

I believe they plan on integrating Headless UI into Tailwind UI as part of a larger goal of making Tailwind UI plug and play ready for react (although I don't know if they plan on creating components for everything in tailwind ui). In the meantime, they have documentation and guides (in the form of comments) on how to use their html/css code with React.

As a side (albeit related) note: I personally am actually trying right now to create some React components using tailwind ui and Twin.macro for a project that I am working on -- but am having some technical difficulties (as I noted in #288). Implementing #282 seems like it would solve these problem.

Hope that helps.

[ben-rogerson]

Supported in v2.1.0 🎉
Check the PR for more info