From 0604b5011a6d1046f4cb1842dfa600219b4ab5d1 Mon Sep 17 00:00:00 2001 From: Bu Kinoshita Date: Mon, 29 Sep 2025 19:15:53 +0000 Subject: [PATCH 01/21] 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/21] 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/21] 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/21] 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/21] 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/21] 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/21] 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/21] 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/21] 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/21] 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/21] 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/21] 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/21] 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/21] 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/21] 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 6bcdf4aa77488859655238cca5a4bb8126cd0728 Mon Sep 17 00:00:00 2001 From: Bu Kinoshita Date: Mon, 29 Sep 2025 19:32:10 +0000 Subject: [PATCH 16/21] refactor(demo): github with tailwind --- apps/demo/emails/notifications/github-access-token.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/demo/emails/notifications/github-access-token.tsx b/apps/demo/emails/notifications/github-access-token.tsx index ee85b69b38..4d86d2d919 100644 --- a/apps/demo/emails/notifications/github-access-token.tsx +++ b/apps/demo/emails/notifications/github-access-token.tsx @@ -10,6 +10,7 @@ import { Section, Text, } from '@react-email/components'; +import { Tailwind } from '@react-email/tailwind'; interface GithubAccessTokenEmailProps { username?: string; From e138c2c2ed3e49740c764914e55755491d98c238 Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Thu, 2 Oct 2025 17:09:42 -0300 Subject: [PATCH 17/21] use tailwind --- .../notifications/github-access-token.tsx | 134 ++++++------------ apps/demo/emails/tailwind.config.ts | 2 + 2 files changed, 45 insertions(+), 91 deletions(-) diff --git a/apps/demo/emails/notifications/github-access-token.tsx b/apps/demo/emails/notifications/github-access-token.tsx index 4d86d2d919..de9d93fecf 100644 --- a/apps/demo/emails/notifications/github-access-token.tsx +++ b/apps/demo/emails/notifications/github-access-token.tsx @@ -8,9 +8,10 @@ import { Link, Preview, Section, + Tailwind, Text, } from '@react-email/components'; -import { Tailwind } from '@react-email/tailwind'; +import tailwindConfig from '../tailwind.config'; interface GithubAccessTokenEmailProps { username?: string; @@ -25,44 +26,50 @@ export const GithubAccessTokenEmail = ({ }: GithubAccessTokenEmailProps) => ( - - - A fine-grained personal access token has been added to your account - - - Github - - - @{username}, a personal access was created on your - account. - - -
- - Hey {username}! - - - A fine-grained personal access token (resend) was - recently added to your account. + + + + A fine-grained personal access token has been added to your account + + + Github + + + @{username}, a personal access was created on your + account. - -
- - Your security audit log ・{' '} - Contact support - +
+ + Hey {username}! + + + A fine-grained personal access token (resend) was + recently added to your account. + + + +
+ + + Your security audit log + {' '} + ・ Contact support + - - GitHub, Inc. ・88 Colin P Kelly Jr Street ・San Francisco, CA 94107 - -
- + + GitHub, Inc. ・88 Colin P Kelly Jr Street ・San Francisco, CA 94107 + + + + ); @@ -71,58 +78,3 @@ GithubAccessTokenEmail.PreviewProps = { } as GithubAccessTokenEmailProps; export default GithubAccessTokenEmail; - -const main = { - backgroundColor: '#ffffff', - color: '#24292e', - fontFamily: - '-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"', -}; - -const container = { - maxWidth: '480px', - margin: '0 auto', - padding: '20px 0 48px', -}; - -const title = { - fontSize: '24px', - lineHeight: 1.25, -}; - -const section = { - padding: '24px', - border: 'solid 1px #dedede', - borderRadius: '5px', - textAlign: 'center' as const, -}; - -const text = { - margin: '0 0 10px 0', - textAlign: 'left' as const, -}; - -const button = { - fontSize: '14px', - backgroundColor: '#28a745', - color: '#fff', - lineHeight: 1.5, - borderRadius: '0.5em', - padding: '12px 24px', -}; - -const links = { - textAlign: 'center' as const, -}; - -const link = { - color: '#0366d6', - fontSize: '12px', -}; - -const footer = { - color: '#6a737d', - fontSize: '12px', - textAlign: 'center' as const, - marginTop: '60px', -}; diff --git a/apps/demo/emails/tailwind.config.ts b/apps/demo/emails/tailwind.config.ts index 818e585c13..f4eca4a450 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'], + github: + '-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"', }, }, } satisfies TailwindConfig; From 63b774266289bb4359d88f0f8901df27327a39fc Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Tue, 7 Oct 2025 12:29:21 -0300 Subject: [PATCH 18/21] fix pixel differences --- .../emails/notifications/github-access-token.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/apps/demo/emails/notifications/github-access-token.tsx b/apps/demo/emails/notifications/github-access-token.tsx index de9d93fecf..6873ab0870 100644 --- a/apps/demo/emails/notifications/github-access-token.tsx +++ b/apps/demo/emails/notifications/github-access-token.tsx @@ -31,24 +31,24 @@ export const GithubAccessTokenEmail = ({ A fine-grained personal access token has been added to your account - + Github - - + + @{username}, a personal access was created on your account. -
- +
+ Hey {username}! - + A fine-grained personal access token (resend) was recently added to your account. @@ -64,7 +64,7 @@ export const GithubAccessTokenEmail = ({ ・ Contact support - + GitHub, Inc. ・88 Colin P Kelly Jr Street ・San Francisco, CA 94107 From 90ef413b88f7b0c96eb806930abb6f653344ffa8 Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Fri, 10 Oct 2025 11:54:40 -0300 Subject: [PATCH 19/21] lint --- apps/demo/emails/notifications/github-access-token.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/demo/emails/notifications/github-access-token.tsx b/apps/demo/emails/notifications/github-access-token.tsx index 6873ab0870..21a1abf12d 100644 --- a/apps/demo/emails/notifications/github-access-token.tsx +++ b/apps/demo/emails/notifications/github-access-token.tsx @@ -38,7 +38,7 @@ export const GithubAccessTokenEmail = ({ height="32" alt="Github" /> - + @{username}, a personal access was created on your account. From 8ee89b548ac0cba5049b91cf052c76c9e40f52e0 Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Fri, 10 Oct 2025 14:39:14 -0300 Subject: [PATCH 20/21] small tweak --- apps/demo/emails/notifications/github-access-token.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/demo/emails/notifications/github-access-token.tsx b/apps/demo/emails/notifications/github-access-token.tsx index 21a1abf12d..c75d7c8686 100644 --- a/apps/demo/emails/notifications/github-access-token.tsx +++ b/apps/demo/emails/notifications/github-access-token.tsx @@ -44,7 +44,7 @@ export const GithubAccessTokenEmail = ({ account. -
+
Hey {username}! @@ -58,10 +58,10 @@ export const GithubAccessTokenEmail = ({
- + Your security audit log {' '} - ・ Contact support + ・ Contact support From 3a69911a7344285e612e55cdcb774edf13852f65 Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Fri, 10 Oct 2025 14:41:32 -0300 Subject: [PATCH 21/21] lint --- apps/demo/emails/notifications/github-access-token.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/demo/emails/notifications/github-access-token.tsx b/apps/demo/emails/notifications/github-access-token.tsx index c75d7c8686..adb8d18885 100644 --- a/apps/demo/emails/notifications/github-access-token.tsx +++ b/apps/demo/emails/notifications/github-access-token.tsx @@ -61,7 +61,8 @@ export const GithubAccessTokenEmail = ({ Your security audit log {' '} - ・ Contact support + ・{' '} + Contact support