Tailwind component seems to not handle styles correctly on custom components

giovannetti-eric commented 8 months ago

See original post here: https://github.com/resendlabs/react-email/issues/1021#issuecomment-1796181655

Hello guys, thanks for your work.

To give context, I'm migrating from react-email to jsx-email.

My email templates were working well @react-email/components": "0.0.7", after upgrade to a newer version, a lot of Tailwind classes are not converted into style attributes anymore. I also tried to migrate to jsx-email, but I got the same problem.

For example:

  <Link href={t("common.appStore.href")} className="inline-block">
    <Img
      src={t("common.appStore.img")}
      width="119"
      height="40"
      alt={t("common.appStore.label")}
      className="max-w-full h-auto inline"
    />
  </Link>

is generating

<a href="xxx" class="inline-block" style="color:#067df7;text-decoration:none" target="_blank"><img class="max-w-full h-auto inline" alt="xxx" height="40" src="xxx" style="display:block;outline:none;border:none;text-decoration:none" width="119"></a>

After some test, I found that the problem apply when I load custom components in an email template, for example:

import * as React from "react";
import MainLayout from "../components/ui/MainLayout";
import Email1 from "../components/views/Email1";
import { useGetToken } from "../hooks/useGetToken";

const locale = "en";

export const Email1En = () => {
  const { t } = useGetToken(locale);

  return (
    <MainLayout
      title={t("pnp23bf1_22.title")}
      preview={t("pnp23bf1_22.preview")}
    >
      <Email1 locale={locale} />
    </MainLayout>
  );
};

export default Email1En;

import { Body, Head, Html, Preview, Tailwind } from "@jsx-email/all";
import React from "react";

interface MainLayoutProps {
  title?: string;
  preview?: string;
  children?: React.ReactNode;
}

export const MainLayout = ({ title, preview, children }: MainLayoutProps) => {
  return (
      <Html>
        <Head>
          <title>{title}</title>
          <link rel="preconnect" href="https://fonts.googleapis.com" />
          <link
            rel="preconnect"
            href="https://fonts.gstatic.com"
            crossOrigin="anonymous"
          />
          <link
            href="https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap"
            rel="stylesheet"
          />
          <style>
            {`
              @media screen and (max-width: 600px) {
                h1 {
                  font-size: 30px !important;
                }
              }
            `}
          </style>
        </Head>
        {preview && <Preview>{preview}</Preview>}
        <Tailwind
          config={{
            theme: {
              fontFamily: {
                sans: ["Helvetica", "Arial", "sans-serif"],
                serif: ["Roboto Slab", "Georgia", "Times New Roman", "serif"],
              },
              extend: {
                colors: {
                  brand: "#ec0518",
                },
              },
            },
          }}
        >
          <Body className="text-gray-900 bg-white my-auto mx-auto font-sans leading-snug">
            {children}
          </Body>
        </Tailwind>
      </Html>
  );
};

export default MainLayout;

Most Tailwind classes into <Email1 /> are not generated.

shellscape commented 8 months ago

@giovannetti-eric thanks for the issue, will do what we can to get you going. our issue template contains a link to a stackblitz reproduction template, and we ask that people use that so we can all look at the same code together in an environment that is the same for everyone. So that would be really helpful if you have the chance to check that out and post a link.

In the mean time, installing and using @jsx-email/tailwind directly will give you a version that should pick up those child components. The version that's in the all package is very close to what react-email uses, and it's 50 times slower than our new work. (there will be more improvements coming this week for that as well)

giovannetti-eric commented 8 months ago

Hello, I tried with @jsx-email/tailwind: the preview is crashing, the build is working, but the template from react-email is still half broken. I have alas not the time to check why and since it's a customer's project, I can't put a reproduction without cleaning a lot the existing files. When I will have some time, I will try from scratch to do a reproduction, but it will took some time before I can do that.

shellscape commented 8 months ago

OK thanks for the update. I'd love to help you resolve that, but without that reproduction, there's no way for me to tell what's crashing. We'll leave this issue open in the meantime.

shellscape commented 8 months ago

As an afterthought; we don't tend to see hooks used very often in these email templates. It might be worth commenting that out and giving it a run just to see if that's the culprit.

shellscape commented 7 months ago

@giovannetti-eric please give jsx-email@latest a try. we've done a lot of work around tailwind support.

shellscape commented 7 months ago

Going to close for now. Please let me know if the issue persists.

shellscape / jsx-email

Tailwind component seems to not handle styles correctly on custom components #73