How to embed any Tailwind class

[dvdbrk]

I have just started playing with the Twin / Tailwind / Styled Components, and I am trying to understand how can I pass any Tailwind utility classes to a Styled Component, in TypeScript.

My component looks like this

import React from "react";
import { Title, Paragraph } from '../shared/SharedStyledComponents';

export default () => {

  return (
    <>
      <Title $primary={false} $extraTailwindClasses="font-large">
        Hello World
      </Title>
    </>
  )
}

And the Styled Component like this

import React from "react";
import styled from 'styled-components';
import tw from 'twin.macro'

export const Title = styled.div<{ $primary: boolean, $extraTailwindClasses?: string }>`
  ${(p) => (p.$primary ? tw`bg-orange-100` : tw`bg-blue-100` )}
  ${tw`${(p) => (p.$extraTailwindClasses)}`}
  ${tw`rounded shadow`}
`

As you can imagine, the problem is in ${tw`${(p) => (p.$extraTailwindClasses)}`} - I just can't get it to take the class font-display do a tw() transformation & output it as the styled component.

Am I even on the right path?

[ben-rogerson]

Twin doesn't support dynamic classes like you've found here.

Try something like this:

<Title $primary={false} $extraTailwindClasses={tw`font-large`}>

Then twin can do the conversion and the css object is supplied to styled components.