Skip to content

Commit 4b81572

Browse files
gabrielmferncubic-dev-ai[bot]bukinoshita
committed
feat(tailwind): update to tailwind v4 (#2425)
Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com> Co-authored-by: Bu Kinoshita <[email protected]>
1 parent 11ff0eb commit 4b81572

File tree

59 files changed

+4554
-1444
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

59 files changed

+4554
-1444
lines changed

‎packages/components/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@react-email/components",
3-
"version": "0.5.7",
3+
"version": "1.0.0-tailwindv4.6",
44
"description": "A collection of all components React Email.",
55
"sideEffects": false,
66
"main": "./dist/index.js",
@@ -58,7 +58,7 @@
5858
"@react-email/render": "workspace:1.4.0",
5959
"@react-email/row": "workspace:0.0.12",
6060
"@react-email/section": "workspace:0.0.16",
61-
"@react-email/tailwind": "workspace:1.2.2",
61+
"@react-email/tailwind": "workspace:2.0.0-tailwindv4.4",
6262
"@react-email/text": "workspace:0.1.5"
6363
},
6464
"peerDependencies": {

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

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,7 @@ exports[`getEmailComponent() > with a demo email template 1`] = `
1212
<meta name="x-apple-disable-message-reformatting" />
1313
<!--$-->
1414
</head>
15-
<body
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"'>
15+
<body style="background-color:rgb(255,255,255)">
1716
<table
1817
border="0"
1918
width="100%"
@@ -24,7 +23,7 @@ exports[`getEmailComponent() > with a demo email template 1`] = `
2423
<tbody>
2524
<tr>
2625
<td
27-
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"'>
26+
style='margin-right:auto;margin-left:auto;margin-bottom:auto;margin-top:auto;background-color:rgb(255,255,255);padding-right:8px;padding-left:8px;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"'>
2827
<div
2928
style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0"
3029
data-skip-in-text="true">
@@ -40,7 +39,7 @@ exports[`getEmailComponent() > with a demo email template 1`] = `
4039
cellpadding="0"
4140
cellspacing="0"
4241
role="presentation"
43-
style="margin-left:auto;margin-right:auto;margin-top:40px;margin-bottom:40px;max-width:465px;border-radius:0.25rem;border-width:1px;border-color:rgb(234,234,234);border-style:solid;padding:20px">
42+
style="max-width:465px;margin-right:auto;margin-left:auto;margin-bottom:40px;margin-top:40px;border-radius:0.25rem;border-style:solid;border-width:1px;border-color:rgb(234,234,234);padding:20px">
4443
<tbody>
4544
<tr style="width:100%">
4645
<td>
@@ -59,26 +58,26 @@ exports[`getEmailComponent() > with a demo email template 1`] = `
5958
alt="Vercel Logo"
6059
height="37"
6160
src="/static/vercel-logo.png"
62-
style="margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;display:block;outline:none;border:none;text-decoration:none"
61+
style="display:block;outline:none;border:none;text-decoration:none;margin-right:auto;margin-left:auto;margin-bottom:0;margin-top:0"
6362
width="40" />
6463
</td>
6564
</tr>
6665
</tbody>
6766
</table>
6867
<h1
69-
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)">
68+
style="margin-right:0;margin-left:0;margin-bottom:30px;margin-top:30px;padding:0;text-align:center;font-weight:400;font-size:24px;color:rgb(0,0,0)">
7069
Join <strong>Enigma</strong> on <strong>Vercel</strong>
7170
</h1>
7271
<p
73-
style="font-size:14px;color:rgb(0,0,0);line-height:24px;margin-top:16px;margin-bottom:16px">
72+
style="font-size:14px;line-height:24px;color:rgb(0,0,0);margin-top:16px;margin-bottom:16px">
7473
Hello
7574
<!-- -->alanturing<!-- -->,
7675
</p>
7776
<p
78-
style="font-size:14px;color:rgb(0,0,0);line-height:24px;margin-top:16px;margin-bottom:16px">
77+
style="font-size:14px;line-height:24px;color:rgb(0,0,0);margin-top:16px;margin-bottom:16px">
7978
<strong>Alan</strong> (<a
8079
href="mailto:[email protected]"
81-
style="color:rgb(37,99,235);text-decoration-line:none"
80+
style="color:rgb(21,93,252);text-decoration-line:none"
8281
target="_blank"
8382
>[email protected]</a
8483
>) has invited you to the <strong>Enigma</strong> team on<!-- -->
@@ -110,7 +109,7 @@ exports[`getEmailComponent() > with a demo email template 1`] = `
110109
alt="alanturing&#x27;s profile picture"
111110
height="64"
112111
src="/static/vercel-user.png"
113-
style="border-radius:9999px;display:block;outline:none;border:none;text-decoration:none"
112+
style="display:block;outline:none;border:none;text-decoration:none;border-radius:9999px"
114113
width="64" />
115114
</td>
116115
<td
@@ -130,7 +129,7 @@ exports[`getEmailComponent() > with a demo email template 1`] = `
130129
alt="Enigma team logo"
131130
height="64"
132131
src="/static/vercel-team.png"
133-
style="border-radius:9999px;display:block;outline:none;border:none;text-decoration:none"
132+
style="display:block;outline:none;border:none;text-decoration:none;border-radius:9999px"
134133
width="64" />
135134
</td>
136135
</tr>
@@ -153,7 +152,7 @@ exports[`getEmailComponent() > with a demo email template 1`] = `
153152
<td>
154153
<a
155154
href="https://vercel.com"
156-
style="border-radius:0.25rem;background-color:rgb(0,0,0);padding-left:20px;padding-right:20px;padding-top:12px;padding-bottom:12px;text-align:center;font-weight:600;font-size:12px;color:rgb(255,255,255);text-decoration-line:none;line-height:100%;text-decoration:none;display:inline-block;max-width:100%;mso-padding-alt:0px"
155+
style="line-height:100%;text-decoration:none;display:inline-block;max-width:100%;mso-padding-alt:0px;border-radius:0.25rem;background-color:rgb(0,0,0);padding-right:20px;padding-left:20px;padding-bottom:12px;padding-top:12px;text-align:center;font-weight:600;font-size:12px;color:rgb(255,255,255);text-decoration-line:none"
157156
target="_blank"
158157
><span
159158
><!--[if mso]><i style="mso-font-width:500%;mso-text-raise:18" hidden>&#8202;&#8202;</i><![endif]--></span
@@ -169,19 +168,19 @@ exports[`getEmailComponent() > with a demo email template 1`] = `
169168
</tbody>
170169
</table>
171170
<p
172-
style="font-size:14px;color:rgb(0,0,0);line-height:24px;margin-top:16px;margin-bottom:16px">
171+
style="font-size:14px;line-height:24px;color:rgb(0,0,0);margin-top:16px;margin-bottom:16px">
173172
or copy and paste this URL into your browser:<!-- -->
174173
<a
175174
href="https://vercel.com"
176-
style="color:rgb(37,99,235);text-decoration-line:none"
175+
style="color:rgb(21,93,252);text-decoration-line:none"
177176
target="_blank"
178177
>https://vercel.com</a
179178
>
180179
</p>
181180
<hr
182-
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" />
181+
style="width:100%;border:none;border-top:1px solid #eaeaea;margin-right:0;margin-left:0;margin-bottom:26px;margin-top:26px;border-style:solid;border-width:1px;border-color:rgb(234,234,234)" />
183182
<p
184-
style="color:rgb(102,102,102);font-size:12px;line-height:24px;margin-top:16px;margin-bottom:16px">
183+
style="font-size:12px;line-height:24px;color:rgb(102,102,102);margin-top:16px;margin-bottom:16px">
185184
This invitation was intended for<!-- -->
186185
<span style="color:rgb(0,0,0)">alanturing</span>. This
187186
invite was sent from

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

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,7 @@ exports[`email export 1`] = `
1010
<meta name="x-apple-disable-message-reformatting" />
1111
<!--$-->
1212
</head>
13-
<body
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"'>
13+
<body style="background-color:rgb(255,255,255)">
1514
<table
1615
border="0"
1716
width="100%"
@@ -22,7 +21,7 @@ exports[`email export 1`] = `
2221
<tbody>
2322
<tr>
2423
<td
25-
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"'>
24+
style='margin-right:auto;margin-left:auto;margin-bottom:auto;margin-top:auto;background-color:rgb(255,255,255);padding-right:8px;padding-left:8px;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"'>
2625
<div
2726
style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0"
2827
data-skip-in-text="true">
@@ -38,7 +37,7 @@ exports[`email export 1`] = `
3837
cellpadding="0"
3938
cellspacing="0"
4039
role="presentation"
41-
style="margin-left:auto;margin-right:auto;margin-top:40px;margin-bottom:40px;max-width:465px;border-radius:0.25rem;border-width:1px;border-color:rgb(234,234,234);border-style:solid;padding:20px">
40+
style="max-width:465px;margin-right:auto;margin-left:auto;margin-bottom:40px;margin-top:40px;border-radius:0.25rem;border-style:solid;border-width:1px;border-color:rgb(234,234,234);padding:20px">
4241
<tbody>
4342
<tr style="width:100%">
4443
<td>
@@ -57,26 +56,26 @@ exports[`email export 1`] = `
5756
alt="Vercel Logo"
5857
height="37"
5958
src="/static/vercel-logo.png"
60-
style="margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;display:block;outline:none;border:none;text-decoration:none"
59+
style="display:block;outline:none;border:none;text-decoration:none;margin-right:auto;margin-left:auto;margin-bottom:0;margin-top:0"
6160
width="40" />
6261
</td>
6362
</tr>
6463
</tbody>
6564
</table>
6665
<h1
67-
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)">
66+
style="margin-right:0;margin-left:0;margin-bottom:30px;margin-top:30px;padding:0;text-align:center;font-weight:400;font-size:24px;color:rgb(0,0,0)">
6867
Join <strong></strong> on <strong>Vercel</strong>
6968
</h1>
7069
<p
71-
style="font-size:14px;color:rgb(0,0,0);line-height:24px;margin-top:16px;margin-bottom:16px">
70+
style="font-size:14px;line-height:24px;color:rgb(0,0,0);margin-top:16px;margin-bottom:16px">
7271
Hello
7372
<!-- -->,
7473
</p>
7574
<p
76-
style="font-size:14px;color:rgb(0,0,0);line-height:24px;margin-top:16px;margin-bottom:16px">
75+
style="font-size:14px;line-height:24px;color:rgb(0,0,0);margin-top:16px;margin-bottom:16px">
7776
<strong></strong> (<a
7877
href="mailto:undefined"
79-
style="color:rgb(37,99,235);text-decoration-line:none"
78+
style="color:rgb(21,93,252);text-decoration-line:none"
8079
target="_blank"></a
8180
>) has invited you to the <strong></strong> team on<!-- -->
8281
<strong>Vercel</strong>.
@@ -106,7 +105,7 @@ exports[`email export 1`] = `
106105
<img
107106
alt="undefined&#x27;s profile picture"
108107
height="64"
109-
style="border-radius:9999px;display:block;outline:none;border:none;text-decoration:none"
108+
style="display:block;outline:none;border:none;text-decoration:none;border-radius:9999px"
110109
width="64" />
111110
</td>
112111
<td
@@ -125,7 +124,7 @@ exports[`email export 1`] = `
125124
<img
126125
alt="undefined team logo"
127126
height="64"
128-
style="border-radius:9999px;display:block;outline:none;border:none;text-decoration:none"
127+
style="display:block;outline:none;border:none;text-decoration:none;border-radius:9999px"
129128
width="64" />
130129
</td>
131130
</tr>
@@ -147,7 +146,7 @@ exports[`email export 1`] = `
147146
<tr>
148147
<td>
149148
<a
150-
style="border-radius:0.25rem;background-color:rgb(0,0,0);padding-left:20px;padding-right:20px;padding-top:12px;padding-bottom:12px;text-align:center;font-weight:600;font-size:12px;color:rgb(255,255,255);text-decoration-line:none;line-height:100%;text-decoration:none;display:inline-block;max-width:100%;mso-padding-alt:0px"
149+
style="line-height:100%;text-decoration:none;display:inline-block;max-width:100%;mso-padding-alt:0px;border-radius:0.25rem;background-color:rgb(0,0,0);padding-right:20px;padding-left:20px;padding-bottom:12px;padding-top:12px;text-align:center;font-weight:600;font-size:12px;color:rgb(255,255,255);text-decoration-line:none"
151150
target="_blank"
152151
><span
153152
><!--[if mso]><i style="mso-font-width:500%;mso-text-raise:18" hidden>&#8202;&#8202;</i><![endif]--></span
@@ -163,16 +162,16 @@ exports[`email export 1`] = `
163162
</tbody>
164163
</table>
165164
<p
166-
style="font-size:14px;color:rgb(0,0,0);line-height:24px;margin-top:16px;margin-bottom:16px">
165+
style="font-size:14px;line-height:24px;color:rgb(0,0,0);margin-top:16px;margin-bottom:16px">
167166
or copy and paste this URL into your browser:<!-- -->
168167
<a
169-
style="color:rgb(37,99,235);text-decoration-line:none"
168+
style="color:rgb(21,93,252);text-decoration-line:none"
170169
target="_blank"></a>
171170
</p>
172171
<hr
173-
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" />
172+
style="width:100%;border:none;border-top:1px solid #eaeaea;margin-right:0;margin-left:0;margin-bottom:26px;margin-top:26px;border-style:solid;border-width:1px;border-color:rgb(234,234,234)" />
174173
<p
175-
style="color:rgb(102,102,102);font-size:12px;line-height:24px;margin-top:16px;margin-bottom:16px">
174+
style="font-size:12px;line-height:24px;color:rgb(102,102,102);margin-top:16px;margin-bottom:16px">
176175
This invitation was intended for<!-- -->
177176
<span style="color:rgb(0,0,0)"></span>. This invite was
178177
sent from <span style="color:rgb(0,0,0)"></span>

