twin.macro for non base components

[gaussylean]

Let's say I have another React component like Icon or Button,
and the structure would look either like <button></button> or <svg></svg>

Is there anyway to do inline tw styling on them? So something like <Icon tw="px-4"/>

[gaussylean]

Ah sorry, I've figured it out. If you're using styled components, you need to make sure that you're taking in className as a prop and passing it to your parent element in your custom component.

[ben-rogerson]

You got it - here’s some code for anyone else with this issue:

const MyComponent = ({ className }) => <div className={className} />
// or
const MyComponent = ({ className }) => <div {...{ className }} />

// Usage
<MyComponent tw="px-4" />