TwStyle[] Typescript

[debatz]

Hello all,

I'm running into a lot of problems using twin.macro with Typescript.

I was using it previously doing this:

className={css([
    tw`relative z-0 col-span-1 px-5 pt-5 text-gray-800 bg-white border border-gray-200 shadow-sm max-h-fit`,
    design === '1' && tw`rounded-3xl max-w-[250px]`,
    design === '2' && tw`rounded-3xl max-w-[300px]`,
    design === '3' && tw`rounded-none max-w-[350px]`,
])}

Now with typecript, it breaks and says:

Argument of type 'TwStyle[]' is not assignable to parameter of type 'string | TemplateStringsArray | CSSAttribute'.ts(2345)

I am using Goober, and using the example types don't seem to help.

Any tips? Thank you.

[ben-rogerson]

Unfortunately Goober doesn't have the array styles capability like Emotion or Styled components - that's why I've used a slightly different example, but it does allow object styles.
Try something like this:

<div
  className={css({
    ...tw`relative z-0 col-span-1 px-5 pt-5 text-gray-800 bg-white border border-gray-200 shadow-sm max-h-fit`,
    ...(design === "1" && tw`rounded-3xl max-w-[250px]`),
    ...(design === "2" && tw`rounded-3xl max-w-[300px]`),
    ...(design === "3" && tw`rounded-none max-w-[350px]`),
  })}
/>

[debatz]

Seems I may have to look at emotion :)

Thank you for all your work!