$as prop clears merge inheritance

[Randy Lough]

$as prop appears to break className merging inheritance

Simple example

// base tw styled component
export const Heading = tw.p`
  text-4xl font-bold text-gray-700
`

// extend the base Heading styled component 
export const Display = tw(Heading)`
  text-6xl
`

const WithoutAs = ({children}) => {
    return (
      // without the $as prop, all classnames will be merged in correctly.
      // text-6xl font-bold text-gray-700 border-2 p-4
      <Display className="border-2 p-4">{children}</Display>
    )
}

const WithAs = ({children}) => {
    return (
     // with the $as prop, only the most recent component's classes will be used
     // text-6xl border-2 p-4
      <Display className="border-2 p-4" $as="h1">{children}</Display>
    )
}