react-email icon indicating copy to clipboard operation
react-email copied to clipboard

Published 20 hours ago • verified publisher icon resendlabs

Tailwind styles not overwriting default <Text> styles

Open mckelveygreg opened this issue 2 years ago • 1 comments

Currently, the inline styles default to the Text component take precedence over tailwind styles that I'm passing to it.

My workaround

<Text
  style={{
  margin : undefined,
  fontSize: undefined,
  lineHeight: undefined,
 }}
 className="m-0 text-sm"
>

mckelveygreg avatar Mar 02 '23 00:03 mckelveygreg

I did some more investigating because I noticed that there were tests for this situation.

I looks like there may be 2 issues:

  • when a div has a responsive tailwind class (ex. sm:w-1), all classes get hoisted to the <head> instead of being inline.
  • when no responsive classes are used on non email components, then responsive styles are not applied.

example

   <div className="w-1.5" />
   <Text className="text-sm sm:text-md" />

turns into

<html>
 <head></head>
 <body>
  <div style=\\"width:0.375rem\\"></div>
  <p style=\\"font-size:0.875rem;line-height:1.25rem;margin:16px 0\\"></p> 
 </body>
</html>

mckelveygreg avatar Mar 03 '23 17:03 mckelveygreg