Interpolation into template literals

[ben-rogerson]

Due to Babel limitations, tailwind classes and short css values can’t have any part of them dynamically created.
This is because babel doesn’t know the values of the variables and so twin can’t make a conversion to css.

So interpolated values like this won’t work:

// Prop styling
<div tw="mt-${spacing === 'sm' ? 2 : 4}" /> // Won't work with tailwind classes
<div tw="margin-top[${spacing === 'sm' ? 2 : 4}rem]" /> // Won't work with short css

// Styled components
const Component = styled.div(({ spacing }) => [
  tw`mt-${spacing === 'sm' ? 2 : 4}`, // Won't work with tailwind classes
  `margin-top[${spacing === 'sm' ? 2 : 4}rem]`, // Won't work with short css
])

Here are some examples to use as workarounds to the issue:

Prop styling

Define the classes in objects and grab them using props:

import tw from 'twin.macro'

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

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

Or combine vanilla css with twins theme import:

import { theme } from 'twin.macro'

// Use theme values from your tailwind config
const styles = { sm: theme`spacing.2`, lg: theme`spacing.4` }

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

Or we can always fall back to vanilla css, which can interpolate anything:

import 'twin.macro'

const Component = ({ width = 5 }) => <div css={{ maxWidth: `${width}rem` }} />

Styled components

Define the classes in objects and grab them using props:

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

const styles = { sm: tw`mt-2`, lg: tw`mt-4` }
const Card = styled.div(({ spacing }) => styles[spacing])

const Component = ({ spacing = 'sm' }) => <Card spacing={spacing} />

Or combine vanilla css with twins theme import:

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

// Use theme values from your tailwind config
const styles = { sm: theme`spacing.2`, lg: theme`spacing.4` }
const Card = styled.div(({ spacing }) => ({ marginTop: styles[spacing] }))

const Component = ({ spacing = 'sm' }) => <Card spacing={spacing} />

Or you can always fall back to “vanilla css” which can interpolate anything:

import { styled } from 'twin.macro'

const Card = styled.div(({ spacing }) => ({
  marginTop: `${spacing === 'sm' ? 2 : 4}rem`,
}))

const Component = ({ spacing = 'sm' }) => <Card spacing={spacing} />

[steelx]

export const StyledActionButton = styled(Button)<{ active: boolean }>`
  ${tw`text-left md:text-center`}
  ${tw`px-3 py-2 rounded-md text-sm font-medium`}
  ${({active}) => (active ? 'bg-gray-900 text-white' : 'bg-gray-300 hover:bg-gray-700 hover:text-white')}
`

[rewathkafley]

Let's say my component is receiving the classes as string prop retrieved from my CMS.

const Button = ({classes}) => {

return <div><button>Click me</button></div>;
}

My button component is used dynamically in lots of places, but with different set of CSS classes.

How do i bind this?

[ben-rogerson]

Something like this (from the example above):

import tw from 'twin.macro'

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

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

[superdev0421]

Hi @ben-rogerson ,

I'm using typescript, and by default there aren't any props like css, so I get typescript error.
Is there any way to fix this?
And I think the latest version of twin.macro doesn't support styled.
Could you let me know how I can make styled component?

Thank you

[ben-rogerson]

Hey @superdev0421 Check out the twin.d.ts files in the typescript twin.examples - many of the readme files have a typescript setup section (eg).

[superdev0421]

Thanks @ben-rogerson, it worked for me.

[Shashank729]

Hey @ben-rogerson , I want to pass the entire classname as props to a common component. I am planning to make the child component as a reusable component and dynamically pass tailwind classes as props from the parent component so that I do not have to touch the reusable component and just handle everything from the parent itself.

Something just like this:

Is there any way I can get it done?

[beautyfree]

same question

[Shashank729]

Including the following code to includeClassNames in the package.json did the trick for me. You can try that too and let me know if it works for you or not: