Skip to content

feat(demo): use Tailwind v4 in stack-overflow-tips.tsx #2494

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 22 commits into from
Oct 10, 2025
+134 −227
Merged

feat(demo): use Tailwind v4 in stack-overflow-tips.tsx #2494

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
0604b50
chore(demo): tailwind basic setup
bukinoshita Sep 29, 2025
1a7f9df
fix: minor tweak
bukinoshita Sep 30, 2025
f90893b
fix: minor tweak
bukinoshita Sep 30, 2025
3fa21e5
fix errors
gabrielmfern Oct 1, 2025
5f653b4
add tailwind config
gabrielmfern Oct 1, 2025
bd30439
use the new testing version
gabrielmfern Oct 1, 2025
22ea3f7
update lock
gabrielmfern Oct 1, 2025
9bafcd9
use pixelBasedPreset on tailwind config
gabrielmfern Oct 1, 2025
0ce7170
update components
gabrielmfern Oct 1, 2025
4060a59
sort
gabrielmfern Oct 1, 2025
e0847b7
sort
gabrielmfern Oct 1, 2025
044e56a
update to next preview
gabrielmfern Oct 3, 2025
a8ebdfd
update components
gabrielmfern Oct 7, 2025
4aa08f5
update lock
gabrielmfern Oct 7, 2025
6c63cce
feat(demo): use Tailwind v4 in amazon-review.tsx (#2502)
bukinoshita Oct 10, 2025
581eb9c
refactor(demo): stackoverflow with tailwind
bukinoshita Sep 29, 2025
2eac33a
convert stack overflow email to tailwind v4
gabrielmfern Oct 2, 2025
d0a3e03
fix pixel differences
gabrielmfern Oct 7, 2025
4c89d75
fix fonts
gabrielmfern Oct 10, 2025
db89406
fix pixel differences
gabrielmfern Oct 10, 2025
57fa5b4
fix some small details
gabrielmfern Oct 10, 2025
91ec889
Merge branch 'chore/basic-setup' into refactor/stack-overflow-with-ta…
gabrielmfern Oct 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
359 changes: 132 additions & 227 deletions apps/demo/emails/newsletters/stack-overflow-tips.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,10 @@ import {
Preview,
Row,
Section,
Tailwind,
Text,
} from '@react-email/components';
import tailwindConfig from '../tailwind.config';

interface StackOverflowTipsEmailProps {
tips?: { id: number; description: string }[];
Expand Down Expand Up @@ -47,107 +49,143 @@ export const StackOverflowTipsEmail = ({
}: StackOverflowTipsEmailProps) => (
<Html>
<Head />
<Body style={main}>
<Preview>Stack overflow tips for searching</Preview>
<Container style={container}>
<Section style={logo}>
<Img width={146} src={`${baseUrl}/static/stack-overflow-logo.png`} />
</Section>

<Section style={header}>
<Row>
<Column style={headerContent}>
<Heading style={headerContentTitle}>
Find what you want, faster
</Heading>
<Text style={headerContentSubtitle}>
Tips and tricks for searching on Stack Overflow
</Text>
</Column>
<Column style={headerImageContainer}>
<Img
style={headerImage}
width={340}
src={`${baseUrl}/static/stack-overflow-header.png`}
/>
</Column>
</Row>
</Section>
<Tailwind config={tailwindConfig}>
<Body className="bg-[#f3f3f5] font-stack-overflow">
<Preview>Stack overflow tips for searching</Preview>
<Container className="w-[680px] max-w-full mx-auto bg-white">
<Section className="flex bg-[#f3f3f5] p-5 px-[30px]">
<Img
width={146}
src={`${baseUrl}/static/stack-overflow-logo.png`}
/>
</Section>

<Section style={content}>
<Heading as="h2" style={title}>
Searching for solutions
</Heading>
<Text style={paragraph}>
With more than 18 million questions, it's possible that someone has
already provided a solution to the problem you're facing.{' '}
</Text>
<Section className="rounded-t-md flex flex-col bg-[#2b2d6e]">
<Row>
<Column className="py-5 px-[30px] pb-[15px]">
<Heading className="text-white text-[27px] leading-[27px] font-bold">
Find what you want, faster
</Heading>
<Text className="text-white text-[17px] leading-[24px]">
Tips and tricks for searching on Stack Overflow
</Text>
</Column>
<Column className="py-[30px] px-[10px]">
<Img
className="max-w-full"
width={340}
src={`${baseUrl}/static/stack-overflow-header.png`}
/>
</Column>
</Row>
</Section>

<Hr style={divider} />
<Section className="pt-[30px] px-[30px] pb-10">
<Heading
as="h2"
className="mb-[15px] mt-0 font-bold text-[21px] leading-none text-[#0c0d0e]"
>
Searching for solutions
</Heading>
<Text className="text-[15px] leading-[21px] text-[#3c3f44]">
With more than 18 million questions, it's possible that someone
has already provided a solution to the problem you're facing.{' '}
</Text>

<Hr className="my-[30px]" />

<Heading
as="h2"
className="mb-[15px] font-bold text-[21px] leading-none text-[#0c0d0e]"
>
Use the search bar at the top of the page to find what you need
</Heading>
<Text className="text-[15px] leading-[21px] text-[#3c3f44]">
Here are a few simple search tips to get you started:
</Text>
<ul>
{tips.map((tip) => (
<li key={tip.id}>
<Text className="text-[15px] leading-[21px] text-[#3c3f44]">
{tip.description}
</Text>
</li>
))}
</ul>

<Text className="text-[15px] leading-[21px] text-[#3c3f44]">
The more information you can put in the search bar, the more
likely you will be to either find the answer you need or feel
confident that no one else has asked the question before.
</Text>

<Hr className="my-[30px]" />

<Heading
as="h2"
className="mb-4 font-bold text-[21px] leading-none text-[#0c0d0e]"
>
Take a break and read about the worst coder in the world
</Heading>

<Section className="mt-6 block">
<Link
className="bg-[#0095ff] border border-solid border-[#0077cc] text-[17px] leading-[17px] py-[13px] px-[17px] rounded max-w-[120px] text-white"
href="https://stackoverflow.blog/2019/10/22/"
>
I need a break
</Link>
</Section>
</Section>
</Container>

<Heading as="h2" style={title}>
Use the search bar at the top of the page to find what you need
</Heading>
<Text style={paragraph}>
Here are a few simple search tips to get you started:
<Section className="w-[680px] max-w-full mt-8 mx-auto py-0 px-[30px]">
<Text className="text-xs leading-[15px] text-[#9199a1] m-0">
You're receiving this email because your Stack Overflow activity
triggered this tip or reminder.
</Text>
<ul>
{tips.map((tip) => (
<li key={tip.id}>
<Text style={paragraph}>{tip.description}</Text>
</li>
))}
</ul>

<Text style={paragraph}>
The more information you can put in the search bar, the more likely
you will be to either find the answer you need or feel confident
that no one else has asked the question before.
<Link
href="/"
className="inline-block text-[#9199a1] underline text-[12px] mr-[10px] mb-0 mt-2"
>
Unsubscribe from emails like this{' '}
</Link>
<Link
href="/"
className="inline-block text-[#9199a1] underline text-[12px] mr-[10px] mb-0 mt-2"
>
Edit email settings{' '}
</Link>
<Link
href="/"
className="inline-block text-[#9199a1] underline text-[12px] mr-[10px] mb-0 mt-2"
>
Contact us
</Link>
<Link
href="/"
className="inline-block text-[#9199a1] underline text-[12px] mr-[10px] mb-0 mt-2"
>
Privacy
</Link>

<Hr className="my-[30px] border-[#d6d8db]" />

<Img
width={111}
src={`${baseUrl}/static/stack-overflow-logo-sm.png`}
/>
<Text className="my-1 text-[12px] leading-[15px] text-[#9199a1]">
<strong>Stack Overflow</strong>, 110 William Street, 28th Floor, New
York, NY 10038
</Text>
<Text className="rounded-[1px] border border-solid border-[#d6d9dc] pt-1 pb-[3px] px-[6px] text-[11px] leading-none font-stack-overflow-mono text-[#e06c77] max-w-min m-0 mb-8">
{'<3'}
</Text>

<Hr style={divider} />

<Heading as="h2" style={title}>
Take a break and read about the worst coder in the world
</Heading>

<Section style={buttonContainer}>
<Link style={button} href="https://stackoverflow.blog/2019/10/22/">
I need a break
</Link>
</Section>
</Section>
</Container>

<Section style={footer}>
<Text style={footerText}>
You're receiving this email because your Stack Overflow activity
triggered this tip or reminder.
</Text>

<Link href="/" style={footerLink}>
Unsubscribe from emails like this{' '}
</Link>
<Link href="/" style={footerLink}>
Edit email settings{' '}
</Link>
<Link href="/" style={footerLink}>
Contact us
</Link>
<Link href="/" style={footerLink}>
Privacy
</Link>

<Hr style={footerDivider} />

<Img width={111} src={`${baseUrl}/static/stack-overflow-logo-sm.png`} />
<Text style={footerAddress}>
<strong>Stack Overflow</strong>, 110 William Street, 28th Floor, New
York, NY 10038
</Text>
<Text style={footerHeart}>{'<3'}</Text>
</Section>
</Body>
</Body>
</Tailwind>
</Html>
);

Expand All @@ -156,136 +194,3 @@ StackOverflowTipsEmail.PreviewProps = {
} as StackOverflowTipsEmailProps;

export default StackOverflowTipsEmail;

const main = {
backgroundColor: '#f3f3f5',
fontFamily: 'HelveticaNeue,Helvetica,Arial,sans-serif',
};

const headerContent = { padding: '20px 30px 15px' };

const headerContentTitle = {
color: '#fff',
fontSize: '27px',
fontWeight: 'bold',
lineHeight: '27px',
};

const headerContentSubtitle = {
color: '#fff',
fontSize: '17px',
};

const headerImageContainer = {
padding: '30px 10px',
};

const headerImage = {
maxWidth: '100%',
};

const title = {
margin: '0 0 15px',
fontWeight: 'bold',
fontSize: '21px',
lineHeight: '21px',
color: '#0c0d0e',
};

const paragraph = {
fontSize: '15px',
lineHeight: '21px',
color: '#3c3f44',
};

const divider = {
margin: '30px 0',
};

const container = {
width: '680px',
maxWidth: '100%',
margin: '0 auto',
backgroundColor: '#ffffff',
};

const footer = {
width: '680px',
maxWidth: '100%',
margin: '32px auto 0 auto',
padding: '0 30px',
};

const content = {
padding: '30px 30px 40px 30px',
};

const logo = {
display: 'flex',
background: '#f3f3f5',
padding: '20px 30px',
};

const header = {
borderRadius: '5px 5px 0 0',
display: 'flex',
flexDireciont: 'column',
backgroundColor: '#2b2d6e',
};

const buttonContainer = {
marginTop: '24px',
display: 'block',
};

const button = {
backgroundColor: '#0095ff',
border: '1px solid #0077cc',
fontSize: '17px',
lineHeight: '17px',
padding: '13px 17px',
borderRadius: '4px',
maxWidth: '120px',
color: '#fff',
};

const footerDivider = {
...divider,
borderColor: '#d6d8db',
};

const footerText = {
fontSize: '12px',
lineHeight: '15px',
color: '#9199a1',
margin: '0',
};

const footerLink = {
display: 'inline-block',
color: '#9199a1',
textDecoration: 'underline',
fontSize: '12px',
marginRight: '10px',
marginBottom: '0',
marginTop: '8px',
};

const footerAddress = {
margin: '4px 0',
fontSize: '12px',
lineHeight: '15px',
color: '#9199a1',
};

const footerHeart = {
borderRadius: '1px',
border: '1px solid #d6d9dc',
padding: '4px 6px 3px 6px',
fontSize: '11px',
lineHeight: '11px',
fontFamily: 'Consolas,monospace',
color: '#e06c77',
maxWidth: 'min-content',
margin: '0 0 32px 0',
};
2 changes: 2 additions & 0 deletions apps/demo/emails/tailwind.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ export default {
theme: {
fontFamily: {
amazon: ['Ember', 'Helvetica', 'Arial', 'sans-serif'],
'stack-overflow': ['Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'],
'stack-overflow-mono': 'Consolas,monospace',
github:
'-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"',
yelp: [
Expand Down
Loading