diff --git a/apps/demo/emails/magic-links/slack-confirm.tsx b/apps/demo/emails/magic-links/slack-confirm.tsx index a9269416ac..f2c879032b 100644 --- a/apps/demo/emails/magic-links/slack-confirm.tsx +++ b/apps/demo/emails/magic-links/slack-confirm.tsx @@ -10,8 +10,10 @@ import { Preview, Row, Section, + Tailwind, Text, } from '@react-email/components'; +import tailwindConfig from '../tailwind.config'; interface SlackConfirmEmailProps { validationCode?: string; @@ -26,121 +28,127 @@ export const SlackConfirmEmail = ({ }: SlackConfirmEmailProps) => ( - - Confirm your email address - -
- Slack -
- Confirm your email address - - Your confirmation code is below - enter it in your open browser window - and we'll help you get signed in. - + + + Confirm your email address + +
+ Slack +
+ + Confirm your email address + + + Your confirmation code is below - enter it in your open browser + window and we'll help you get signed in. + -
- {validationCode} -
+
+ + {validationCode} + +
- - If you didn't request this email, there's nothing to worry about, you - can safely ignore it. - + + If you didn't request this email, there's nothing to worry about, + you can safely ignore it. + -
- - - Slack - - - - Slack - - +
+ + Slack - - - Slack - - - -
- -
- - Our blog - -    |    - - Policies - -    |    - - Help center - -    |    - - Slack Community - - - ©2022 Slack Technologies, LLC, a Salesforce company.
- 500 Howard Street, San Francisco, CA 94105, USA
-
- All rights reserved. - -
- - + + + + Slack + + + Slack + + + Slack + + + +
+ +
+ + Our blog + +    |    + + Policies + +    |    + + Help center + +    |    + + Slack Community + + + ©2022 Slack Technologies, LLC, a Salesforce company.
+ 500 Howard Street, San Francisco, CA 94105, USA
+
+ All rights reserved. + +
+ + + ); @@ -150,76 +158,3 @@ SlackConfirmEmail.PreviewProps = { export default SlackConfirmEmail; -const footerText = { - fontSize: '12px', - color: '#b7b7b7', - lineHeight: '15px', - textAlign: 'left' as const, - marginBottom: '50px', -}; - -const footerLink = { - color: '#b7b7b7', - textDecoration: 'underline', -}; - -const footerLogos = { - marginBottom: '32px', - paddingLeft: '8px', - paddingRight: '8px', -}; - -const socialMediaIcon = { - display: 'inline', - marginLeft: '8px', -}; - -const main = { - backgroundColor: '#ffffff', - margin: '0 auto', - fontFamily: - "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif", -}; - -const container = { - margin: '0 auto', - padding: '0px 20px', -}; - -const logoContainer = { - marginTop: '32px', -}; - -const h1 = { - color: '#1d1c1d', - fontSize: '36px', - fontWeight: '700', - margin: '30px 0', - padding: '0', - lineHeight: '42px', -}; - -const heroText = { - fontSize: '20px', - lineHeight: '28px', - marginBottom: '30px', -}; - -const codeBox = { - background: 'rgb(245, 244, 245)', - borderRadius: '4px', - marginBottom: '30px', - padding: '40px 10px', -}; - -const confirmationCodeText = { - fontSize: '30px', - textAlign: 'center' as const, - verticalAlign: 'middle', -}; - -const text = { - color: '#000', - fontSize: '14px', - lineHeight: '24px', -}; diff --git a/apps/demo/emails/tailwind.config.ts b/apps/demo/emails/tailwind.config.ts new file mode 100644 index 0000000000..e15b6b5bcc --- /dev/null +++ b/apps/demo/emails/tailwind.config.ts @@ -0,0 +1,11 @@ +import { pixelBasedPreset, type TailwindConfig } from '@react-email/components'; + +export default { + presets: [pixelBasedPreset], + theme: { + fontFamily: { + slack: + "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif", + }, + }, +} satisfies TailwindConfig; diff --git a/apps/demo/package.json b/apps/demo/package.json index 79ff536b09..c5e35d446c 100644 --- a/apps/demo/package.json +++ b/apps/demo/package.json @@ -9,15 +9,15 @@ "export": "email-dev export" }, "dependencies": { - "@react-email/components": "workspace:*", + "@react-email/components": "npm:@react-email/components@1.0.0-tailwindv4.5", + "email-dev": "workspace:*", "react": "^19", - "react-dom": "^19", - "email-dev": "workspace:*" + "react-dom": "^19" }, "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" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b93c205785..bec52fc050 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: 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 @@ -3512,6 +3512,100 @@ packages: '@radix-ui/rect@1.1.1': resolution: {integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==} + '@react-email/body@0.1.1-tailwindv4.0': + resolution: {integrity: sha512-9yWjQmQw6/XLeus6vnr4rB09hVlJUW0+MwCT8aqngfIfDNcxF0muzmGG4wyUwhtFtoxnECEaivVhjvuJDCEnuw==} + peerDependencies: + react: ^19.0.0 + + '@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.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.6-tailwindv4.0': + resolution: {integrity: sha512-2cZ1tzmVfKe4O3Xom/yEgBfNGrGS763xDLnhCter8R2GYUNBUEjJjAz/pXLiFjpqvSWPPH3elwowqURIB3orjQ==} + 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.5': + resolution: {integrity: sha512-q12JqHQk0r1ET4g5TS9pETKz38NrNCzdQlUp4rilpdfO8D5Ivjd5ly6ft7jRN+op7H+bmBl+bDkSJq8qfncmzQ==} + engines: {node: '>=18.0.0'} + peerDependencies: + react: ^19.0.0 + + '@react-email/container@0.0.16-tailwindv4.0': + resolution: {integrity: sha512-RUgvF17EDOgjxwvPejNRf3j9w4PplHfBecRa/5vpL3QdTWrETIBIXDJCprStTNkjo81y+sD49iDwDcKuohMjWw==} + 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.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.12-tailwindv4.0': + resolution: {integrity: sha512-N4cmqCuNt/35WjwiTsAl2YjMn/0JEF5BIkgdW5NbT3bypJq9uD6IuDrZuoQdhQF/U6nXKoAnDDM0olOJI5Fvfg==} + 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.12-tailwindv4.0': + resolution: {integrity: sha512-fyux6rY919CvYyQ3naIwIFEFwWsLVhwOdUDOrVkpjypB/5f4E39niM74xaMr/u1CNcWsxINwxlryp44tjAHGhw==} + engines: {node: '>=18.0.0'} + peerDependencies: + react: ^19.0.0 + + '@react-email/link@0.0.13-tailwindv4.0': + resolution: {integrity: sha512-undFRiSltzPPdMmk/9OhAitDMqPxASiKo3ee9MSPUHyMz8VsaJmy8TPgOH/j6D30TObfcmH0fCQTrWH28qqbJw==} + 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.14-tailwindv4.0': + resolution: {integrity: sha512-20IIqdGeSGGWAy0hKvAS2XoQX1muE1K8wLYVyJBFNpX/ghuKUeSDno72Xb8egUFHGlDVwM5q735j7bXpH1/bgg==} + 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.2': + resolution: {integrity: sha512-oq8/BD/I/YspeuBjjdLJG6xaf9tsPYk+VWu8/mX9xWbRN0t0ExKSVm9sEBL6RsCpndQA2jbY2VgPEreIrzUgqw==} + 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.3': + resolution: {integrity: sha512-uuTYJY+UZdq6mtq/wh2CANjsYv79DpcgVLFg5yBlME0DNHO+nQ5IHVNckVvWlvs2maS6IP8sUYWxuFgYqUvf6w==} + engines: {node: '>=18.0.0'} + peerDependencies: + react: ^19.0.0 + + '@react-email/text@0.1.6-tailwindv4.0': + resolution: {integrity: sha512-IVoq2zqCzokjbeEtpFw0VgfL2z7O2K+BTG8nWMZKofUf8UX66X3JwdOGRw/K6U3XS6IahE9gy3yycX7rqn3gKw==} + 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.1-tailwindv4.0(react@19.0.0)': + dependencies: + 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.1-tailwindv4.0(react@19.0.0)': + dependencies: + prismjs: 1.30.0 + react: 19.0.0 + + '@react-email/code-inline@0.0.6-tailwindv4.0(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.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) + '@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.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.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.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.14-tailwindv4.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.3(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.16-tailwindv4.0(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.16-tailwindv4.0(react@19.0.0)': + dependencies: + react: 19.0.0 + + '@react-email/hr@0.0.12-tailwindv4.0(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.12-tailwindv4.0(react@19.0.0)': + dependencies: + react: 19.0.0 + + '@react-email/link@0.0.13-tailwindv4.0(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.14-tailwindv4.0(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.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 + 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.3(react@19.0.0)': + dependencies: + react: 19.0.0 + tailwindcss: 4.1.12 + + '@react-email/text@0.1.6-tailwindv4.0(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: