search

resend / react-email

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

Tailwind media queries causing exception #1449

Closed WillsB3 closed 3 weeks ago

WillsB3 commented 3 weeks ago

Describe the Bug

Given this code:

import {
  Body,
  Button,
  Head,
  Html,
  Preview,
  Tailwind,
} from "@react-email/components";
import * as React from "react";

export const TailwindError = () => (
  <Html>
    <Head />
    <Preview>Log in with this magic link</Preview>
    <Body>
      <Tailwind
        config={{
          theme: {
            extend: {
              colors: {
                brand: "#007291",
              },
            },
          },
        }}
      >
        <Button
          href="https://example.com"
          className="bg-brand px-3 py-2 font-medium leading-4 text-white md:w-[32px]"
        >
          Click me
        </Button>
      </Tailwind>
    </Body>
  </Html>
);

export default TailwindError;

The following error occurs:

Screenshot 2024-05-08 at 22 50 04

Which package is affected (leave empty if unsure)

@react-email/tailwind

Link to the code that reproduces this issue

See above

To Reproduce

  1. Run npx create-email@latest
  2. Replace contents of one of the sample templates with the code above
  3. Preview the template in the development server
  4. Observe the error

Expected Behavior

The media query classes work without error

What's your node version? (if relevant)

v18.19.0

gabrielmfern commented 3 weeks ago

You need to have the Tailwind component above the Head. The error message says it, it just isn't very well formatted there šŸ˜….

So, change it to the following and it should work.

 import {
   Body,
   Button,
   Head,
   Html,
   Preview,
   Tailwind,
 } from "@react-email/components";
 import * as React from "react";

 export const TailwindError = () => (
+   <Tailwind
+     config={{
+       theme: {
+         extend: {
+           colors: {
+             brand: "#007291",
+           },
+         },
+       },
+     }}
+   >
   <Html>
     <Head />
     <Preview>Log in with this magic link</Preview>
     <Body>
-      <Tailwind
-        config={{
-          theme: {
-            extend: {
-              colors: {
-                brand: "#007291",
-              },
-            },
-          },
-        }}
       >
         <Button
           href="https://example.com"
           className="bg-brand px-3 py-2 font-medium leading-4 text-white md:w-[32px]"
         >
           Click me
         </Button>
-      </Tailwind>
     </Body>
   </Html>
+ </Tailwind>
 );

 export default TailwindError;
WillsB3 commented 3 weeks ago

šŸ¤¦ Sorry, I misread the error message and thought it was ok as long as the template had a <Head> šŸ˜… .

I can open a PR to update the docs to try and make this more clear if that's helpful.

gabrielmfern commented 3 weeks ago

@WillsB3 For sure, if you might also be interested in updating our component with the error message to use something like a <pre> it would also be great!