From 8badcdfb957358f3e5cb0cd2619f1fc5f2f2dda7 Mon Sep 17 00:00:00 2001 From: Bu Kinoshita Date: Mon, 29 Sep 2025 19:15:53 +0000 Subject: [PATCH 01/14] chore(demo): tailwind basic setup --- apps/demo/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/demo/package.json b/apps/demo/package.json index 79ff536b09..2e581ead76 100644 --- a/apps/demo/package.json +++ b/apps/demo/package.json @@ -9,7 +9,7 @@ "export": "email-dev export" }, "dependencies": { - "@react-email/components": "workspace:*", + "@react-email/components": "@react-email/components@1.0.0-tailwindv4.1", "react": "^19", "react-dom": "^19", "email-dev": "workspace:*" @@ -20,4 +20,4 @@ "@types/react": "^19", "@types/react-dom": "^19" } -} +} \ No newline at end of file From 25a005f8c80aa16b63f502ca7ad2c85176308afa Mon Sep 17 00:00:00 2001 From: Bu Kinoshita Date: Tue, 30 Sep 2025 14:25:15 +0000 Subject: [PATCH 02/14] fix: minor tweak --- pnpm-lock.yaml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d6a6deaeb9..9f05892594 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -57,8 +57,8 @@ importers: apps/demo: dependencies: '@react-email/components': - specifier: workspace:* - version: link:../../packages/components + specifier: '@react-email/components@1.0.0-tailwindv4.1' + version: link:@react-email/components@1.0.0-tailwindv4.1 email-dev: specifier: workspace:* version: link:../../packages/react-email/dev From e37376d203210554f0b7cffe311760fffdade133 Mon Sep 17 00:00:00 2001 From: Bu Kinoshita Date: Tue, 30 Sep 2025 15:22:43 +0000 Subject: [PATCH 03/14] fix: minor tweak --- apps/demo/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/demo/package.json b/apps/demo/package.json index 2e581ead76..d29330a45e 100644 --- a/apps/demo/package.json +++ b/apps/demo/package.json @@ -20,4 +20,4 @@ "@types/react": "^19", "@types/react-dom": "^19" } -} \ No newline at end of file +} From f8ae674e864c5b83ac29245df2838b70dc1e9d1a Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Wed, 1 Oct 2025 11:10:49 -0300 Subject: [PATCH 04/14] fix errors --- apps/demo/package.json | 2 +- pnpm-lock.yaml | 247 ++++++++++++++++++++++++++++++++++++++++- 2 files changed, 246 insertions(+), 3 deletions(-) diff --git a/apps/demo/package.json b/apps/demo/package.json index d29330a45e..f77854755a 100644 --- a/apps/demo/package.json +++ b/apps/demo/package.json @@ -9,7 +9,7 @@ "export": "email-dev export" }, "dependencies": { - "@react-email/components": "@react-email/components@1.0.0-tailwindv4.1", + "@react-email/components": "npm:@react-email/components@1.0.0-tailwindv4.1", "react": "^19", "react-dom": "^19", "email-dev": "workspace:*" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9f05892594..bff82f4377 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -57,8 +57,8 @@ importers: apps/demo: dependencies: '@react-email/components': - specifier: '@react-email/components@1.0.0-tailwindv4.1' - version: link:@react-email/components@1.0.0-tailwindv4.1 + specifier: npm:@react-email/components@1.0.0-tailwindv4.1 + version: 1.0.0-tailwindv4.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0) email-dev: specifier: workspace:* version: link:../../packages/react-email/dev @@ -3489,6 +3489,100 @@ packages: '@radix-ui/rect@1.1.1': resolution: {integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==} + '@react-email/body@0.1.0': + resolution: {integrity: sha512-o1bcSAmDYNNHECbkeyceCVPGmVsYvT+O3sSO/Ct7apKUu3JphTi31hu+0Nwqr/pgV5QFqdoT5vdS3SW5DJFHgQ==} + peerDependencies: + react: ^19.0.0 + + '@react-email/button@0.2.0': + resolution: {integrity: sha512-8i+v6cMxr2emz4ihCrRiYJPp2/sdYsNNsBzXStlcA+/B9Umpm5Jj3WJKYpgTPM+aeyiqlG/MMI1AucnBm4f1oQ==} + engines: {node: '>=18.0.0'} + peerDependencies: + react: ^19.0.0 + + '@react-email/code-block@0.1.0': + resolution: {integrity: sha512-jSpHFsgqnQXxDIssE4gvmdtFncaFQz5D6e22BnVjcCPk/udK+0A9jRwGFEG8JD2si9ZXBmU4WsuqQEczuZn4ww==} + engines: {node: '>=18.0.0'} + peerDependencies: + react: ^19.0.0 + + '@react-email/code-inline@0.0.5': + resolution: {integrity: sha512-MmAsOzdJpzsnY2cZoPHFPk6uDO/Ncpb4Kh1hAt9UZc1xOW3fIzpe1Pi9y9p6wwUmpaeeDalJxAxH6/fnTquinA==} + engines: {node: '>=18.0.0'} + peerDependencies: + react: ^19.0.0 + + '@react-email/column@0.0.13': + resolution: {integrity: sha512-Lqq17l7ShzJG/d3b1w/+lVO+gp2FM05ZUo/nW0rjxB8xBICXOVv6PqjDnn3FXKssvhO5qAV20lHM6S+spRhEwQ==} + engines: {node: '>=18.0.0'} + peerDependencies: + react: ^19.0.0 + + '@react-email/components@1.0.0-tailwindv4.1': + resolution: {integrity: sha512-DnJER/P5IOfP3BfrMJVqsd+3wnTyFG8DON4cAkt8Mu68JSitx2F4jC7c7Dtgkw8STHzLg6k05uXNn0RmKIjbCw==} + engines: {node: '>=18.0.0'} + peerDependencies: + react: ^19.0.0 + + '@react-email/container@0.0.15': + resolution: {integrity: sha512-Qo2IQo0ru2kZq47REmHW3iXjAQaKu4tpeq/M8m1zHIVwKduL2vYOBQWbC2oDnMtWPmkBjej6XxgtZByxM6cCFg==} + engines: {node: '>=18.0.0'} + peerDependencies: + react: ^19.0.0 + + '@react-email/font@0.0.9': + resolution: {integrity: sha512-4zjq23oT9APXkerqeslPH3OZWuh5X4crHK6nx82mVHV2SrLba8+8dPEnWbaACWTNjOCbcLIzaC9unk7Wq2MIXw==} + peerDependencies: + react: ^19.0.0 + + '@react-email/head@0.0.12': + resolution: {integrity: sha512-X2Ii6dDFMF+D4niNwMAHbTkeCjlYYnMsd7edXOsi0JByxt9wNyZ9EnhFiBoQdqkE+SMDcu8TlNNttMrf5sJeMA==} + engines: {node: '>=18.0.0'} + peerDependencies: + react: ^19.0.0 + + '@react-email/heading@0.0.15': + resolution: {integrity: sha512-xF2GqsvBrp/HbRHWEfOgSfRFX+Q8I5KBEIG5+Lv3Vb2R/NYr0s8A5JhHHGf2pWBMJdbP4B2WHgj/VUrhy8dkIg==} + engines: {node: '>=18.0.0'} + peerDependencies: + react: ^19.0.0 + + '@react-email/hr@0.0.11': + resolution: {integrity: sha512-S1gZHVhwOsd1Iad5IFhpfICwNPMGPJidG/Uysy1AwmspyoAP5a4Iw3OWEpINFdgh9MHladbxcLKO2AJO+cA9Lw==} + engines: {node: '>=18.0.0'} + peerDependencies: + react: ^19.0.0 + + '@react-email/html@0.0.11': + resolution: {integrity: sha512-qJhbOQy5VW5qzU74AimjAR9FRFQfrMa7dn4gkEXKMB/S9xZN8e1yC1uA9C15jkXI/PzmJ0muDIWmFwatm5/+VA==} + engines: {node: '>=18.0.0'} + peerDependencies: + react: ^19.0.0 + + '@react-email/img@0.0.11': + resolution: {integrity: sha512-aGc8Y6U5C3igoMaqAJKsCpkbm1XjguQ09Acd+YcTKwjnC2+0w3yGUJkjWB2vTx4tN8dCqQCXO8FmdJpMfOA9EQ==} + engines: {node: '>=18.0.0'} + peerDependencies: + react: ^19.0.0 + + '@react-email/link@0.0.12': + resolution: {integrity: sha512-vF+xxQk2fGS1CN7UPQDbzvcBGfffr+GjTPNiWM38fhBfsLv6A/YUfaqxWlmL7zLzVmo0K2cvvV9wxlSyNba1aQ==} + engines: {node: '>=18.0.0'} + peerDependencies: + react: ^19.0.0 + + '@react-email/markdown@0.0.15': + resolution: {integrity: sha512-UQA9pVm5sbflgtg3EX3FquUP4aMBzmLReLbGJ6DZQZnAskBF36aI56cRykDq1o+1jT+CKIK1CducPYziaXliag==} + engines: {node: '>=18.0.0'} + peerDependencies: + react: ^19.0.0 + + '@react-email/preview@0.0.13': + resolution: {integrity: sha512-F7j9FJ0JN/A4d7yr+aw28p4uX7VLWs7hTHtLo7WRyw4G+Lit6Zucq4UWKRxJC8lpsUdzVmG7aBJnKOT+urqs/w==} + engines: {node: '>=18.0.0'} + peerDependencies: + react: ^19.0.0 + '@react-email/render@1.0.6': resolution: {integrity: sha512-zNueW5Wn/4jNC1c5LFgXzbUdv5Lhms+FWjOvWAhal7gx5YVf0q6dPJ0dnR70+ifo59gcMLwCZEaTS9EEuUhKvQ==} engines: {node: '>=18.0.0'} @@ -3496,12 +3590,31 @@ packages: react: ^19.0.0 react-dom: ^19.0.0 + '@react-email/render@1.3.1': + resolution: {integrity: sha512-BOc/kanieEVyiuldFFvceriiBGBBVhe4JWWXCXE2ehLIqz+gSWD4rgCoXAGbJRnnVyyp4joPqK62bSfa88yonA==} + engines: {node: '>=18.0.0'} + peerDependencies: + react: ^19.0.0 + react-dom: ^19.0.0 + + '@react-email/row@0.0.12': + resolution: {integrity: sha512-HkCdnEjvK3o+n0y0tZKXYhIXUNPDx+2vq1dJTmqappVHXS5tXS6W5JOPZr5j+eoZ8gY3PShI2LWj5rWF7ZEtIQ==} + engines: {node: '>=18.0.0'} + peerDependencies: + react: ^19.0.0 + '@react-email/section@0.0.14': resolution: {integrity: sha512-+fYWLb4tPU1A/+GE5J1+SEMA7/wR3V30lQ+OR9t2kAJqNrARDbMx0bLnYnR1QL5TiFRz0pCF05SQUobk6gHEDQ==} engines: {node: '>=18.0.0'} peerDependencies: react: ^19.0.0 + '@react-email/section@0.0.16': + resolution: {integrity: sha512-FjqF9xQ8FoeUZYKSdt8sMIKvoT9XF8BrzhT3xiFKdEMwYNbsDflcjfErJe3jb7Wj/es/lKTbV5QR1dnLzGpL3w==} + engines: {node: '>=18.0.0'} + peerDependencies: + react: ^19.0.0 + '@react-email/tailwind@0.0.12': resolution: {integrity: sha512-s8Ch7GL30qRKScn9NWwItMqxjtzbyUtCnXfC6sL2YTVtulbfvZZ06W+aA0S6f7fdrVlOOlQzZuK/sVaQCHhcSw==} engines: {node: '>=18.0.0'} @@ -3514,6 +3627,18 @@ packages: peerDependencies: react: ^19.0.0 + '@react-email/tailwind@2.0.0-tailwindv4.0': + resolution: {integrity: sha512-TQGoXAZVslvJbGm9qA12K8NYT/37blcKaFxm4Hx9XfBH79v1DkPjrYrhwHxnNrSBBo5vVTd3GwCZSBFFlrtVAg==} + engines: {node: '>=18.0.0'} + peerDependencies: + react: ^19.0.0 + + '@react-email/text@0.1.5': + resolution: {integrity: sha512-o5PNHFSE085VMXayxH+SJ1LSOtGsTv+RpNKnTiJDrJUwoBu77G3PlKOsZZQHCNyD28WsQpl9v2WcJLbQudqwPg==} + engines: {node: '>=18.0.0'} + peerDependencies: + react: ^19.0.0 + '@responsive-email/react-email@0.0.4': resolution: {integrity: sha512-oRpI+tmiHR4Ff86+cuX2fdlIN/5PdwLQL8wa+2ztypLdX/3J7MQQq9IKLt3X5tuwshtGXkotcydXDpXs8yfPQA==} peerDependencies: @@ -7971,6 +8096,9 @@ packages: engines: {node: '>=14.0.0'} hasBin: true + tailwindcss@4.1.12: + resolution: {integrity: sha512-DzFtxOi+7NsFf7DBtI3BJsynR+0Yp6etH+nRPTbpWnS2pZBaSksv/JGctNwSWzbFjp0vxSqknaUylseZqMDGrA==} + tapable@2.2.1: resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==} engines: {node: '>=6'} @@ -11255,6 +11383,94 @@ snapshots: '@radix-ui/rect@1.1.1': {} + '@react-email/body@0.1.0(react@19.0.0)': + dependencies: + react: 19.0.0 + + '@react-email/button@0.2.0(react@19.0.0)': + dependencies: + react: 19.0.0 + + '@react-email/code-block@0.1.0(react@19.0.0)': + dependencies: + prismjs: 1.30.0 + react: 19.0.0 + + '@react-email/code-inline@0.0.5(react@19.0.0)': + dependencies: + react: 19.0.0 + + '@react-email/column@0.0.13(react@19.0.0)': + dependencies: + react: 19.0.0 + + '@react-email/components@1.0.0-tailwindv4.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)': + dependencies: + '@react-email/body': 0.1.0(react@19.0.0) + '@react-email/button': 0.2.0(react@19.0.0) + '@react-email/code-block': 0.1.0(react@19.0.0) + '@react-email/code-inline': 0.0.5(react@19.0.0) + '@react-email/column': 0.0.13(react@19.0.0) + '@react-email/container': 0.0.15(react@19.0.0) + '@react-email/font': 0.0.9(react@19.0.0) + '@react-email/head': 0.0.12(react@19.0.0) + '@react-email/heading': 0.0.15(react@19.0.0) + '@react-email/hr': 0.0.11(react@19.0.0) + '@react-email/html': 0.0.11(react@19.0.0) + '@react-email/img': 0.0.11(react@19.0.0) + '@react-email/link': 0.0.12(react@19.0.0) + '@react-email/markdown': 0.0.15(react@19.0.0) + '@react-email/preview': 0.0.13(react@19.0.0) + '@react-email/render': 1.3.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0) + '@react-email/row': 0.0.12(react@19.0.0) + '@react-email/section': 0.0.16(react@19.0.0) + '@react-email/tailwind': 2.0.0-tailwindv4.0(react@19.0.0) + '@react-email/text': 0.1.5(react@19.0.0) + react: 19.0.0 + transitivePeerDependencies: + - react-dom + + '@react-email/container@0.0.15(react@19.0.0)': + dependencies: + react: 19.0.0 + + '@react-email/font@0.0.9(react@19.0.0)': + dependencies: + react: 19.0.0 + + '@react-email/head@0.0.12(react@19.0.0)': + dependencies: + react: 19.0.0 + + '@react-email/heading@0.0.15(react@19.0.0)': + dependencies: + react: 19.0.0 + + '@react-email/hr@0.0.11(react@19.0.0)': + dependencies: + react: 19.0.0 + + '@react-email/html@0.0.11(react@19.0.0)': + dependencies: + react: 19.0.0 + + '@react-email/img@0.0.11(react@19.0.0)': + dependencies: + react: 19.0.0 + + '@react-email/link@0.0.12(react@19.0.0)': + dependencies: + react: 19.0.0 + + '@react-email/markdown@0.0.15(react@19.0.0)': + dependencies: + md-to-react-email: 5.0.5(react@19.0.0) + react: 19.0.0 + + '@react-email/preview@0.0.13(react@19.0.0)': + dependencies: + react: 19.0.0 + '@react-email/render@1.0.6(react-dom@19.0.0(react@19.0.0))(react@19.0.0)': dependencies: html-to-text: 9.0.5 @@ -11263,10 +11479,26 @@ snapshots: react-dom: 19.0.0(react@19.0.0) react-promise-suspense: 0.3.4 + '@react-email/render@1.3.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)': + dependencies: + html-to-text: 9.0.5 + prettier: 3.5.3 + react: 19.0.0 + react-dom: 19.0.0(react@19.0.0) + react-promise-suspense: 0.3.4 + + '@react-email/row@0.0.12(react@19.0.0)': + dependencies: + react: 19.0.0 + '@react-email/section@0.0.14(react@19.0.0)': dependencies: react: 19.0.0 + '@react-email/section@0.0.16(react@19.0.0)': + dependencies: + react: 19.0.0 + '@react-email/tailwind@0.0.12(react@19.0.0)': dependencies: react: 19.0.0 @@ -11279,6 +11511,15 @@ snapshots: dependencies: react: 19.0.0 + '@react-email/tailwind@2.0.0-tailwindv4.0(react@19.0.0)': + dependencies: + react: 19.0.0 + tailwindcss: 4.1.12 + + '@react-email/text@0.1.5(react@19.0.0)': + dependencies: + react: 19.0.0 + '@responsive-email/react-email@0.0.4(react@19.0.0)': dependencies: '@react-email/section': 0.0.14(react@19.0.0) @@ -16833,6 +17074,8 @@ snapshots: transitivePeerDependencies: - ts-node + tailwindcss@4.1.12: {} + tapable@2.2.1: {} tar-fs@3.0.8: From d0a3ff66d39c36c2457ec4f22c6a1dba05d12f87 Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Wed, 1 Oct 2025 11:17:26 -0300 Subject: [PATCH 05/14] add tailwind config --- apps/demo/emails/tailwind.config.ts | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 apps/demo/emails/tailwind.config.ts diff --git a/apps/demo/emails/tailwind.config.ts b/apps/demo/emails/tailwind.config.ts new file mode 100644 index 0000000000..ab70e5e29d --- /dev/null +++ b/apps/demo/emails/tailwind.config.ts @@ -0,0 +1,3 @@ +import type { TailwindConfig } from '@react-email/components'; + +export default {} satisfies TailwindConfig; From 15ce1ca84c48dc89aaaa73aba5a260c4c9d24c8a Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Wed, 1 Oct 2025 13:08:20 -0300 Subject: [PATCH 06/14] use the new testing version --- apps/demo/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/demo/package.json b/apps/demo/package.json index f77854755a..f5daf60389 100644 --- a/apps/demo/package.json +++ b/apps/demo/package.json @@ -9,7 +9,7 @@ "export": "email-dev export" }, "dependencies": { - "@react-email/components": "npm:@react-email/components@1.0.0-tailwindv4.1", + "@react-email/components": "npm:@react-email/components@1.0.0-tailwindv4.2", "react": "^19", "react-dom": "^19", "email-dev": "workspace:*" From ea728ccaaeb4a4351644154a96c1857df7437146 Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Wed, 1 Oct 2025 13:08:49 -0300 Subject: [PATCH 07/14] update lock --- pnpm-lock.yaml | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bff82f4377..49191d2793 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -57,8 +57,8 @@ importers: apps/demo: dependencies: '@react-email/components': - specifier: npm:@react-email/components@1.0.0-tailwindv4.1 - version: 1.0.0-tailwindv4.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0) + specifier: npm:@react-email/components@1.0.0-tailwindv4.2 + version: 1.0.0-tailwindv4.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0) email-dev: specifier: workspace:* version: link:../../packages/react-email/dev @@ -3518,8 +3518,8 @@ packages: peerDependencies: react: ^19.0.0 - '@react-email/components@1.0.0-tailwindv4.1': - resolution: {integrity: sha512-DnJER/P5IOfP3BfrMJVqsd+3wnTyFG8DON4cAkt8Mu68JSitx2F4jC7c7Dtgkw8STHzLg6k05uXNn0RmKIjbCw==} + '@react-email/components@1.0.0-tailwindv4.2': + resolution: {integrity: sha512-B5qv8nWEs6tU1ncNd++2FElvvR7W2eVfoF0EVYFYtFvvlv7DbzYNzO6GOHP4SHHwCJ5AcdMOkEY1Orxhvsbrqg==} engines: {node: '>=18.0.0'} peerDependencies: react: ^19.0.0 @@ -3627,8 +3627,8 @@ packages: peerDependencies: react: ^19.0.0 - '@react-email/tailwind@2.0.0-tailwindv4.0': - resolution: {integrity: sha512-TQGoXAZVslvJbGm9qA12K8NYT/37blcKaFxm4Hx9XfBH79v1DkPjrYrhwHxnNrSBBo5vVTd3GwCZSBFFlrtVAg==} + '@react-email/tailwind@2.0.0-tailwindv4.1': + resolution: {integrity: sha512-DaHoIbsb1lVZ4VRZ1j45p77C7Epbnx5t1rESDH+umiTyEect+1Ve9c5P70kjP/1AakNhchoQLtGLMoGDQzjyLQ==} engines: {node: '>=18.0.0'} peerDependencies: react: ^19.0.0 @@ -11404,7 +11404,7 @@ snapshots: dependencies: react: 19.0.0 - '@react-email/components@1.0.0-tailwindv4.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)': + '@react-email/components@1.0.0-tailwindv4.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)': dependencies: '@react-email/body': 0.1.0(react@19.0.0) '@react-email/button': 0.2.0(react@19.0.0) @@ -11424,7 +11424,7 @@ snapshots: '@react-email/render': 1.3.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0) '@react-email/row': 0.0.12(react@19.0.0) '@react-email/section': 0.0.16(react@19.0.0) - '@react-email/tailwind': 2.0.0-tailwindv4.0(react@19.0.0) + '@react-email/tailwind': 2.0.0-tailwindv4.1(react@19.0.0) '@react-email/text': 0.1.5(react@19.0.0) react: 19.0.0 transitivePeerDependencies: @@ -11511,7 +11511,7 @@ snapshots: dependencies: react: 19.0.0 - '@react-email/tailwind@2.0.0-tailwindv4.0(react@19.0.0)': + '@react-email/tailwind@2.0.0-tailwindv4.1(react@19.0.0)': dependencies: react: 19.0.0 tailwindcss: 4.1.12 From 8f05ec9e64facbbf2021b5c3f0727bd7d970fab2 Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Wed, 1 Oct 2025 13:22:21 -0300 Subject: [PATCH 08/14] use pixelBasedPreset on tailwind config --- apps/demo/emails/tailwind.config.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/apps/demo/emails/tailwind.config.ts b/apps/demo/emails/tailwind.config.ts index ab70e5e29d..3c1a2b8acb 100644 --- a/apps/demo/emails/tailwind.config.ts +++ b/apps/demo/emails/tailwind.config.ts @@ -1,3 +1,5 @@ -import type { TailwindConfig } from '@react-email/components'; +import { pixelBasedPreset, type TailwindConfig } from '@react-email/components'; -export default {} satisfies TailwindConfig; +export default { + presets: [pixelBasedPreset], +} satisfies TailwindConfig; From 47a3cd9b6a0fa0a44e0f7b1549bfc327a78aaa77 Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Wed, 1 Oct 2025 15:05:57 -0300 Subject: [PATCH 09/14] update components --- apps/demo/package.json | 2 +- pnpm-lock.yaml | 98 +++++++++++++++++++++--------------------- 2 files changed, 50 insertions(+), 50 deletions(-) diff --git a/apps/demo/package.json b/apps/demo/package.json index f5daf60389..05b01c039b 100644 --- a/apps/demo/package.json +++ b/apps/demo/package.json @@ -9,7 +9,7 @@ "export": "email-dev export" }, "dependencies": { - "@react-email/components": "npm:@react-email/components@1.0.0-tailwindv4.2", + "@react-email/components": "npm:@react-email/components@1.0.0-tailwindv4.3", "react": "^19", "react-dom": "^19", "email-dev": "workspace:*" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 49191d2793..17f887f355 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -57,8 +57,8 @@ importers: apps/demo: dependencies: '@react-email/components': - specifier: npm:@react-email/components@1.0.0-tailwindv4.2 - version: 1.0.0-tailwindv4.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0) + specifier: npm:@react-email/components@1.0.0-tailwindv4.3 + version: 1.0.0-tailwindv4.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0) email-dev: specifier: workspace:* version: link:../../packages/react-email/dev @@ -3489,25 +3489,25 @@ packages: '@radix-ui/rect@1.1.1': resolution: {integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==} - '@react-email/body@0.1.0': - resolution: {integrity: sha512-o1bcSAmDYNNHECbkeyceCVPGmVsYvT+O3sSO/Ct7apKUu3JphTi31hu+0Nwqr/pgV5QFqdoT5vdS3SW5DJFHgQ==} + '@react-email/body@0.1.1-tailwindv4.0': + resolution: {integrity: sha512-9yWjQmQw6/XLeus6vnr4rB09hVlJUW0+MwCT8aqngfIfDNcxF0muzmGG4wyUwhtFtoxnECEaivVhjvuJDCEnuw==} peerDependencies: react: ^19.0.0 - '@react-email/button@0.2.0': - resolution: {integrity: sha512-8i+v6cMxr2emz4ihCrRiYJPp2/sdYsNNsBzXStlcA+/B9Umpm5Jj3WJKYpgTPM+aeyiqlG/MMI1AucnBm4f1oQ==} + '@react-email/button@0.2.1-tailwindv4.0': + resolution: {integrity: sha512-Dl8JfMsYApz+Jd3z4TTHeeLVak0dxu8Ms7gWy8fwT9/tu49ULGYWf7t1AEYtHG1OH4HN2UrGIDErJn1ACMR8TQ==} engines: {node: '>=18.0.0'} peerDependencies: react: ^19.0.0 - '@react-email/code-block@0.1.0': - resolution: {integrity: sha512-jSpHFsgqnQXxDIssE4gvmdtFncaFQz5D6e22BnVjcCPk/udK+0A9jRwGFEG8JD2si9ZXBmU4WsuqQEczuZn4ww==} + '@react-email/code-block@0.1.1-tailwindv4.0': + resolution: {integrity: sha512-X9NV4lKKmGQobRU5t4B+OVe+RUtsOQ9Ej5HorFWFA0a3M0kaD8bbAvWgSD58S7mA2pFlwqhg7ti2ifMmQD+3Pw==} engines: {node: '>=18.0.0'} peerDependencies: react: ^19.0.0 - '@react-email/code-inline@0.0.5': - resolution: {integrity: sha512-MmAsOzdJpzsnY2cZoPHFPk6uDO/Ncpb4Kh1hAt9UZc1xOW3fIzpe1Pi9y9p6wwUmpaeeDalJxAxH6/fnTquinA==} + '@react-email/code-inline@0.0.6-tailwindv4.0': + resolution: {integrity: sha512-2cZ1tzmVfKe4O3Xom/yEgBfNGrGS763xDLnhCter8R2GYUNBUEjJjAz/pXLiFjpqvSWPPH3elwowqURIB3orjQ==} engines: {node: '>=18.0.0'} peerDependencies: react: ^19.0.0 @@ -3518,14 +3518,14 @@ packages: peerDependencies: react: ^19.0.0 - '@react-email/components@1.0.0-tailwindv4.2': - resolution: {integrity: sha512-B5qv8nWEs6tU1ncNd++2FElvvR7W2eVfoF0EVYFYtFvvlv7DbzYNzO6GOHP4SHHwCJ5AcdMOkEY1Orxhvsbrqg==} + '@react-email/components@1.0.0-tailwindv4.3': + resolution: {integrity: sha512-PZdaIQJTPau731Y+4g7WoJ06PpNoskD1XkqXLbq8T6sFKTfGcJoLUVWmEvLgwkxJUM5DMhRuWq42qbUwiMvk3Q==} engines: {node: '>=18.0.0'} peerDependencies: react: ^19.0.0 - '@react-email/container@0.0.15': - resolution: {integrity: sha512-Qo2IQo0ru2kZq47REmHW3iXjAQaKu4tpeq/M8m1zHIVwKduL2vYOBQWbC2oDnMtWPmkBjej6XxgtZByxM6cCFg==} + '@react-email/container@0.0.16-tailwindv4.0': + resolution: {integrity: sha512-RUgvF17EDOgjxwvPejNRf3j9w4PplHfBecRa/5vpL3QdTWrETIBIXDJCprStTNkjo81y+sD49iDwDcKuohMjWw==} engines: {node: '>=18.0.0'} peerDependencies: react: ^19.0.0 @@ -3541,14 +3541,14 @@ packages: peerDependencies: react: ^19.0.0 - '@react-email/heading@0.0.15': - resolution: {integrity: sha512-xF2GqsvBrp/HbRHWEfOgSfRFX+Q8I5KBEIG5+Lv3Vb2R/NYr0s8A5JhHHGf2pWBMJdbP4B2WHgj/VUrhy8dkIg==} + '@react-email/heading@0.0.16-tailwindv4.0': + resolution: {integrity: sha512-WbcKUHcCkyoaQZceNf/RmhSe/qqnRJnWrg13IFwCM3/7i7zFqMZz7XiLsyraOeqKPafb3K9/OZW3iM7oYy0TiA==} engines: {node: '>=18.0.0'} peerDependencies: react: ^19.0.0 - '@react-email/hr@0.0.11': - resolution: {integrity: sha512-S1gZHVhwOsd1Iad5IFhpfICwNPMGPJidG/Uysy1AwmspyoAP5a4Iw3OWEpINFdgh9MHladbxcLKO2AJO+cA9Lw==} + '@react-email/hr@0.0.12-tailwindv4.0': + resolution: {integrity: sha512-N4cmqCuNt/35WjwiTsAl2YjMn/0JEF5BIkgdW5NbT3bypJq9uD6IuDrZuoQdhQF/U6nXKoAnDDM0olOJI5Fvfg==} engines: {node: '>=18.0.0'} peerDependencies: react: ^19.0.0 @@ -3559,14 +3559,14 @@ packages: peerDependencies: react: ^19.0.0 - '@react-email/img@0.0.11': - resolution: {integrity: sha512-aGc8Y6U5C3igoMaqAJKsCpkbm1XjguQ09Acd+YcTKwjnC2+0w3yGUJkjWB2vTx4tN8dCqQCXO8FmdJpMfOA9EQ==} + '@react-email/img@0.0.12-tailwindv4.0': + resolution: {integrity: sha512-fyux6rY919CvYyQ3naIwIFEFwWsLVhwOdUDOrVkpjypB/5f4E39niM74xaMr/u1CNcWsxINwxlryp44tjAHGhw==} engines: {node: '>=18.0.0'} peerDependencies: react: ^19.0.0 - '@react-email/link@0.0.12': - resolution: {integrity: sha512-vF+xxQk2fGS1CN7UPQDbzvcBGfffr+GjTPNiWM38fhBfsLv6A/YUfaqxWlmL7zLzVmo0K2cvvV9wxlSyNba1aQ==} + '@react-email/link@0.0.13-tailwindv4.0': + resolution: {integrity: sha512-undFRiSltzPPdMmk/9OhAitDMqPxASiKo3ee9MSPUHyMz8VsaJmy8TPgOH/j6D30TObfcmH0fCQTrWH28qqbJw==} engines: {node: '>=18.0.0'} peerDependencies: react: ^19.0.0 @@ -3577,8 +3577,8 @@ packages: peerDependencies: react: ^19.0.0 - '@react-email/preview@0.0.13': - resolution: {integrity: sha512-F7j9FJ0JN/A4d7yr+aw28p4uX7VLWs7hTHtLo7WRyw4G+Lit6Zucq4UWKRxJC8lpsUdzVmG7aBJnKOT+urqs/w==} + '@react-email/preview@0.0.14-tailwindv4.0': + resolution: {integrity: sha512-20IIqdGeSGGWAy0hKvAS2XoQX1muE1K8wLYVyJBFNpX/ghuKUeSDno72Xb8egUFHGlDVwM5q735j7bXpH1/bgg==} engines: {node: '>=18.0.0'} peerDependencies: react: ^19.0.0 @@ -3633,8 +3633,8 @@ packages: peerDependencies: react: ^19.0.0 - '@react-email/text@0.1.5': - resolution: {integrity: sha512-o5PNHFSE085VMXayxH+SJ1LSOtGsTv+RpNKnTiJDrJUwoBu77G3PlKOsZZQHCNyD28WsQpl9v2WcJLbQudqwPg==} + '@react-email/text@0.1.6-tailwindv4.0': + resolution: {integrity: sha512-IVoq2zqCzokjbeEtpFw0VgfL2z7O2K+BTG8nWMZKofUf8UX66X3JwdOGRw/K6U3XS6IahE9gy3yycX7rqn3gKw==} engines: {node: '>=18.0.0'} peerDependencies: react: ^19.0.0 @@ -11383,20 +11383,20 @@ snapshots: '@radix-ui/rect@1.1.1': {} - '@react-email/body@0.1.0(react@19.0.0)': + '@react-email/body@0.1.1-tailwindv4.0(react@19.0.0)': dependencies: react: 19.0.0 - '@react-email/button@0.2.0(react@19.0.0)': + '@react-email/button@0.2.1-tailwindv4.0(react@19.0.0)': dependencies: react: 19.0.0 - '@react-email/code-block@0.1.0(react@19.0.0)': + '@react-email/code-block@0.1.1-tailwindv4.0(react@19.0.0)': dependencies: prismjs: 1.30.0 react: 19.0.0 - '@react-email/code-inline@0.0.5(react@19.0.0)': + '@react-email/code-inline@0.0.6-tailwindv4.0(react@19.0.0)': dependencies: react: 19.0.0 @@ -11404,33 +11404,33 @@ snapshots: dependencies: react: 19.0.0 - '@react-email/components@1.0.0-tailwindv4.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)': + '@react-email/components@1.0.0-tailwindv4.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0)': dependencies: - '@react-email/body': 0.1.0(react@19.0.0) - '@react-email/button': 0.2.0(react@19.0.0) - '@react-email/code-block': 0.1.0(react@19.0.0) - '@react-email/code-inline': 0.0.5(react@19.0.0) + '@react-email/body': 0.1.1-tailwindv4.0(react@19.0.0) + '@react-email/button': 0.2.1-tailwindv4.0(react@19.0.0) + '@react-email/code-block': 0.1.1-tailwindv4.0(react@19.0.0) + '@react-email/code-inline': 0.0.6-tailwindv4.0(react@19.0.0) '@react-email/column': 0.0.13(react@19.0.0) - '@react-email/container': 0.0.15(react@19.0.0) + '@react-email/container': 0.0.16-tailwindv4.0(react@19.0.0) '@react-email/font': 0.0.9(react@19.0.0) '@react-email/head': 0.0.12(react@19.0.0) - '@react-email/heading': 0.0.15(react@19.0.0) - '@react-email/hr': 0.0.11(react@19.0.0) + '@react-email/heading': 0.0.16-tailwindv4.0(react@19.0.0) + '@react-email/hr': 0.0.12-tailwindv4.0(react@19.0.0) '@react-email/html': 0.0.11(react@19.0.0) - '@react-email/img': 0.0.11(react@19.0.0) - '@react-email/link': 0.0.12(react@19.0.0) + '@react-email/img': 0.0.12-tailwindv4.0(react@19.0.0) + '@react-email/link': 0.0.13-tailwindv4.0(react@19.0.0) '@react-email/markdown': 0.0.15(react@19.0.0) - '@react-email/preview': 0.0.13(react@19.0.0) + '@react-email/preview': 0.0.14-tailwindv4.0(react@19.0.0) '@react-email/render': 1.3.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0) '@react-email/row': 0.0.12(react@19.0.0) '@react-email/section': 0.0.16(react@19.0.0) '@react-email/tailwind': 2.0.0-tailwindv4.1(react@19.0.0) - '@react-email/text': 0.1.5(react@19.0.0) + '@react-email/text': 0.1.6-tailwindv4.0(react@19.0.0) react: 19.0.0 transitivePeerDependencies: - react-dom - '@react-email/container@0.0.15(react@19.0.0)': + '@react-email/container@0.0.16-tailwindv4.0(react@19.0.0)': dependencies: react: 19.0.0 @@ -11442,11 +11442,11 @@ snapshots: dependencies: react: 19.0.0 - '@react-email/heading@0.0.15(react@19.0.0)': + '@react-email/heading@0.0.16-tailwindv4.0(react@19.0.0)': dependencies: react: 19.0.0 - '@react-email/hr@0.0.11(react@19.0.0)': + '@react-email/hr@0.0.12-tailwindv4.0(react@19.0.0)': dependencies: react: 19.0.0 @@ -11454,11 +11454,11 @@ snapshots: dependencies: react: 19.0.0 - '@react-email/img@0.0.11(react@19.0.0)': + '@react-email/img@0.0.12-tailwindv4.0(react@19.0.0)': dependencies: react: 19.0.0 - '@react-email/link@0.0.12(react@19.0.0)': + '@react-email/link@0.0.13-tailwindv4.0(react@19.0.0)': dependencies: react: 19.0.0 @@ -11467,7 +11467,7 @@ snapshots: md-to-react-email: 5.0.5(react@19.0.0) react: 19.0.0 - '@react-email/preview@0.0.13(react@19.0.0)': + '@react-email/preview@0.0.14-tailwindv4.0(react@19.0.0)': dependencies: react: 19.0.0 @@ -11516,7 +11516,7 @@ snapshots: react: 19.0.0 tailwindcss: 4.1.12 - '@react-email/text@0.1.5(react@19.0.0)': + '@react-email/text@0.1.6-tailwindv4.0(react@19.0.0)': dependencies: react: 19.0.0 From 4a43831665209c9fd8b809f12a5971769681dbc7 Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Wed, 1 Oct 2025 15:06:22 -0300 Subject: [PATCH 10/14] sort --- apps/demo/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/demo/package.json b/apps/demo/package.json index 05b01c039b..91ce8d31be 100644 --- a/apps/demo/package.json +++ b/apps/demo/package.json @@ -10,9 +10,9 @@ }, "dependencies": { "@react-email/components": "npm:@react-email/components@1.0.0-tailwindv4.3", + "email-dev": "workspace:*", "react": "^19", - "react-dom": "^19", - "email-dev": "workspace:*" + "react-dom": "^19" }, "devDependencies": { "@react-email/preview-server": "workspace:*", From 147568dcba820162ca104d80d6dfc14e945690d7 Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Wed, 1 Oct 2025 15:36:51 -0300 Subject: [PATCH 11/14] sort --- apps/demo/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/demo/package.json b/apps/demo/package.json index 91ce8d31be..96ef73d2fc 100644 --- a/apps/demo/package.json +++ b/apps/demo/package.json @@ -16,8 +16,8 @@ }, "devDependencies": { "@react-email/preview-server": "workspace:*", - "next": "^15.3.2", "@types/react": "^19", - "@types/react-dom": "^19" + "@types/react-dom": "^19", + "next": "^15.3.2" } } From b4698ee99b12dad3d1f637f41eb25dd6234bcc43 Mon Sep 17 00:00:00 2001 From: Bu Kinoshita Date: Mon, 29 Sep 2025 19:26:56 +0000 Subject: [PATCH 12/14] refactor(demo): linear login code with tailwind --- apps/demo/emails/magic-links/linear-login-code.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/demo/emails/magic-links/linear-login-code.tsx b/apps/demo/emails/magic-links/linear-login-code.tsx index 6c6265daf6..1b01327f36 100644 --- a/apps/demo/emails/magic-links/linear-login-code.tsx +++ b/apps/demo/emails/magic-links/linear-login-code.tsx @@ -12,6 +12,7 @@ import { Section, Text, } from '@react-email/components'; +import { Tailwind } from '@react-email/tailwind'; interface LinearLoginCodeEmailProps { validationCode?: string; From df9240d44ef3a418802b386ef82bc883250aac51 Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Wed, 1 Oct 2025 17:17:54 -0300 Subject: [PATCH 13/14] use tailwind v4 --- .../emails/magic-links/linear-login-code.tsx | 137 +++++------------- apps/demo/emails/tailwind.config.ts | 6 + 2 files changed, 45 insertions(+), 98 deletions(-) diff --git a/apps/demo/emails/magic-links/linear-login-code.tsx b/apps/demo/emails/magic-links/linear-login-code.tsx index 1b01327f36..ef544b0ce7 100644 --- a/apps/demo/emails/magic-links/linear-login-code.tsx +++ b/apps/demo/emails/magic-links/linear-login-code.tsx @@ -10,9 +10,10 @@ import { Link, Preview, Section, + Tailwind, Text, } from '@react-email/components'; -import { Tailwind } from '@react-email/tailwind'; +import tailwindConfig from '../tailwind.config'; interface LinearLoginCodeEmailProps { validationCode?: string; @@ -27,33 +28,43 @@ export const LinearLoginCodeEmail = ({ }: LinearLoginCodeEmailProps) => ( - - Your login code for Linear - - Linear - Your login code for Linear -
- -
- - This link and code will only be valid for the next 5 minutes. If the - link does not work, you can use the login verification code directly: - - {validationCode} -
- - Linear - - - + + + Your login code for Linear + + Linear + + Your login code for Linear + +
+ +
+ + This link and code will only be valid for the next 5 minutes. If the + link does not work, you can use the login verification code + directly: + + + {validationCode} + +
+ + Linear + + + + ); @@ -63,73 +74,3 @@ LinearLoginCodeEmail.PreviewProps = { export default LinearLoginCodeEmail; -const logo = { - borderRadius: 21, - width: 42, - height: 42, -}; - -const main = { - backgroundColor: '#ffffff', - fontFamily: - '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif', -}; - -const container = { - margin: '0 auto', - padding: '20px 0 48px', - maxWidth: '560px', -}; - -const heading = { - fontSize: '24px', - letterSpacing: '-0.5px', - lineHeight: '1.3', - fontWeight: '400', - color: '#484848', - padding: '17px 0 0', -}; - -const paragraph = { - margin: '0 0 15px', - fontSize: '15px', - lineHeight: '1.4', - color: '#3c4149', -}; - -const buttonContainer = { - padding: '27px 0 27px', -}; - -const button = { - backgroundColor: '#5e6ad2', - borderRadius: '3px', - fontWeight: '600', - color: '#fff', - fontSize: '15px', - textDecoration: 'none', - textAlign: 'center' as const, - display: 'block', - padding: '11px 23px', -}; - -const reportLink = { - fontSize: '14px', - color: '#b4becc', -}; - -const hr = { - borderColor: '#dfe1e4', - margin: '42px 0 26px', -}; - -const code = { - fontFamily: 'monospace', - fontWeight: '700', - padding: '1px 4px', - backgroundColor: '#dfe1e4', - letterSpacing: '-0.3px', - fontSize: '21px', - borderRadius: '4px', - color: '#3c4149', -}; diff --git a/apps/demo/emails/tailwind.config.ts b/apps/demo/emails/tailwind.config.ts index 3c1a2b8acb..a7e3ce9c32 100644 --- a/apps/demo/emails/tailwind.config.ts +++ b/apps/demo/emails/tailwind.config.ts @@ -2,4 +2,10 @@ import { pixelBasedPreset, type TailwindConfig } from '@react-email/components'; export default { presets: [pixelBasedPreset], + theme: { + fontFamily: { + linear: + '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif', + }, + }, } satisfies TailwindConfig; From c8c423f9becacc7c99fb0a5209656fe2f883a377 Mon Sep 17 00:00:00 2001 From: Bu Kinoshita <6929565+bukinoshita@users.noreply.github.com> Date: Thu, 2 Oct 2025 23:32:49 +0000 Subject: [PATCH 14/14] Update apps/demo/emails/magic-links/linear-login-code.tsx Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com> --- apps/demo/emails/magic-links/linear-login-code.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/demo/emails/magic-links/linear-login-code.tsx b/apps/demo/emails/magic-links/linear-login-code.tsx index ef544b0ce7..5d174bb23c 100644 --- a/apps/demo/emails/magic-links/linear-login-code.tsx +++ b/apps/demo/emails/magic-links/linear-login-code.tsx @@ -55,7 +55,7 @@ export const LinearLoginCodeEmail = ({ link does not work, you can use the login verification code directly: - + {validationCode}