Please support responsive design in Tailwind component.

[MasterShu]

As the title say.

I found the Tailwind component could not support responsive design.

Such as sm:w-full, it will compile a strange style code in HTML tag. Seem like could not support responsive design.

And I think it will be difficult to achieve responsive design if we use inline style mode.

[zenorocha]

@vinicoder can you take a look?

[vinicoder]

Hey, guys! I'm currently working on a fix for this and should update here asap this week.

[aravind-eng]

Can you confirm whether the Text or Heading component support media queries? I tried to add this as a style to Text component, but it does not work.

const headingText = { color: "#121212", fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif", fontSize: "44px", lineHeight: "24px", textAlign: "left" as const, "@media (max-width: 767px)": { color: "#333", fontSize: "14px", }, };

Can you please help?

[vinicoder]

Can you confirm whether the Text or Heading component support media queries? I tried to add this as a style to Text component, but it does not work.

const headingText = {

color: "#121212",

fontFamily:

"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",

fontSize: "44px",

lineHeight: "24px",

textAlign: "left" as const,

"@media (max-width: 767px)": `{

color: "#333",

fontSize: "14px",

}`,

};

Can you please help?

Media queries only work in the

In the update I'm currently working on, the media queries generated using Tailwind will be defined in the

[aravind-eng]

Thanks for the info @vinicoder . Looking forward for your changes. When can we expect those changes?

[vinicoder]

Thanks for the info @vinicoder . Looking forward for your changes. When can we expect those changes?

My plan is to send a PR with the updates later this week.

[kowalczyk-mateusz]

@vinicoder hi, when can we expect these changes?

[vinicoder]

Hey @kowalczyk-mateusz ! Here's a PR with some fixes: https://github.com/resendlabs/react-email/pull/502

Thanks for waiting! The past few weeks have been hectic as I fell ill, and my daughter couldn't attend school.