Inline element style with css and tw prop

[Limunce]

Hello guys, I just run into a strange issue. I'm not able to style div element with css prop.

<div css={css
${twgrid gap-x-20 gap-y-23 my-20 w-full};
grid-template-columns: repeat(auto-fill, minmax(355px, 1fr));
} > Some text </div>

In the inspector I see this :

And the strange thing is that this happens only in some components 😕

The same code works as it should in another component.

I'm using twin for a long time, and this is the first time I run on an issue like this.

Does anyone know what is the problem here?

Thank you in advance :)

EDIT
Hmm, I found what is the problem.

I cannot use the css prop like this

<div css={css`
${tw`bg-red`};
`}
>
Tesst
</div>

because I'm not using tw="..." prop anywhere in that component...
I think this was not the case with older versions. I'm now on the latest one.

@ben-rogerson Am I missing something or this is normal behavior? 😕

[ben-rogerson]

The semicolon after the interpolated tw call is causing issues with the output (in styled-components).

This works:

<div
  css={css`
    ${tw`block`}
    margin-top: 5px;
  `}
>
  Tesst
</div>;

I made some ordering changes a few versions ago so perhaps that's caused this.
Perhaps I can sniff for a semicolon after the block and remove it with twin.

[Limunce]

I just tried the way you said and got the same result :S

Idk, maybe it is my project that causes problems... I'll try with the fresh CRA project.

Anyway, thank you so much for your work! ❤️

[ben-rogerson]

If you don't have any luck then perhaps you could cruise down a few versions in twin/styled-components to see when the change was made?

[Limunce]

I tried with the fresh CRA and the latest version of twin. Everything is working fine, so obviously, my project causing this problem.
Idk why but I'll try to find out. :)

Thank you for your time :)