Skip to content

Commit ce78a04

Browse files
gabrielmferngabrielmfern
authored
feat(tailwind): pixelBasedPreset export (#2326)
1 parent b2407a1 commit ce78a04

File tree

8 files changed

+88
-81
lines changed

8 files changed

+88
-81
lines changed

‎.changeset/quiet-jeans-own.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@react-email/tailwind": minor
3+
---
4+
5+
add pixelBasedPreset export directly

‎.changeset/social-walls-stand.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@react-email/components": minor
3+
---
4+
5+
tailwind: add pixelBasedPreset export directly

‎apps/demo/emails/notifications/vercel-invite-user.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
Img,
1111
Link,
1212
Preview,
13+
pixelBasedPreset,
1314
Row,
1415
Section,
1516
Tailwind,
@@ -48,7 +49,11 @@ export const VercelInviteUserEmail = ({
4849
return (
4950
<Html>
5051
<Head />
51-
<Tailwind>
52+
<Tailwind
53+
config={{
54+
presets: [pixelBasedPreset],
55+
}}
56+
>
5257
<Body className="mx-auto my-auto bg-white px-2 font-sans">
5358
<Preview>{previewText}</Preview>
5459
<Container className="mx-auto my-[40px] max-w-[465px] rounded border border-[#eaeaea] border-solid p-[20px]">

‎apps/demo/emails/welcome/netlify-welcome.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
Img,
1010
Link,
1111
Preview,
12+
pixelBasedPreset,
1213
Row,
1314
Section,
1415
Tailwind,
@@ -40,6 +41,7 @@ export const NetlifyWelcomeEmail = ({
4041
<Head />
4142
<Tailwind
4243
config={{
44+
presets: [pixelBasedPreset],
4345
theme: {
4446
extend: {
4547
colors: {

‎apps/docs/components/tailwind.mdx‎

Lines changed: 5 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -47,12 +47,13 @@ pnpm add @react-email/tailwind -E
4747
Add the component around your email body content.
4848

4949
```jsx
50-
import { Tailwind, Button } from "@react-email/components";
50+
import { Tailwind, pixelBasedPreset, Button } from "@react-email/components";
5151

5252
const Email = () => {
5353
return (
5454
<Tailwind
5555
config={{
56+
presets: [pixelBasedPreset],
5657
theme: {
5758
extend: {
5859
colors: {
@@ -83,77 +84,9 @@ const Email = () => {
8384
<Info>
8485
Most email clients are style-limited and some styles may not work.
8586

86-
One example of this is how Tailwind uses `rem` as its main unit for
87-
better accessibility. This is not supported by [some email
88-
clients](https://www.caniemail.com/features/css-unit-rem/), if you want you
89-
can override the Tailwind config.
90-
91-
We can't really apply this configuration for you as it would have a few
92-
drawbacks. In the future, we will probably provide a preset to remediate this.
93-
But, for now, here's a good starter configuration you can use to avoid these issues:
94-
95-
<Accordion title="Tailwind configuration with px instead of rem">
96-
```typescript tailwind.config.ts
97-
import type { TailwindConfig } from "@react-email/tailwind";
98-
99-
export default {
100-
theme: {
101-
fontSize: {
102-
xs: ["12px", { lineHeight: "16px" }],
103-
sm: ["14px", { lineHeight: "20px" }],
104-
base: ["16px", { lineHeight: "24px" }],
105-
lg: ["18px", { lineHeight: "28px" }],
106-
xl: ["20px", { lineHeight: "28px" }],
107-
"2xl": ["24px", { lineHeight: "32px" }],
108-
"3xl": ["30px", { lineHeight: "36px" }],
109-
"4xl": ["36px", { lineHeight: "36px" }],
110-
"5xl": ["48px", { lineHeight: "1" }],
111-
"6xl": ["60px", { lineHeight: "1" }],
112-
"7xl": ["72px", { lineHeight: "1" }],
113-
"8xl": ["96px", { lineHeight: "1" }],
114-
"9xl": ["144px", { lineHeight: "1" }],
115-
},
116-
spacing: {
117-
px: "1px",
118-
0: "0",
119-
0.5: "2px",
120-
1: "4px",
121-
1.5: "6px",
122-
2: "8px",
123-
2.5: "10px",
124-
3: "12px",
125-
3.5: "14px",
126-
4: "16px",
127-
5: "20px",
128-
6: "24px",
129-
7: "28px",
130-
8: "32px",
131-
9: "36px",
132-
10: "40px",
133-
11: "44px",
134-
12: "48px",
135-
14: "56px",
136-
16: "64px",
137-
20: "80px",
138-
24: "96px",
139-
28: "112px",
140-
32: "128px",
141-
36: "144px",
142-
40: "160px",
143-
44: "176px",
144-
48: "192px",
145-
52: "208px",
146-
56: "224px",
147-
60: "240px",
148-
64: "256px",
149-
72: "288px",
150-
80: "320px",
151-
96: "384px",
152-
},
153-
},
154-
} satisfies TailwindConfig;
155-
```
156-
</Accordion>
87+
One example of this is how Tailwind uses `rem` as its main unit for better accessibility. This
88+
is not supported by [some email clients](https://www.caniemail.com/features/css-unit-rem/), and
89+
the `pixelBasedPreset` changes it so that the styles are based on `16px` instead.
15790
</Info>
15891

15992
## Live example

‎packages/preview-server/src/utils/__snapshots__/get-email-component.spec.ts.snap‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ exports[`getEmailComponent() > with a demo email template 1`] = `
1313
<!--$-->
1414
</head>
1515
<body
16-
style='margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;background-color:rgb(255,255,255);padding-left:0.5rem;padding-right:0.5rem;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'>
16+
style='margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;background-color:rgb(255,255,255);padding-left:8px;padding-right:8px;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'>
1717
<div
1818
style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0"
1919
data-skip-in-text="true">
@@ -48,14 +48,14 @@ exports[`getEmailComponent() > with a demo email template 1`] = `
4848
alt="Vercel Logo"
4949
height="37"
5050
src="/static/vercel-logo.png"
51-
style="margin-left:auto;margin-right:auto;margin-top:0px;margin-bottom:0px;display:block;outline:none;border:none;text-decoration:none"
51+
style="margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;display:block;outline:none;border:none;text-decoration:none"
5252
width="40" />
5353
</td>
5454
</tr>
5555
</tbody>
5656
</table>
5757
<h1
58-
style="margin-left:0px;margin-right:0px;margin-top:30px;margin-bottom:30px;padding:0px;text-align:center;font-weight:400;font-size:24px;color:rgb(0,0,0)">
58+
style="margin-left:0;margin-right:0;margin-top:30px;margin-bottom:30px;padding:0;text-align:center;font-weight:400;font-size:24px;color:rgb(0,0,0)">
5959
Join <strong>Enigma</strong> on <strong>Vercel</strong>
6060
</h1>
6161
<p
@@ -162,7 +162,7 @@ exports[`getEmailComponent() > with a demo email template 1`] = `
162162
>
163163
</p>
164164
<hr
165-
style="margin-left:0px;margin-right:0px;margin-top:26px;margin-bottom:26px;width:100%;border-width:1px;border-color:rgb(234,234,234);border-style:solid;border:none;border-top:1px solid #eaeaea" />
165+
style="margin-left:0;margin-right:0;margin-top:26px;margin-bottom:26px;width:100%;border-width:1px;border-color:rgb(234,234,234);border-style:solid;border:none;border-top:1px solid #eaeaea" />
166166
<p
167167
style="color:rgb(102,102,102);font-size:12px;line-height:24px;margin-top:16px;margin-bottom:16px">
168168
This invitation was intended for<!-- -->

‎packages/react-email/src/commands/testing/__snapshots__/export.spec.ts.snap‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ exports[`email export 1`] = `
1111
<!--$-->
1212
</head>
1313
<body
14-
style='margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;background-color:rgb(255,255,255);padding-left:0.5rem;padding-right:0.5rem;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'>
14+
style='margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;background-color:rgb(255,255,255);padding-left:8px;padding-right:8px;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'>
1515
<div
1616
style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0"
1717
data-skip-in-text="true">
@@ -46,14 +46,14 @@ exports[`email export 1`] = `
4646
alt="Vercel Logo"
4747
height="37"
4848
src="/static/vercel-logo.png"
49-
style="margin-left:auto;margin-right:auto;margin-top:0px;margin-bottom:0px;display:block;outline:none;border:none;text-decoration:none"
49+
style="margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;display:block;outline:none;border:none;text-decoration:none"
5050
width="40" />
5151
</td>
5252
</tr>
5353
</tbody>
5454
</table>
5555
<h1
56-
style="margin-left:0px;margin-right:0px;margin-top:30px;margin-bottom:30px;padding:0px;text-align:center;font-weight:400;font-size:24px;color:rgb(0,0,0)">
56+
style="margin-left:0;margin-right:0;margin-top:30px;margin-bottom:30px;padding:0;text-align:center;font-weight:400;font-size:24px;color:rgb(0,0,0)">
5757
Join <strong></strong> on <strong>Vercel</strong>
5858
</h1>
5959
<p
@@ -153,7 +153,7 @@ exports[`email export 1`] = `
153153
target="_blank"></a>
154154
</p>
155155
<hr
156-
style="margin-left:0px;margin-right:0px;margin-top:26px;margin-bottom:26px;width:100%;border-width:1px;border-color:rgb(234,234,234);border-style:solid;border:none;border-top:1px solid #eaeaea" />
156+
style="margin-left:0;margin-right:0;margin-top:26px;margin-bottom:26px;width:100%;border-width:1px;border-color:rgb(234,234,234);border-style:solid;border:none;border-top:1px solid #eaeaea" />
157157
<p
158158
style="color:rgb(102,102,102);font-size:12px;line-height:24px;margin-top:16px;margin-bottom:16px">
159159
This invitation was intended for<!-- -->

‎packages/tailwind/src/tailwind.tsx‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,63 @@ export interface EmailElementProps {
3434
style?: React.CSSProperties;
3535
}
3636

37+
export const pixelBasedPreset: TailwindConfig = {
38+
theme: {
39+
fontSize: {
40+
xs: ['12px', { lineHeight: '16px' }],
41+
sm: ['14px', { lineHeight: '20px' }],
42+
base: ['16px', { lineHeight: '24px' }],
43+
lg: ['18px', { lineHeight: '28px' }],
44+
xl: ['20px', { lineHeight: '28px' }],
45+
'2xl': ['24px', { lineHeight: '32px' }],
46+
'3xl': ['30px', { lineHeight: '36px' }],
47+
'4xl': ['36px', { lineHeight: '36px' }],
48+
'5xl': ['48px', { lineHeight: '1' }],
49+
'6xl': ['60px', { lineHeight: '1' }],
50+
'7xl': ['72px', { lineHeight: '1' }],
51+
'8xl': ['96px', { lineHeight: '1' }],
52+
'9xl': ['144px', { lineHeight: '1' }],
53+
},
54+
spacing: {
55+
px: '1px',
56+
0: '0',
57+
0.5: '2px',
58+
1: '4px',
59+
1.5: '6px',
60+
2: '8px',
61+
2.5: '10px',
62+
3: '12px',
63+
3.5: '14px',
64+
4: '16px',
65+
5: '20px',
66+
6: '24px',
67+
7: '28px',
68+
8: '32px',
69+
9: '36px',
70+
10: '40px',
71+
11: '44px',
72+
12: '48px',
73+
14: '56px',
74+
16: '64px',
75+
20: '80px',
76+
24: '96px',
77+
28: '112px',
78+
32: '128px',
79+
36: '144px',
80+
40: '160px',
81+
44: '176px',
82+
48: '192px',
83+
52: '208px',
84+
56: '224px',
85+
60: '240px',
86+
64: '256px',
87+
72: '288px',
88+
80: '320px',
89+
96: '384px',
90+
},
91+
},
92+
};
93+
3794
export const Tailwind: React.FC<TailwindProps> = ({ children, config }) => {
3895
const tailwind = setupTailwind(config ?? {});
3996

0 commit comments

Comments
 (0)