Add Interpolation classes that come from props

[vinamelody]

Hi, I would like to add tailwind classes that come from a component's prop.
The base classes are inline-flex items-center px-3 py-0.5 mx-1 rounded-full text-sm font-medium and I want to add background and text color depending on the props values.

For example:

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

const TagItem = styled.span(p => [
  tw`inline-flex items-center px-3 py-0.5 mx-1 rounded-full text-sm font-medium`,
  // tw`bg-indigo-100 text-indigo-800`, --> this works
  tw`${p.bgColor} ${p.textColor}`, --> this doesn't work, as explained on https://github.com/ben-rogerson/twin.macro/discussions/393 
])

.... then ...

<TagsContainer>
            {
              tags.map(tag => {
                return <TagItem key={tag.name} bgColor={tag.bgcolor} textColor={tag.textcolor}>{tag.title}</TagItem>
              })
            }
          </TagsContainer>

and the tags

const tags = [
  {
    id: 1,
    title: 'vscode',
    name: 'vscode',
    bgcolor: 'bg-indigo-100',
    textcolor: 'text-indigo-800'
  },

I'm looking into this page #393 but is there anyway to avoid hardcoding the classes as suggested.

import tw from 'twin.macro'

const styles = { sm: tw`mt-2`, lg: tw`mt-4` }

const Component = ({ spacing = 'sm' }) => <div css={styles[spacing]} />

Thanks for your help!

[ben-rogerson]

Hey there

In babel, twin is unable to grab the value of the tailwind classes passed in.
Unfortunately, this means you'll need to construct a color map to get the css values:

const possibleTagColors = {
  'bg-indigo-100': tw`bg-indigo-100`
}

possibleTagColors[tags.bgcolor] || 'black'

[ben-rogerson]

styled-components requires a function returned to read the array items 1+:

const TagItem = styled.span(() => [ // < return a function here
  ({ name = 'vscode' }) => TagColorMaps[name],
  tw`inline-flex items-center px-3 py-0.5 mx-1 rounded-full text-sm font-medium`,
])

Well worth a docs update with this info - I'll be sure to take care of that, cheers.

[vinamelody]

Hi @ben-rogerson do you mind if I try to submit PR to fix the doc? it's probably just this section though :)
https://github.com/ben-rogerson/twin.macro/blob/master/docs/styled-component-guide.md#variants-with-many-values

[ben-rogerson]

sure thing, go for it 💯

[vinamelody]

thank you :). Does this look ok #427 ?

[ben-rogerson]

thanks for the update, ill take a look