‎packages/tailwind/copy-tailwind-types.mjs‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎packages/tailwind/package.json‎

Lines changed: 52 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@react-email/tailwind",
3-
"version": "1.2.2",
3+
"version": "2.0.0-tailwindv4.4",
44
"description": "A React component to wrap emails with Tailwind CSS",
55
"sideEffects": false,
66
"main": "./dist/index.js",
@@ -23,8 +23,8 @@
2323
},
2424
"license": "MIT",
2525
"scripts": {
26-
"build": "tsc && cross-env NODE_ENV=production vite build --mode production && node ./copy-tailwind-types.mjs",
27-
"build:watch": "vite build --watch",
26+
"build": "tsdown",
27+
"build:watch": "tsdown --watch",
2828
"clean": "rm -rf dist",
2929
"test": "vitest run",
3030
"test:watch": "vitest"
@@ -43,7 +43,50 @@
4343
"node": ">=18.0.0"
4444
},
4545
"peerDependencies": {
46-
"react": "^18.0 || ^19.0 || ^19.0.0-rc"
46+
"react": "^18.0 || ^19.0 || ^19.0.0-rc",
47+
"@react-email/body": "workspace:*",
48+
"@react-email/button": "workspace:*",
49+
"@react-email/code-block": "workspace:*",
50+
"@react-email/code-inline": "workspace:*",
51+
"@react-email/container": "workspace:*",
52+
"@react-email/heading": "workspace:*",
53+
"@react-email/hr": "workspace:*",
54+
"@react-email/img": "workspace:*",
55+
"@react-email/link": "workspace:*",
56+
"@react-email/preview": "workspace:*",
57+
"@react-email/text": "workspace:*"
58+
},
59+
"peerDependenciesMeta": {
60+
"@react-email/button": {
61+
"optional": true
62+
},
63+
"@react-email/body": {
64+
"optional": true
65+
},
66+
"@react-email/code-block": {
67+
"optional": true
68+
},
69+
"@react-email/code-inline": {
70+
"optional": true
71+
},
72+
"@react-email/container": {
73+
"optional": true
74+
},
75+
"@react-email/heading": {
76+
"optional": true
77+
},
78+
"@react-email/hr": {
79+
"optional": true
80+
},
81+
"@react-email/img": {
82+
"optional": true
83+
},
84+
"@react-email/link": {
85+
"optional": true
86+
},
87+
"@react-email/preview": {
88+
"optional": true
89+
}
4790
},
4891
"devDependencies": {
4992
"@react-email/button": "workspace:^",
@@ -54,14 +97,12 @@
5497
"@react-email/link": "workspace:*",
5598
"@react-email/render": "workspace:*",
5699
"@responsive-email/react-email": "0.0.4",
100+
"@types/css-tree": "2.3.10",
57101
"@types/shelljs": "0.8.15",
58102
"@vitejs/plugin-react": "4.4.1",
59-
"cross-env": "10.0.0",
60-
"postcss": "8.5.3",
61-
"postcss-selector-parser": "7.1.0",
103+
"css-tree": "3.1.0",
62104
"react-dom": "^19",
63105
"shelljs": "0.9.2",
64-
"tailwindcss": "3.4.10",
65106
"tsconfig": "workspace:*",
66107
"typescript": "5.8.3",
67108
"vite": "6.3.6",
@@ -70,5 +111,8 @@
70111
},
71112
"publishConfig": {
72113
"access": "public"
114+
},
115+
"dependencies": {
116+
"tailwindcss": "4.1.12"
73117
}
74118
}

0 commit comments

Comments
 (0)