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 aca371fcbf6c920f3ccd25239c1188e602ac6bd6 Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Fri, 3 Oct 2025 09:43:41 -0300 Subject: [PATCH 16/19] use tailwind --- apps/demo/emails/tailwind.config.ts | 11 ++ apps/demo/emails/welcome/koala-welcome.tsx | 119 +++++++-------------- 2 files changed, 52 insertions(+), 78 deletions(-) diff --git a/apps/demo/emails/tailwind.config.ts b/apps/demo/emails/tailwind.config.ts index 818e585c13..7059e96708 100644 --- a/apps/demo/emails/tailwind.config.ts +++ b/apps/demo/emails/tailwind.config.ts @@ -5,6 +5,17 @@ export default { theme: { fontFamily: { amazon: ['Ember', 'Helvetica', 'Arial', 'sans-serif'], + koala: [ + '-apple-system', + 'BlinkMacSystemFont', + 'Segoe UI', + 'Roboto', + 'Oxygen-Sans', + 'Ubuntu', + 'Cantarell', + 'Helvetica Neue', + 'sans-serif', + ], }, }, } satisfies TailwindConfig; diff --git a/apps/demo/emails/welcome/koala-welcome.tsx b/apps/demo/emails/welcome/koala-welcome.tsx index 5ec1ebe0bc..6ca389cb6c 100644 --- a/apps/demo/emails/welcome/koala-welcome.tsx +++ b/apps/demo/emails/welcome/koala-welcome.tsx @@ -8,8 +8,10 @@ import { Img, Preview, Section, + Tailwind, Text, } from '@react-email/components'; +import tailwindConfig from '../tailwind.config'; interface KoalaWelcomeEmailProps { userFirstname: string; @@ -24,39 +26,45 @@ export const KoalaWelcomeEmail = ({ }: KoalaWelcomeEmailProps) => ( - - - The sales intelligence platform that helps you uncover qualified leads. - - - Koala - Hi {userFirstname}, - - Welcome to Koala, the sales intelligence platform that helps you - uncover qualified leads and close deals faster. - -
- -
- - Best, -
- The Koala team - -
- - 470 Noor Ave STE B #1148, South San Francisco, CA 94080 - - - + + + + The sales intelligence platform that helps you uncover qualified + leads. + + + Koala + Hi {userFirstname}, + + Welcome to Koala, the sales intelligence platform that helps you + uncover qualified leads and close deals faster. + +
+ +
+ + Best, +
+ The Koala team + +
+ + 470 Noor Ave STE B #1148, South San Francisco, CA 94080 + + + + ); @@ -65,48 +73,3 @@ KoalaWelcomeEmail.PreviewProps = { } as KoalaWelcomeEmailProps; export default KoalaWelcomeEmail; - -const main = { - backgroundColor: '#ffffff', - fontFamily: - '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif', -}; - -const container = { - margin: '0 auto', - padding: '20px 0 48px', -}; - -const logo = { - margin: '0 auto', -}; - -const paragraph = { - fontSize: '16px', - lineHeight: '26px', -}; - -const btnContainer = { - textAlign: 'center' as const, -}; - -const button = { - backgroundColor: '#5F51E8', - borderRadius: '3px', - color: '#fff', - fontSize: '16px', - textDecoration: 'none', - textAlign: 'center' as const, - display: 'block', - padding: '12px', -}; - -const hr = { - borderColor: '#cccccc', - margin: '20px 0', -}; - -const footer = { - color: '#8898aa', - fontSize: '12px', -}; From fe81830dcc3fe60e6625ce4ed3972cce79f6c03c Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Tue, 7 Oct 2025 17:28:43 -0300 Subject: [PATCH 17/19] fix minor differences --- apps/demo/emails/welcome/koala-welcome.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/apps/demo/emails/welcome/koala-welcome.tsx b/apps/demo/emails/welcome/koala-welcome.tsx index 6ca389cb6c..2a91b7e8af 100644 --- a/apps/demo/emails/welcome/koala-welcome.tsx +++ b/apps/demo/emails/welcome/koala-welcome.tsx @@ -40,26 +40,26 @@ export const KoalaWelcomeEmail = ({ alt="Koala" className="mx-auto" /> - Hi {userFirstname}, - + Hi {userFirstname}, + Welcome to Koala, the sales intelligence platform that helps you uncover qualified leads and close deals faster.
- + Best,
The Koala team
- + 470 Noor Ave STE B #1148, South San Francisco, CA 94080 From 62bc1384a52661dd72409705d2d43eb3addd9d40 Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Fri, 10 Oct 2025 14:11:18 -0300 Subject: [PATCH 18/19] lint --- apps/demo/emails/welcome/koala-welcome.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/apps/demo/emails/welcome/koala-welcome.tsx b/apps/demo/emails/welcome/koala-welcome.tsx index 2a91b7e8af..1267a887ae 100644 --- a/apps/demo/emails/welcome/koala-welcome.tsx +++ b/apps/demo/emails/welcome/koala-welcome.tsx @@ -40,7 +40,9 @@ export const KoalaWelcomeEmail = ({ alt="Koala" className="mx-auto" /> - Hi {userFirstname}, + + Hi {userFirstname}, + Welcome to Koala, the sales intelligence platform that helps you uncover qualified leads and close deals faster. From 84f88303522885ef4e29d011fc0161abc04ad7db Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Fri, 10 Oct 2025 16:31:00 -0300 Subject: [PATCH 19/19] remove testing files --- demo.html | 581 ---------------------------------------------------- local.html | 583 ----------------------------------------------------- 2 files changed, 1164 deletions(-) delete mode 100644 demo.html delete mode 100644 local.html diff --git a/demo.html b/demo.html deleted file mode 100644 index 45e2ab8f46..0000000000 --- a/demo.html +++ /dev/null @@ -1,581 +0,0 @@ - - - - - - - - - - - - - - - - - -
-
- #CodePenChallenge: Cubes -
-  ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ -
-
- - - - - - -
- codepen -
- - - - - - -
-

- View this Challenge on CodePen -

-

- This week: #CodePenChallenge: -

- Cubes -

-

- - - - - - -
-

- The Shape challenge continues! -

-

- Last week, we kicked things off with round shapes. - We "rounded" up the Pens from week one - in our - #CodePenChallenge: Round - collection. -

-

- This week, we move on to cubes 🧊 -

-

- Creating cubes in the browser is all about mastery - of illusion. Take control of perspective and - shadows and you can make the magic of 3D on a flat - screen 🧙 -

-

- This week is a fun chance to work on your CSS - shape-building skills, or dig into a 3D JavaScript - library like Three.js. -

-

- This week's starter template features an ice - cube emoji to help inspire a "cool" idea - for your Pen. As always, the template is just as - jumping off point. Feel free to incorporate the 🧊 - in your creation, add more elements, or freeze it - out completely and start over from scratch! -

-

- 💪 Your Challenge: - create a Pen that includes cube shapes. -

- codepen - - - - - - -
- codepen -

- CodePen PRO combines a bunch of features - that can help any front-end designer or - developer at any experience level. -

- Learn More -
-
-

- To participate: - Create a Pen → - and tag it - codepenchallenge - and - cpc-cubes. We'll be watching and gathering the Pens into a - Collection, and sharing on - Twitter - and - Instagram - (Use the #CodePenChallenge tag on Twitter and Instagram as - well). -

- - - - - - -
- - - - - - - -
-

- IDEAS! -

- - - - - - -
- 🌟 -

- This week we move from 2 - dimensions to three! Maybe you - could exercise your - perspective - in CSS to create a 3D cube. Or, - you can try out creating 3D shapes - in JavaScript, using - WebGL - or building a - Three.js scene. -

-
- - - - - - -
- 🌟 -

- There's more to cubes than - just six square sides. There are - variations on the cube that could - be fun to play with this week: - cuboid shapes - are hexahedrons with faces that - aren't always squares. And if - you want to really push the - boundaries of shape, consider the - 4 dimensional - tesseract! -

-
- - - - - - -
- 🌟 -

- Here's a mind-bending idea - that can combine the round shapes - from week one with this - week's cube theme: - Spherical Cubes - 😳 Solving longstanding - mathematical mysteries is probably - outside the scope of a CodePen - challenge, but you could use - front-end tools to explore fitting - spheres into cubes, or vice-versa. -

-
- 		-

- RESOURCES! -

- - - - - - -
- 📖 -

- Learn all about - How CSS Perspective Works - and how to build a 3D CSS cube - from scratch in Amit Sheen's - in-depth tutorial for CSS-Tricks. - Or, check out stunning examples of - WebGL cubes from Matthias Hurrle: - Just Ice - and - Posing. -

-
- - - - - - -
- 📖 -

- Want to go beyond the square cube? - Draw inspiration from - EntropyReversed's - Pulsating Tesseract, Josetxu's - Rainbow Cuboid Loader, or Ana Tudor's - Pure CSS cuboid jellyfish. -

-
- - - - - - -
- 📖 -

- Did that spherical cubes concept - pique your interest? Explore Ryan - Mulligan's - Cube Sphere, Munir Safi's - 3D Sphere to Cube Animation - With Virtual Trackball - and Ana Tudor's - Infinitely unpack prism - for more mindbending cube concepts - that test the boundaries of how - shapes interact with each other. -

-
-
-
- - - - - - -
- Go to Challenge Page -
- - - - - - -
-

- You can adjust your - email preferences - any time, or - instantly opt out - of emails of this kind. Need help with anything? - Hit up - support. -

-
-
-
- - - - diff --git a/local.html b/local.html deleted file mode 100644 index 9a32a470e6..0000000000 --- a/local.html +++ /dev/null @@ -1,583 +0,0 @@ - - - - - - - - - - - - - - - - - -
-
- #CodePenChallenge: Cubes -
-  ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ -
-
- - - - - - -
- codepen -
- - - - - - -
-

- View this Challenge on CodePen -

-

- This week: #CodePenChallenge: -

- Cubes -

-

- - - - - - -
-

- The Shape challenge continues! -

-

- Last week, we kicked things off with round shapes. - We "rounded" up the Pens from week one - in our - #CodePenChallenge: Round - collection. -

-

- This week, we move on to cubes 🧊 -

-

- Creating cubes in the browser is all about mastery - of illusion. Take control of perspective and - shadows and you can make the magic of 3D on a flat - screen 🧙 -

-

- This week is a fun chance to work on your CSS - shape-building skills, or dig into a 3D JavaScript - library like Three.js. -

-

- This week's starter template features an ice - cube emoji to help inspire a "cool" idea - for your Pen. As always, the template is just as - jumping off point. Feel free to incorporate the 🧊 - in your creation, add more elements, or freeze it - out completely and start over from scratch! -

-

- 💪 Your Challenge: - create a Pen that includes cube shapes. -

- codepen - - - - - - -
- codepen -

- CodePen PRO combines a bunch of features - that can help any front-end designer or - developer at any experience level. -

- Learn More -
-
-

- To participate: - Create a Pen → - and tag it - codepenchallenge - and - cpc-cubes. We'll be watching and gathering the Pens into a - Collection, and sharing on - Twitter - and - Instagram - (Use the #CodePenChallenge tag on Twitter and Instagram as - well). -

- - - - - - -
- - - - - - - -
-

- IDEAS! -

- - - - - - -
- 🌟 -

- This week we move from 2 - dimensions to three! Maybe you - could exercise your - perspective - in CSS to create a 3D - cube. Or, you can try out creating - 3D shapes in JavaScript, using - WebGL - or building a - Three.js scene. -

-
- - - - - - -
- 🌟 -

- There's more to cubes than - just six square sides. There are - variations on the cube that could - be fun to play with this week: - cuboid shapes - are hexahedrons with faces - that aren't always squares. - And if you want to really push the - boundaries of shape, consider the - 4 dimensional - tesseract! -

-
- - - - - - -
- 🌟 -

- Here's a mind-bending idea - that can combine the round shapes - from week one with this - week's cube theme: - Spherical Cubes - 😳 Solving longstanding - mathematical mysteries is probably - outside the scope of a CodePen - challenge, but you could use - front-end tools to explore fitting - spheres into cubes, or vice-versa. -

-
- 		-

- RESOURCES! -

- - - - - - -
- 📖 -

- Learn all about - How CSS Perspective Works - and how to build a 3D CSS - cube from scratch in Amit - Sheen's in-depth tutorial for - CSS-Tricks. Or, check out stunning - examples of WebGL cubes from - Matthias Hurrle: - Just Ice - and - Posing. -

-
- - - - - - -
- 📖 -

- Want to go beyond the square cube? - Draw inspiration from - EntropyReversed's - Pulsating Tesseract, Josetxu's - Rainbow Cuboid Loader, or Ana Tudor's - Pure CSS cuboid jellyfish. -

-
- - - - - - -
- 📖 -

- Did that spherical cubes concept - pique your interest? Explore Ryan - Mulligan's - Cube Sphere, Munir Safi's - 3D Sphere to Cube Animation - With Virtual Trackball - and Ana Tudor's - Infinitely unpack prism - for more mindbending cube - concepts that test the boundaries - of how shapes interact with each - other. -

-
-
-
- - - - - - -
- Go to Challenge Page -
- - - - - - -
-

- You can adjust your - email preferences - any time, or - instantly opt out - of emails of this kind. Need help with - anything? Hit up - support. -

-
-
-
- - - -