search

resend / react-email

💌 Build and send emails using React
https://react.email
MIT License
13.96k stars 629 forks source link

Tailwind styles not overwriting default <Text> styles #517

Open mckelveygreg opened 1 year ago

mckelveygreg commented 1 year ago

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 commented 1 year ago

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

I looks like there may be 2 issues:

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>