Skip to content

feat(demo): use Tailwind v4 in koala-welcome.tsx #2530

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 20 commits into from
Oct 10, 2025
+56 −1,244
Merged

feat(demo): use Tailwind v4 in koala-welcome.tsx #2530

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 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
aca371f
use tailwind
gabrielmfern Oct 3, 2025
fe81830
fix minor differences
gabrielmfern Oct 7, 2025
62bc138
lint
gabrielmfern Oct 10, 2025
70a28a7
Merge branch 'chore/basic-setup' into feature/oss-246-koala-welcometsx
gabrielmfern Oct 10, 2025
84f8830
remove testing files
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
15 changes: 13 additions & 2 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,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',
],
raycast:
'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
slack:
Expand Down Expand Up @@ -53,12 +64,12 @@ export default {
airbnb: [
'-apple-system',
'BlinkMacSystemFont',
'Segoe UI',
'"Segoe UI"',
'Roboto',
'Oxygen-Sans',
'Ubuntu',
'Cantarell',
'Helvetica Neue',
'"Helvetica Neue"',
'sans-serif',
],
apple: ['"Helvetica Neue"', 'Helvetica', 'Arial', 'sans-serif'],
Expand Down
121 changes: 43 additions & 78 deletions apps/demo/emails/welcome/koala-welcome.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,10 @@ import {
Img,
Preview,
Section,
Tailwind,
Text,
} from '@react-email/components';
import tailwindConfig from '../tailwind.config';

interface KoalaWelcomeEmailProps {
userFirstname: string;
Expand All @@ -24,39 +26,47 @@ export const KoalaWelcomeEmail = ({
}: KoalaWelcomeEmailProps) => (
<Html>
<Head />
<Body style={main}>
<Preview>
The sales intelligence platform that helps you uncover qualified leads.
</Preview>
<Container style={container}>
<Img
src={`${baseUrl}/static/koala-logo.png`}
width="170"
height="50"
alt="Koala"
style={logo}
/>
<Text style={paragraph}>Hi {userFirstname},</Text>
<Text style={paragraph}>
Welcome to Koala, the sales intelligence platform that helps you
uncover qualified leads and close deals faster.
</Text>
<Section style={btnContainer}>
<Button style={button} href="https://getkoala.com">
Get started
</Button>
</Section>
<Text style={paragraph}>
Best,
<br />
The Koala team
</Text>
<Hr style={hr} />
<Text style={footer}>
470 Noor Ave STE B #1148, South San Francisco, CA 94080
</Text>
</Container>
</Body>
<Tailwind config={tailwindConfig}>
<Body className="bg-white font-koala">
<Preview>
The sales intelligence platform that helps you uncover qualified
leads.
</Preview>
<Container className="mx-auto py-5 pb-12">
<Img
src={`${baseUrl}/static/koala-logo.png`}
width="170"
height="50"
alt="Koala"
className="mx-auto"
/>
<Text className="text-[16px] leading-[26px]">
Hi {userFirstname},
</Text>
<Text className="text-[16px] leading-[26px]">
Welcome to Koala, the sales intelligence platform that helps you
uncover qualified leads and close deals faster.
</Text>
<Section className="text-center">
<Button
className="bg-[#5F51E8] rounded-[3px] text-white text-[16px] no-underline text-center block p-3"
href="https://getkoala.com"
>
Get started
</Button>
</Section>
<Text className="text-[16px] leading-[26px]">
Best,
<br />
The Koala team
</Text>
<Hr className="border-[#cccccc] my-5" />
<Text className="text-[#8898aa] text-[12px]">
470 Noor Ave STE B #1148, South San Francisco, CA 94080
</Text>
</Container>
</Body>
</Tailwind>
</Html>
);

Expand All @@ -65,48 +75,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',
};
Loading
Loading