Some Style Not affected with Tailwind #1137

Selfaiz · 2024-01-13T00:45:27Z

Selfaiz
Jan 13, 2024

Describe the Bug

First, thanks for improving the email DX so much with this library

I styled the email like what I wanted but some styles were not affected I tried a different solution by passing directly through the style prop but that didn't work either.

This is how I wanted the email to look:

But when sending to Gmail:

It is a bit different, specifically on the alignment of the image, but I wanted to know why it is this way.

Thanks

Which package is affected (leave empty if unsure)

@react-email/components, @react-email/tailwind

To Reproduce

Email template with the issue

import {
  Body,
  Container,
  Head,
  Heading,
  Html,
  Img,
  Hr,
  Link,
  Section,
  Text,
  Tailwind,
} from "@react-email/components";
import * as React from "react";

export const RecieverMail = () => {
  return (
    <Html>
    <Head/>
      <Tailwind>
        <Body>
          <Container className="mt-20 flex flex-col gap-2 font-mono text-zinc-950 w-fit max-w-[600px] px-6 py-8 mx-auto rounded bg-white ">
            <Section
              className="flex justify-center"
              style={{
                display: "flex",
                justifyContent: "center",
              }}
            >
              <Img
                width="64"
                src={`${baseUrl}/favicon.png`}
                alt="Smf Solution Logo"
              />
            </Section>
            <Section>
              <Heading
                style={{
                  display: "flex",
                  alignItems: "center !important",
                }}
                as="h2"
                className="text-zinc-900 text-lg flex items-center ml-4"
              >
                Hi Smail
                <Img width="44" src={`${baseUrl}/arhib.gif`} alt="Hi Icon" />
              </Heading>
              <Text className="text-sm  font-medium">
                I hope this email finds you well. I truly appreciate your Time
                and the message you sent.
              </Text>
              <div className="flex items-center">
                <Text className="my-7  text-center">
                  " I want to assure you that I value your time and I'm
                  committed to providing a quick response to your message. "
                </Text>
              </div>
              <Text className="font-semibold">Best regards</Text>
            </Section>
            <Hr className="my-3 border-t-2 border-gray-300" />
            <Section className="flex justify-between items-center">
              <Img width="56" src={`${baseUrl}/favicon.png`} alt="Logo Smf" />
              {/* <Img
                width="128"
                src={`${baseUrl}/signature.png`}
                alt="Signature"
              /> */}
            </Section>
            <Text className="text-center text-xs">
              Copyright &#169; {new Date().getFullYear()}{" "}
              <Link href="https://www.linkedaiz/">
                Smf Solution
              </Link>
            </Text>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
};

export default RecieverMail;

gabrielmfern · 2024-01-13T14:10:05Z

gabrielmfern
Jan 13, 2024
Maintainer

Hey @Selfaiz, thank you for asking. I just edited a few things and converted this into a discussion.

Taking a quick look into the code for the email you sent, I'd first say that display: flex is not very well supported on most email clients. If you want to align things you'll have to go for a different approach.

If you get to a point where you're wondering if something is supported or not for the email HTML, you can look at the awesome caniemail.

1 reply

gabrielmfern Jan 13, 2024
Maintainer

I closed this, if this doesn't answer your question feel free to re-open it.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Some Style Not affected with Tailwind #1137

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Some Style Not affected with Tailwind #1137

Uh oh!

Uh oh!

Selfaiz Jan 13, 2024

Describe the Bug

Which package is affected (leave empty if unsure)

To Reproduce

Replies: 1 comment · 1 reply

Uh oh!

gabrielmfern Jan 13, 2024 Maintainer

Uh oh!

gabrielmfern Jan 13, 2024 Maintainer

Selfaiz
Jan 13, 2024

Replies: 1 comment 1 reply

gabrielmfern
Jan 13, 2024
Maintainer

gabrielmfern Jan 13, 2024
Maintainer