Loss of parent component className

[YeungKC]

input:

const Div1 = tw.span`text-red-500`
const Div2 = tw.div`bg-green-500`
const Div3 = tw(Div1)`rounded-full`
const Div4 = tw(Div2)`select-all`

export default () => {
    return <Div3 $as={Div4}>foo</Div3>
}

output:

<div class="bg-green-500 select-all rounded-full">foo</div>

loss the Div1's className

[randallmlough]

@YeungKC: I just made a similar/duplicate to this issue: https://github.com/MathiasGilson/Tailwind-Styled-Component/issues/61

The reason this is happening is because of the $as prop.

Also want to point out that you are using the $as prop incorrectly here. $as is used to render one html element as another, not the component itself. So in my linked example the base component is a paragraph element that I'm trying to render as an h1 element.

[YeungKC]

In my opinion, If this is incorrectly, feedback should be given, such as syntax errors.