DEV Community

Discussion on: Tailwind with React

Collapse
 
lem01 profile image
Laurent Lemaire • Edited

Thanks for this good article!

How would you create the tailwind string parameter programmatically?
If let's say I want to add tailwind classes dynamically how would this work?

I tried adding my tailwind classes to a string and the pass it to the macro as a parameter but it doesn't seem to work.

  let twStr = ``
  twStr += (padding) ? 'pt-16 pb-16' : ''
  twStr += (altBackground) ? 'bg-gray-100' : ''

  const SSection = styled.section`
    ${tw`
      ${twStr}
    `}
    width: 2000px
  `
  return <SSection>{children}</SSection>

This works if rather than using the$(twStr) I use "pt-16 pb-16" (as a string a not as a variable).

Any hint?