Pass variables to the tagged template literal

[markbrouch]

I'm trying to pass a variable from Styled Components to my tailwind tagged template literal, but can't figure out how to do it. This doesn't work:

const Button = styled.button`
  ${p => tw`bg-${p.color}`}
`

[eelkeh]

Having the same issue with something like:

const StyledCard = tw.div`
  w-full
  flex-grow 
  lg:w-1/2 
  bg-pink-300
  ${props => (props.noPadding ? `p-0` : `p-8`)}
`

[NikkiJonesR]

I believe you need to use the css helper to do interpolations: https://www.styled-components.com/docs/api#css

So something like this ...

  const StyledLink = styled.a`
    ${tw`no-underline text-black-two`}
    ${({ navigation }) =>
      navigation &&
      css`
        &:hover,
        &:focus {
          ${tw`text-white-three`}
          transition: color 0.3s ease;
        }
      `}
  `

[pyrbin]

Using typescript this doesnt seem to work:

const Button = tw.button<ButtonProps>`
  bg-${props => props.bg || "primary"} 
  hover:bg-${props => props.bg || "primary"}-dark
  text-${props => props.color || "white"} 
  border-none font-bold font-mono py-2 px-4 rounded
`;