Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Heading component not rendering with Tailwind #1391

Closed
s-fletcher opened this issue Mar 30, 2024 · 5 comments
Closed

Heading component not rendering with Tailwind #1391

s-fletcher opened this issue Mar 30, 2024 · 5 comments

Comments

@s-fletcher
Copy link

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
  1. 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
Copy link
Collaborator

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

@gabrielmfern
Copy link
Collaborator

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
Copy link
Collaborator

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
Copy link
Author

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

Thank you!

@jmsv
Copy link

jmsv commented Apr 30, 2024

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants