From 0604b5011a6d1046f4cb1842dfa600219b4ab5d1 Mon Sep 17 00:00:00 2001 From: Bu Kinoshita Date: Mon, 29 Sep 2025 19:15:53 +0000 Subject: [PATCH 01/19] 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 1a7f9dfbbd9383be07224fd0ed8a311d7e272cc3 Mon Sep 17 00:00:00 2001 From: Bu Kinoshita Date: Tue, 30 Sep 2025 14:25:15 +0000 Subject: [PATCH 02/19] 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 b93c205785..a6f3af8db8 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 f90893b8266cc8c579c5d43934aabeeeb384472f Mon Sep 17 00:00:00 2001 From: Bu Kinoshita Date: Tue, 30 Sep 2025 15:22:43 +0000 Subject: [PATCH 03/19] 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 3fa21e5808384ec5c16b03c45244467b805b1762 Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Wed, 1 Oct 2025 11:10:49 -0300 Subject: [PATCH 04/19] 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 a6f3af8db8..2d35e355bd 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 @@ -3512,6 +3512,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'} @@ -3519,12 +3613,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'} @@ -3537,6 +3650,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 + '@react-spring/animated@9.7.5': resolution: {integrity: sha512-Tqrwz7pIlsSDITzxoLS3n/v/YCUHQdOIKtOJf4yL6kYVSDTSmVK1LI1Q3M/uu2Sx4X3pIWF3xLUhlsA6SPNTNg==} peerDependencies: @@ -8206,6 +8331,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'} @@ -11573,6 +11701,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 @@ -11581,10 +11797,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 @@ -11597,6 +11829,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 + '@react-spring/animated@9.7.5(react@19.0.0)': dependencies: '@react-spring/shared': 9.7.5(react@19.0.0) @@ -17376,6 +17617,8 @@ snapshots: transitivePeerDependencies: - ts-node + tailwindcss@4.1.12: {} + tapable@2.2.1: {} tar-fs@3.0.8: From 5f653b41be6b305afa3895b2e9109911ee3ab9ff Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Wed, 1 Oct 2025 11:17:26 -0300 Subject: [PATCH 05/19] 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 bd304390c973521cdd48a30c9029f04ad61efaa6 Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Wed, 1 Oct 2025 13:08:20 -0300 Subject: [PATCH 06/19] 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 22ea3f71f736d5897a6cba4ad9749dbef2203ec0 Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Wed, 1 Oct 2025 13:08:49 -0300 Subject: [PATCH 07/19] update lock --- pnpm-lock.yaml | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2d35e355bd..975447ab69 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 @@ -3541,8 +3541,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 @@ -3650,8 +3650,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 @@ -11722,7 +11722,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) @@ -11742,7 +11742,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: @@ -11829,7 +11829,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 9bafcd994d8a6a1cf7fc15dd0aeb41d8985901ca Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Wed, 1 Oct 2025 13:22:21 -0300 Subject: [PATCH 08/19] 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 0ce717062327e9ec4f95b4bfb9e604fb4e21ee34 Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Wed, 1 Oct 2025 15:05:57 -0300 Subject: [PATCH 09/19] 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 975447ab69..15f9485189 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 @@ -3512,25 +3512,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 @@ -3541,14 +3541,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 @@ -3564,14 +3564,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 @@ -3582,14 +3582,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 @@ -3600,8 +3600,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 @@ -3656,8 +3656,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 @@ -11701,20 +11701,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 @@ -11722,33 +11722,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 @@ -11760,11 +11760,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 @@ -11772,11 +11772,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 @@ -11785,7 +11785,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 @@ -11834,7 +11834,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 4060a5902b803731fc906471484f7d9d5137e7e3 Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Wed, 1 Oct 2025 15:06:22 -0300 Subject: [PATCH 10/19] 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 e0847b70a6d3b9709fa9e0b9f8639359cca708c7 Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Wed, 1 Oct 2025 15:36:51 -0300 Subject: [PATCH 11/19] 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 044e56a7ad5fee83e24e90b5e599fe8bfc571924 Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Fri, 3 Oct 2025 16:53:57 -0300 Subject: [PATCH 12/19] update to next preview --- apps/demo/package.json | 2 +- pnpm-lock.yaml | 18 +++++++++--------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/apps/demo/package.json b/apps/demo/package.json index 96ef73d2fc..f0320dacc3 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.3", + "@react-email/components": "npm:@react-email/components@1.0.0-tailwindv4.4", "email-dev": "workspace:*", "react": "^19", "react-dom": "^19" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 15f9485189..4487ba37bf 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.3 - version: 1.0.0-tailwindv4.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0) + specifier: npm:@react-email/components@1.0.0-tailwindv4.4 + version: 1.0.0-tailwindv4.4(react-dom@19.0.0(react@19.0.0))(react@19.0.0) email-dev: specifier: workspace:* version: link:../../packages/react-email/dev @@ -3541,8 +3541,8 @@ packages: peerDependencies: react: ^19.0.0 - '@react-email/components@1.0.0-tailwindv4.3': - resolution: {integrity: sha512-PZdaIQJTPau731Y+4g7WoJ06PpNoskD1XkqXLbq8T6sFKTfGcJoLUVWmEvLgwkxJUM5DMhRuWq42qbUwiMvk3Q==} + '@react-email/components@1.0.0-tailwindv4.4': + resolution: {integrity: sha512-po3ubz7xvhakpRG41/h+F8Y3C4qEKTtH8qgktKzsddRGApaK80VwgUzJJ2Q7o744f1ggPS3OB8+zEfn7hQa4CQ==} engines: {node: '>=18.0.0'} peerDependencies: react: ^19.0.0 @@ -3613,8 +3613,8 @@ packages: react: ^19.0.0 react-dom: ^19.0.0 - '@react-email/render@1.3.1': - resolution: {integrity: sha512-BOc/kanieEVyiuldFFvceriiBGBBVhe4JWWXCXE2ehLIqz+gSWD4rgCoXAGbJRnnVyyp4joPqK62bSfa88yonA==} + '@react-email/render@1.3.2-canary.0': + resolution: {integrity: sha512-yMogfNCKyt9WttsQI/dGyFJwG5Pol+1H1m9UtWsQ/KN7zNsptgh59qB2oXBbzL+0VEPG4zgAkKoVbMYjykwsBg==} engines: {node: '>=18.0.0'} peerDependencies: react: ^19.0.0 @@ -11722,7 +11722,7 @@ snapshots: dependencies: 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)': + '@react-email/components@1.0.0-tailwindv4.4(react-dom@19.0.0(react@19.0.0))(react@19.0.0)': dependencies: '@react-email/body': 0.1.1-tailwindv4.0(react@19.0.0) '@react-email/button': 0.2.1-tailwindv4.0(react@19.0.0) @@ -11739,7 +11739,7 @@ snapshots: '@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.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/render': 1.3.2-canary.0(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) @@ -11797,7 +11797,7 @@ 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)': + '@react-email/render@1.3.2-canary.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)': dependencies: html-to-text: 9.0.5 prettier: 3.5.3 From a8ebdfd502eaf97acf51ae0b7ff28049ad0dde88 Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Tue, 7 Oct 2025 09:36:04 -0300 Subject: [PATCH 13/19] update components --- 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 f0320dacc3..c5e35d446c 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.4", + "@react-email/components": "npm:@react-email/components@1.0.0-tailwindv4.5", "email-dev": "workspace:*", "react": "^19", "react-dom": "^19" From 4aa08f58721ed0717f1cded74b5a5fb0d57db66e Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Tue, 7 Oct 2025 09:36:11 -0300 Subject: [PATCH 14/19] update lock --- pnpm-lock.yaml | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4487ba37bf..bec52fc050 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.4 - version: 1.0.0-tailwindv4.4(react-dom@19.0.0(react@19.0.0))(react@19.0.0) + specifier: npm:@react-email/components@1.0.0-tailwindv4.5 + version: 1.0.0-tailwindv4.5(react-dom@19.0.0(react@19.0.0))(react@19.0.0) email-dev: specifier: workspace:* version: link:../../packages/react-email/dev @@ -3541,8 +3541,8 @@ packages: peerDependencies: react: ^19.0.0 - '@react-email/components@1.0.0-tailwindv4.4': - resolution: {integrity: sha512-po3ubz7xvhakpRG41/h+F8Y3C4qEKTtH8qgktKzsddRGApaK80VwgUzJJ2Q7o744f1ggPS3OB8+zEfn7hQa4CQ==} + '@react-email/components@1.0.0-tailwindv4.5': + resolution: {integrity: sha512-q12JqHQk0r1ET4g5TS9pETKz38NrNCzdQlUp4rilpdfO8D5Ivjd5ly6ft7jRN+op7H+bmBl+bDkSJq8qfncmzQ==} engines: {node: '>=18.0.0'} peerDependencies: react: ^19.0.0 @@ -3613,8 +3613,8 @@ packages: react: ^19.0.0 react-dom: ^19.0.0 - '@react-email/render@1.3.2-canary.0': - resolution: {integrity: sha512-yMogfNCKyt9WttsQI/dGyFJwG5Pol+1H1m9UtWsQ/KN7zNsptgh59qB2oXBbzL+0VEPG4zgAkKoVbMYjykwsBg==} + '@react-email/render@1.3.2': + resolution: {integrity: sha512-oq8/BD/I/YspeuBjjdLJG6xaf9tsPYk+VWu8/mX9xWbRN0t0ExKSVm9sEBL6RsCpndQA2jbY2VgPEreIrzUgqw==} engines: {node: '>=18.0.0'} peerDependencies: react: ^19.0.0 @@ -3650,8 +3650,8 @@ packages: peerDependencies: react: ^19.0.0 - '@react-email/tailwind@2.0.0-tailwindv4.1': - resolution: {integrity: sha512-DaHoIbsb1lVZ4VRZ1j45p77C7Epbnx5t1rESDH+umiTyEect+1Ve9c5P70kjP/1AakNhchoQLtGLMoGDQzjyLQ==} + '@react-email/tailwind@2.0.0-tailwindv4.3': + resolution: {integrity: sha512-uuTYJY+UZdq6mtq/wh2CANjsYv79DpcgVLFg5yBlME0DNHO+nQ5IHVNckVvWlvs2maS6IP8sUYWxuFgYqUvf6w==} engines: {node: '>=18.0.0'} peerDependencies: react: ^19.0.0 @@ -11722,7 +11722,7 @@ snapshots: dependencies: react: 19.0.0 - '@react-email/components@1.0.0-tailwindv4.4(react-dom@19.0.0(react@19.0.0))(react@19.0.0)': + '@react-email/components@1.0.0-tailwindv4.5(react-dom@19.0.0(react@19.0.0))(react@19.0.0)': dependencies: '@react-email/body': 0.1.1-tailwindv4.0(react@19.0.0) '@react-email/button': 0.2.1-tailwindv4.0(react@19.0.0) @@ -11739,10 +11739,10 @@ snapshots: '@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.14-tailwindv4.0(react@19.0.0) - '@react-email/render': 1.3.2-canary.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0) + '@react-email/render': 1.3.2(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/tailwind': 2.0.0-tailwindv4.3(react@19.0.0) '@react-email/text': 0.1.6-tailwindv4.0(react@19.0.0) react: 19.0.0 transitivePeerDependencies: @@ -11797,7 +11797,7 @@ snapshots: react-dom: 19.0.0(react@19.0.0) react-promise-suspense: 0.3.4 - '@react-email/render@1.3.2-canary.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)': + '@react-email/render@1.3.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)': dependencies: html-to-text: 9.0.5 prettier: 3.5.3 @@ -11829,7 +11829,7 @@ snapshots: dependencies: react: 19.0.0 - '@react-email/tailwind@2.0.0-tailwindv4.1(react@19.0.0)': + '@react-email/tailwind@2.0.0-tailwindv4.3(react@19.0.0)': dependencies: react: 19.0.0 tailwindcss: 4.1.12 From 6c63cceaf275ad015957a0203cbcbb83483038b3 Mon Sep 17 00:00:00 2001 From: Bu Kinoshita <6929565+bukinoshita@users.noreply.github.com> Date: Fri, 10 Oct 2025 13:21:27 +0000 Subject: [PATCH 15/19] feat(demo): use Tailwind v4 in amazon-review.tsx (#2502) Co-authored-by: gabriel miranda --- apps/demo/emails/reviews/amazon-review.tsx | 336 +++++++++------------ apps/demo/emails/tailwind.config.ts | 5 + 2 files changed, 151 insertions(+), 190 deletions(-) diff --git a/apps/demo/emails/reviews/amazon-review.tsx b/apps/demo/emails/reviews/amazon-review.tsx index 08fb4a2ffb..02da9acef4 100644 --- a/apps/demo/emails/reviews/amazon-review.tsx +++ b/apps/demo/emails/reviews/amazon-review.tsx @@ -10,8 +10,10 @@ import { Preview, Row, Section, + Tailwind, Text, } from '@react-email/components'; +import tailwindConfig from '../tailwind.config'; interface AmazonReviewEmailProps { titleText?: string; @@ -38,204 +40,158 @@ export const AmazonReviewEmail = ({ - - Amazon Review - -
- - - + + + Amazon Review + +
+ + + + Amazon Prime Logo + + + +
+ +
+ + + + {titleText} + + {reviewText} + + +
+ +
+ + Amazon Prime Logo - - - -
- -
- - - {titleText} - {reviewText} - - -
- -
- - - Amazon Book - - - - - 14 Habits of Highly Productive Developers (English Edition) - - Start with rating this product - - {reviwStars.map((star, index) => ( + + + + + 14 Habits of Highly Productive Developers (English Edition) + + Start with rating this product + + {reviwStars.map((star, index) => ( + Amazon Rating + ))} + + + Your reviews will be posted on Amazon using your public + name. + Check your public name. + + + +
+ +
+ + + + How about evaluating a previous purchase?{' '} + + View more + + + + +
+ +
+ +
+ + Amazon Rating - ))} - - - Your reviews will be posted on Amazon using your public name. - Check your public name. + + + + {socialMediaIcons.map((src, index) => ( + Amazon Social Midia + ))} + + +
+ +
+ + + Customer reviews must adhere to the{' '} + + Community Guidelines + {' '} + . - - -
- -
- - - - How about evaluating a previous purchase?{' '} - View more + + We hope this message was helpful to you. However, if you + prefer not to receive this type of communication from{' '} + + Amazon.com + {' '} + at{' '} + + alanturing@gmail.com{' '} + + ,{' '} + + click here + {' '} + . - - -
- -
- -
- - - Amazon Logo - - - - {socialMediaIcons.map((src, index) => ( - Amazon Social Midia - ))} - - -
- -
- - - Customer reviews must adhere to the{' '} - Community Guidelines . - - - We hope this message was helpful to you. However, if you prefer - not to receive this type of communication from{' '} - Amazon.com at{' '} - alanturing@gmail.com ,{' '} - click here . - - - Please note that product prices and availability are subject to - change. - - - © 2023 Amazon.com, Inc. or its affiliates. Amazon and all - associated marks are trademarks of Amazon.com, Inc. or its - affiliates. - - Reference: 706784740 - -
- - + + Please note that product prices and availability are subject + to change. + + + © 2023 Amazon.com, Inc. or its affiliates. Amazon and all + associated marks are trademarks of Amazon.com, Inc. or its + affiliates. + + + Reference: 706784740 + + +
+ + + ); }; -export default AmazonReviewEmail; - -const main = { - fontFamily: 'Ember,Helvetica,Arial,sans-seri', - backgroundColor: '#ffffff', -}; - -const container = { - borderTop: '4px solid #FF9900', - margin: '0 auto', - padding: '20px', - width: '640px', -}; - -const title = { - color: '#232f3e', - fontSize: '36px', - lineHeight: '38px', - fontWeight: '400', - margin: '20px 0', -}; - -const ratingContent = { - paddingLeft: '30px', -}; +AmazonReviewEmail.tailwindConfig = tailwindConfig; -const rating = { - display: 'inline-block', -}; - -const previewPurchase = { - background: '#008296', - color: '#ffffff', - padding: '8px 0', -}; - -const previewPurchaseLink = { - color: '#ffffff', - textDecoration: 'underline', - cursor: 'pointer', -}; - -const socialMedia = { - display: 'inline-block', - marginLeft: '10px', -}; - -const communityLink = { - color: '#666666', - textDecoration: 'underline', - cursor: 'pointer', -}; - -const clickHereLink = { - color: '#999999', - textDecoration: 'underline', - cursor: 'pointer', -}; - -const urlLink = { - color: '#1155cc', - textDecoration: 'underline', - cursor: 'pointer', -}; - -const footerText = { - fontSize: '10px', - color: '#666666', - margin: '8px 0', -}; +export default AmazonReviewEmail; diff --git a/apps/demo/emails/tailwind.config.ts b/apps/demo/emails/tailwind.config.ts index 3c1a2b8acb..818e585c13 100644 --- a/apps/demo/emails/tailwind.config.ts +++ b/apps/demo/emails/tailwind.config.ts @@ -2,4 +2,9 @@ import { pixelBasedPreset, type TailwindConfig } from '@react-email/components'; export default { presets: [pixelBasedPreset], + theme: { + fontFamily: { + amazon: ['Ember', 'Helvetica', 'Arial', 'sans-serif'], + }, + }, } satisfies TailwindConfig; From 2f125d464ce7c77722c71e80999635866a13dabe Mon Sep 17 00:00:00 2001 From: Bu Kinoshita Date: Mon, 29 Sep 2025 19:29:08 +0000 Subject: [PATCH 16/19] refactor(demo): slack with tailwind --- apps/demo/emails/magic-links/slack-confirm.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/demo/emails/magic-links/slack-confirm.tsx b/apps/demo/emails/magic-links/slack-confirm.tsx index a9269416ac..7ebdd17137 100644 --- a/apps/demo/emails/magic-links/slack-confirm.tsx +++ b/apps/demo/emails/magic-links/slack-confirm.tsx @@ -12,6 +12,7 @@ import { Section, Text, } from '@react-email/components'; +import { Tailwind } from '@react-email/tailwind'; interface SlackConfirmEmailProps { validationCode?: string; From ab83d26d6f88d54835a045ceade9fb9e44f6d55c Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Thu, 2 Oct 2025 12:04:15 -0300 Subject: [PATCH 17/19] migrate slack-confirm.tsx to using tailwind v4 --- .../demo/emails/magic-links/slack-confirm.tsx | 300 +++++++----------- apps/demo/emails/tailwind.config.ts | 2 + 2 files changed, 119 insertions(+), 183 deletions(-) diff --git a/apps/demo/emails/magic-links/slack-confirm.tsx b/apps/demo/emails/magic-links/slack-confirm.tsx index 7ebdd17137..dd3cc8175a 100644 --- a/apps/demo/emails/magic-links/slack-confirm.tsx +++ b/apps/demo/emails/magic-links/slack-confirm.tsx @@ -10,9 +10,10 @@ import { Preview, Row, Section, + Tailwind, Text, } from '@react-email/components'; -import { Tailwind } from '@react-email/tailwind'; +import tailwindConfig from '../tailwind.config'; interface SlackConfirmEmailProps { validationCode?: string; @@ -27,121 +28,127 @@ export const SlackConfirmEmail = ({ }: SlackConfirmEmailProps) => ( - - Confirm your email address - -
- Slack -
- Confirm your email address - - Your confirmation code is below - enter it in your open browser window - and we'll help you get signed in. - + + + Confirm your email address + +
+ Slack +
+ + Confirm your email address + + + Your confirmation code is below - enter it in your open browser + window and we'll help you get signed in. + -
- {validationCode} -
+
+ + {validationCode} + +
- - If you didn't request this email, there's nothing to worry about, you - can safely ignore it. - + + If you didn't request this email, there's nothing to worry about, + you can safely ignore it. + -
- - - Slack - - - - Slack - - +
+ + Slack - - - Slack - - - -
- -
- - Our blog - -    |    - - Policies - -    |    - - Help center - -    |    - - Slack Community - - - ©2022 Slack Technologies, LLC, a Salesforce company.
- 500 Howard Street, San Francisco, CA 94105, USA
-
- All rights reserved. - -
- - + + + + Slack + + + Slack + + + Slack + + + +
+ +
+ + Our blog + +    |    + + Policies + +    |    + + Help center + +    |    + + Slack Community + + + ©2022 Slack Technologies, LLC, a Salesforce company.
+ 500 Howard Street, San Francisco, CA 94105, USA
+
+ All rights reserved. + +
+ + + ); @@ -151,76 +158,3 @@ SlackConfirmEmail.PreviewProps = { export default SlackConfirmEmail; -const footerText = { - fontSize: '12px', - color: '#b7b7b7', - lineHeight: '15px', - textAlign: 'left' as const, - marginBottom: '50px', -}; - -const footerLink = { - color: '#b7b7b7', - textDecoration: 'underline', -}; - -const footerLogos = { - marginBottom: '32px', - paddingLeft: '8px', - paddingRight: '8px', -}; - -const socialMediaIcon = { - display: 'inline', - marginLeft: '8px', -}; - -const main = { - backgroundColor: '#ffffff', - margin: '0 auto', - fontFamily: - "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif", -}; - -const container = { - margin: '0 auto', - padding: '0px 20px', -}; - -const logoContainer = { - marginTop: '32px', -}; - -const h1 = { - color: '#1d1c1d', - fontSize: '36px', - fontWeight: '700', - margin: '30px 0', - padding: '0', - lineHeight: '42px', -}; - -const heroText = { - fontSize: '20px', - lineHeight: '28px', - marginBottom: '30px', -}; - -const codeBox = { - background: 'rgb(245, 244, 245)', - borderRadius: '4px', - marginBottom: '30px', - padding: '40px 10px', -}; - -const confirmationCodeText = { - fontSize: '30px', - textAlign: 'center' as const, - verticalAlign: 'middle', -}; - -const text = { - color: '#000', - fontSize: '14px', - lineHeight: '24px', -}; diff --git a/apps/demo/emails/tailwind.config.ts b/apps/demo/emails/tailwind.config.ts index 818e585c13..55529c29e0 100644 --- a/apps/demo/emails/tailwind.config.ts +++ b/apps/demo/emails/tailwind.config.ts @@ -5,6 +5,8 @@ export default { theme: { fontFamily: { amazon: ['Ember', 'Helvetica', 'Arial', 'sans-serif'], + slack: + "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif", }, }, } satisfies TailwindConfig; From 2263c1b64e02f8e46bcffe4a6fad7694bb434755 Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Tue, 7 Oct 2025 10:15:50 -0300 Subject: [PATCH 18/19] fix pixel differences --- apps/demo/emails/magic-links/slack-confirm.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/demo/emails/magic-links/slack-confirm.tsx b/apps/demo/emails/magic-links/slack-confirm.tsx index dd3cc8175a..f2c879032b 100644 --- a/apps/demo/emails/magic-links/slack-confirm.tsx +++ b/apps/demo/emails/magic-links/slack-confirm.tsx @@ -48,8 +48,8 @@ export const SlackConfirmEmail = ({ window and we'll help you get signed in. -
- +
+ {validationCode}
@@ -139,7 +139,7 @@ export const SlackConfirmEmail = ({ > Slack Community - + ©2022 Slack Technologies, LLC, a Salesforce company.
500 Howard Street, San Francisco, CA 94105, USA

From cdf367908dadb29aa675866e1bf79688c638f4ec Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Fri, 10 Oct 2025 11:11:12 -0300 Subject: [PATCH 19/19] lint and resolve comments --- apps/demo/emails/magic-links/slack-confirm.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/apps/demo/emails/magic-links/slack-confirm.tsx b/apps/demo/emails/magic-links/slack-confirm.tsx index f2c879032b..01c3a7f546 100644 --- a/apps/demo/emails/magic-links/slack-confirm.tsx +++ b/apps/demo/emails/magic-links/slack-confirm.tsx @@ -40,7 +40,7 @@ export const SlackConfirmEmail = ({ alt="Slack" />
- + Confirm your email address @@ -157,4 +157,3 @@ SlackConfirmEmail.PreviewProps = { } as SlackConfirmEmailProps; export default SlackConfirmEmail; -