resend / react-email

šŸ’Œ Build and send emails using React
https://react.email
MIT License
12.57k stars 571 forks source link

Heading component not rendering with Tailwind #1391

Closed s-fletcher closed 1 month ago

s-fletcher commented 1 month ago

Describe the Bug

When wrapping email in Tailwind component, Heading component will not render.

Code Preview
image image

Which package is affected (leave empty if unsure)

@react-email/heading, @react-email/tailwind

Link to the code that reproduces this issue

https://github.com/s-fletcher/react-email-heading-bug-reproduction

To Reproduce

  1. Use create-email template

    npx create-email@latest
    cd react-email-starter
    npm install
  2. Add emails/email.tsx

import { Tailwind, Button, Heading } from "@react-email/components";
import React from "react";

const Email = () => {
  return (
    <Tailwind
      config={{
        theme: {
          extend: {
            colors: {
              brand: "#007291",
            },
          },
        },
      }}
    >
      <Heading>Test</Heading>
      <Button
        href="https://example.com"
        className="bg-brand px-3 py-2 font-medium leading-4 text-white"
      >
        Click me
      </Button>
    </Tailwind>
  );
};

export default Email;
  1. Start email dev server
npm run dev
  1. Navigate to http://localhost:3000/preview/email, Header is not shown.

Expected Behavior

Heading should render an h1 tag with "Test".

What's your node version? (if relevant)

No response

gabrielmfern commented 1 month ago

Seems like this is very much related to #1335, and I think it will fix this. Will do a few more tests

gabrielmfern commented 1 month ago

Just merged in #1335 and going to release a canary version for this in a while. Once I do, I'll let you know so you can install and have this fixed locally.

gabrielmfern commented 1 month ago

Released and should now be working under @react-email/tailwind@0.0.16-canary.1 or @react-email/components@0.0.17-canary.1!

Let me know how using this version goes!

s-fletcher commented 1 month ago

@gabrielmfern This looks to be resolved after testing with @react-email/components@0.0.17-canary.1.

Thank you!

jmsv commented 2 weeks ago

@gabrielmfern this seems to be fixed on 0.0.17-canary.1, however looks like there's a regression on 0.0.17 ā€“ I just tried upgrading and tests caught a repro of this problem