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:
Which package is affected (leave empty if unsure)
@react-email/tailwind
Link to the code that reproduces this issue
See above
To Reproduce
- Run
npx create-email@latest
- Replace contents of one of the sample templates with the code above
- Preview the template in the development server
- 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!