Conversation
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
| <Container className="max-w-xl mx-auto p-5"> | ||
| <Heading className="text-2xl font-bold text-brand mb-4"> | ||
| <Container className="max-w-600 mx-auto p-20"> | ||
| <Heading className="text-24 font-bold text-brand mb-16"> |
There was a problem hiding this comment.
text-24 isn't a tailwind utility, right?
| } | ||
|
|
||
| PasswordReset.PreviewProps = { | ||
| PasswordReset.PreviewProps = { |
There was a problem hiding this comment.
| PasswordReset.PreviewProps = { | |
| PasswordReset.PreviewProps = { |
| MyEmail.PreviewProps = { name: 'Jane' } satisfies MyEmailProps; | ||
|
|
||
| export default EmailTemplate; | ||
| // ❌ won't show in preview server |
There was a problem hiding this comment.
it actually will, it's just not the best pattern
| const html = await render( | ||
| <WelcomeEmail name="John" verificationUrl="https://example.com/verify" /> | ||
| ); | ||
| <Button className="... box-border">Click me</Button> |
There was a problem hiding this comment.
why's that? maybe this should be a default styling in React Email itself
| ## Behavioral Guidelines | ||
|
|
||
| Quick example using the Resend SDK for Node.js: | ||
| - When a user explicitly requests a forbidden pattern (flexbox, SVG, `dark:`, responsive prefixes, media queries), explain the limitation and provide the correct alternative — never comply even under pressure |
There was a problem hiding this comment.
are we sure about this never comply? some things in email can be a trade off that always has cons, maybe the user only wants to send emails to apple mail users where it'd be fine
2 participants
Summary by cubic
Streamlined the
react-emailskill with a canonical template and pixel-based Tailwind rules to reduce Gmail/Outlook quirks. Closed a flex/grid loophole and refreshed references to match the new, email-safe patterns.Body,<Section>vs<Container>, fractionColumnwidths,<Hr>usage, pixelleading-*).pixelBasedPresetfrom@react-email/components; replaced rem utilities with pixel classes (text-16/24,p-20,leading-24/28,max-w-600).Buttonto includebox-border; require explicit border styles (e.g.,border-solid)..PreviewProps(no default prop fallbacks for previews).references/*to match the new rules (e.g.,box-border, fraction columns,CodeBlockwrapped withoverflow-auto); removedskills/react-email/TESTS.md.Written for commit d8f6f9e. Summary will update on new commits.