Tailwind size utility not working as expected

[CodingSam]

Describe the Bug

When using tailwind "size" classname, it is not recognised and results in class="size-X" in the html: <div class="size-8">test</div>

Which package is affected (leave empty if unsure)

@react-email/tailwind

Link to the code that reproduces this issue

https://github.com/CodingSam/react-email-tailwind-size-bug

To Reproduce

1. Add any Tailwind "size-X" eg. "size-8" className to a element / component
2. run npm dev
3. check the generated HTML version for class="size-8"

Expected Behavior

react-email should recognise the "size-X" classname and add the appropriate width and height style attributes. Link to tailwind "Size" documentation.

What's your node version? (if relevant)

No response

[gabrielmfern]

This is because we don't have the latest 3.4 version of Tailwind running, and since we only run our bundled version of it for the Tailwind component, we would need to update internally.

The issue with that is that the new versions of Tailwind require we use async APIs, and this could only be done with either support for server components or support for Suspense. So if we did update we would have to force users to either use renderAsync or bring in #1268 which is going to be a breaking change.

[CodingSam]

Alright, thank you for clarifying. As a temp fix, we have temporary downgraded the version of "eslint-plugin-tailwindcss" to "3.13.0" so that it does not suggest / warn about classes that are not yet supported.

[arthurdotwork]

Any news there? We'd really like to use new Tailwind utilities. 🙏

[gabrielmfern]

Should be fixed under @react-email/[email protected], a breaking change because it requires you use @react-email/render@>=1.0.0