From 9b4f409ecb2cfa2fe9be9115cd267015d8645591 Mon Sep 17 00:00:00 2001 From: Bu Kinoshita Date: Mon, 29 Sep 2025 19:38:31 +0000 Subject: [PATCH 1/4] refactor(demo): airbnb with tailwind --- apps/demo/emails/reviews/airbnb-review.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/demo/emails/reviews/airbnb-review.tsx b/apps/demo/emails/reviews/airbnb-review.tsx index 52381120bd..213dbfe8c5 100644 --- a/apps/demo/emails/reviews/airbnb-review.tsx +++ b/apps/demo/emails/reviews/airbnb-review.tsx @@ -12,6 +12,7 @@ import { Section, Text, } from '@react-email/components'; +import { Tailwind } from '@react-email/tailwind'; interface AirbnbReviewEmailProps { authorName?: string; From 3ac4e177f95f7b766512508d182cfeaafb74d6d1 Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Fri, 3 Oct 2025 09:32:34 -0300 Subject: [PATCH 2/4] use tailwind --- apps/demo/emails/reviews/airbnb-review.tsx | 248 +++++++++------------ apps/demo/emails/tailwind.config.ts | 11 + 2 files changed, 111 insertions(+), 148 deletions(-) diff --git a/apps/demo/emails/reviews/airbnb-review.tsx b/apps/demo/emails/reviews/airbnb-review.tsx index 213dbfe8c5..960272204b 100644 --- a/apps/demo/emails/reviews/airbnb-review.tsx +++ b/apps/demo/emails/reviews/airbnb-review.tsx @@ -10,9 +10,10 @@ import { Preview, Row, Section, + Tailwind, Text, } from '@react-email/components'; -import { Tailwind } from '@react-email/tailwind'; +import tailwindConfig from '../tailwind.config'; interface AirbnbReviewEmailProps { authorName?: string; @@ -35,78 +36,100 @@ export const AirbnbReviewEmail = ({ - - {previewText} - -
- Airbnb -
-
- {authorName} -
-
- - Here's what {authorName} wrote - {reviewText} - - Now that the review period is over, we’ve posted {authorName} - ’s review to your Airbnb profile. - - - While it’s too late to write a review of your own, you can send - your feedback to {authorName} using your Airbnb message thread. - - - - -
- -
- -
- - - Common questions - - - - How do reviews work? - - - - - How do star ratings work? + + + {previewText} + +
+ Airbnb +
+
+ {authorName} +
+
+ + + Here's what {authorName} wrote + + + {reviewText} + + + Now that the review period is over, we've posted {authorName} + 's review to your Airbnb profile. + + + While it's too late to write a review of your own, you can + send your feedback to {authorName} using your Airbnb message + thread. + + + + +
+ +
+ +
+ + + Common questions + + + + How do reviews work? + + + + + How do star ratings work? + + + + + Can I leave a review after 14 days? + + +
+ + Airbnb, Inc., 888 Brannan St, San Francisco, CA 94103 + + + Report unsafe behavior - - - - Can I leave a review after 14 days? - - -
- - Airbnb, Inc., 888 Brannan St, San Francisco, CA 94103 - - - Report unsafe behavior - - -
- - + +
+ + + ); }; @@ -114,83 +137,12 @@ export const AirbnbReviewEmail = ({ AirbnbReviewEmail.PreviewProps = { authorName: 'Alex', authorImage: `${baseUrl}/static/airbnb-review-user.jpg`, - reviewText: `“Alan was a great guest! Easy communication, the apartment was left + reviewText: `"Alan was a great guest! Easy communication, the apartment was left in great condition, very polite, and respectful of all house rules. - He’s welcome back anytime and would easily recommend him to any - host!”`, + He's welcome back anytime and would easily recommend him to any + host!"`, } as AirbnbReviewEmailProps; -export default AirbnbReviewEmail; - -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', - width: '580px', - maxWidth: '100%', -}; - -const userImage = { - margin: '0 auto', - marginBottom: '16px', - borderRadius: '50%', -}; - -const heading = { - fontSize: '32px', - lineHeight: '1.3', - fontWeight: '700', - color: '#484848', -}; - -const paragraph = { - fontSize: '18px', - lineHeight: '1.4', - color: '#484848', -}; - -const review = { - ...paragraph, - padding: '24px', - backgroundColor: '#f2f3f3', - borderRadius: '4px', -}; - -const button = { - backgroundColor: '#ff5a5f', - borderRadius: '3px', - color: '#fff', - fontSize: '18px', - padding: '19px 30px', - textDecoration: 'none', - textAlign: 'center' as const, - display: 'block', -}; - -const link = { - ...paragraph, - color: '#ff5a5f', - display: 'block', -}; - -const reportLink = { - fontSize: '14px', - color: '#9ca299', - textDecoration: 'underline', -}; +AirbnbReviewEmail.tailwindConfig = tailwindConfig; -const hr = { - borderColor: '#cccccc', - margin: '20px 0', -}; - -const footer = { - color: '#9ca299', - fontSize: '14px', - marginBottom: '10px', -}; +export default AirbnbReviewEmail; diff --git a/apps/demo/emails/tailwind.config.ts b/apps/demo/emails/tailwind.config.ts index 1346685079..3dff050f1f 100644 --- a/apps/demo/emails/tailwind.config.ts +++ b/apps/demo/emails/tailwind.config.ts @@ -19,6 +19,17 @@ export default { notion: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif", aws: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif", + airbnb: [ + '-apple-system', + 'BlinkMacSystemFont', + 'Segoe UI', + 'Roboto', + 'Oxygen-Sans', + 'Ubuntu', + 'Cantarell', + 'Helvetica Neue', + 'sans-serif', + ], }, }, } satisfies TailwindConfig; From a97d106aace23662b5e1d99ca116d93e0785a1e6 Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Tue, 7 Oct 2025 17:16:39 -0300 Subject: [PATCH 3/4] fix minor differences --- apps/demo/emails/reviews/airbnb-review.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/demo/emails/reviews/airbnb-review.tsx b/apps/demo/emails/reviews/airbnb-review.tsx index 960272204b..7b91de63e8 100644 --- a/apps/demo/emails/reviews/airbnb-review.tsx +++ b/apps/demo/emails/reviews/airbnb-review.tsx @@ -76,7 +76,7 @@ export const AirbnbReviewEmail = ({