Styled Components not applying styles

[terraincognitas]

According to the docs for twin.macro, it should be possible to style existing components, but neither the syntax tw(Component) or styled(Component) applies Tailwind styles in my case.

The syntax below ignores the "text-white" property on the StyledRichText component.

import React from 'react'
import RichText from './Richtext'

import tw, { styled } from "twin.macro"

const StyledRichText = tw(RichText)`
  text-white
`

const Ride = ({ data }) => {
  return (
    <section>
      <StyledRichText json={data.content} />
    </section>
  )
}

export default Ride

Is there some type of config/settings needed in order to make styled components work? Maybe I'm missing some syntax thing but I feel I've tried everything.

Thanks for the help.

[ben-rogerson]

The RichText component needs to be a styled-component to allow wrapped styles to work:

const RichText = tw.div`...`
// or
const RichText= styled.div([tw`...`])

// Usage
const StyledRichText = tw(RichText)`
  text-white
`

If it can't be a styled-component, then add className to the element and use a tw prop to style it:

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

// Usage
<RichText tw="text-white" />