resend / react-email

💌 Build and send emails using React

Home Page:https://react.email

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Tailwind media queries causing exception

WillsB3 opened this issue · comments

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

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;

🤦 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.

@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!