Skip to content

Commit c62c1ea

Browse files
gabrielmferngabrielmfern
committed
use tailwind
1 parent e30c236 commit c62c1ea

File tree

2 files changed

+56
-78
lines changed

2 files changed

+56
-78
lines changed

‎apps/demo/emails/tailwind.config.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,19 @@ import { pixelBasedPreset, type TailwindConfig } from '@react-email/components';
22

33
export default {
44
presets: [pixelBasedPreset],
5+
theme: {
6+
fontFamily: {
7+
koala: [
8+
'-apple-system',
9+
'BlinkMacSystemFont',
10+
'Segoe UI',
11+
'Roboto',
12+
'Oxygen-Sans',
13+
'Ubuntu',
14+
'Cantarell',
15+
'Helvetica Neue',
16+
'sans-serif',
17+
],
18+
},
19+
},
520
} satisfies TailwindConfig;

‎apps/demo/emails/welcome/koala-welcome.tsx‎

Lines changed: 41 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,10 @@ import {
88
Img,
99
Preview,
1010
Section,
11+
Tailwind,
1112
Text,
1213
} from '@react-email/components';
14+
import tailwindConfig from '../tailwind.config';
1315

1416
interface KoalaWelcomeEmailProps {
1517
userFirstname: string;
@@ -24,39 +26,45 @@ export const KoalaWelcomeEmail = ({
2426
}: KoalaWelcomeEmailProps) => (
2527
<Html>
2628
<Head />
27-
<Body style={main}>
28-
<Preview>
29-
The sales intelligence platform that helps you uncover qualified leads.
30-
</Preview>
31-
<Container style={container}>
32-
<Img
33-
src={`${baseUrl}/static/koala-logo.png`}
34-
width="170"
35-
height="50"
36-
alt="Koala"
37-
style={logo}
38-
/>
39-
<Text style={paragraph}>Hi {userFirstname},</Text>
40-
<Text style={paragraph}>
41-
Welcome to Koala, the sales intelligence platform that helps you
42-
uncover qualified leads and close deals faster.
43-
</Text>
44-
<Section style={btnContainer}>
45-
<Button style={button} href="https://getkoala.com">
46-
Get started
47-
</Button>
48-
</Section>
49-
<Text style={paragraph}>
50-
Best,
51-
<br />
52-
The Koala team
53-
</Text>
54-
<Hr style={hr} />
55-
<Text style={footer}>
56-
470 Noor Ave STE B #1148, South San Francisco, CA 94080
57-
</Text>
58-
</Container>
59-
</Body>
29+
<Tailwind config={tailwindConfig}>
30+
<Body className="bg-white font-koala">
31+
<Preview>
32+
The sales intelligence platform that helps you uncover qualified
33+
leads.
34+
</Preview>
35+
<Container className="mx-auto py-5 pb-12">
36+
<Img
37+
src={`${baseUrl}/static/koala-logo.png`}
38+
width="170"
39+
height="50"
40+
alt="Koala"
41+
className="mx-auto"
42+
/>
43+
<Text className="text-base leading-7">Hi {userFirstname},</Text>
44+
<Text className="text-base leading-7">
45+
Welcome to Koala, the sales intelligence platform that helps you
46+
uncover qualified leads and close deals faster.
47+
</Text>
48+
<Section className="text-center">
49+
<Button
50+
className="bg-[#5F51E8] rounded text-white text-base no-underline text-center block p-3"
51+
href="https://getkoala.com"
52+
>
53+
Get started
54+
</Button>
55+
</Section>
56+
<Text className="text-base leading-7">
57+
Best,
58+
<br />
59+
The Koala team
60+
</Text>
61+
<Hr className="border-[#cccccc] my-5" />
62+
<Text className="text-[#8898aa] text-xs">
63+
470 Noor Ave STE B #1148, South San Francisco, CA 94080
64+
</Text>
65+
</Container>
66+
</Body>
67+
</Tailwind>
6068
</Html>
6169
);
6270

@@ -65,48 +73,3 @@ KoalaWelcomeEmail.PreviewProps = {
6573
} as KoalaWelcomeEmailProps;
6674

6775
export default KoalaWelcomeEmail;
68-
69-
const main = {
70-
backgroundColor: '#ffffff',
71-
fontFamily:
72-
'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
73-
};
74-
75-
const container = {
76-
margin: '0 auto',
77-
padding: '20px 0 48px',
78-
};
79-
80-
const logo = {
81-
margin: '0 auto',
82-
};
83-
84-
const paragraph = {
85-
fontSize: '16px',
86-
lineHeight: '26px',
87-
};
88-
89-
const btnContainer = {
90-
textAlign: 'center' as const,
91-
};
92-
93-
const button = {
94-
backgroundColor: '#5F51E8',
95-
borderRadius: '3px',
96-
color: '#fff',
97-
fontSize: '16px',
98-
textDecoration: 'none',
99-
textAlign: 'center' as const,
100-
display: 'block',
101-
padding: '12px',
102-
};
103-
104-
const hr = {
105-
borderColor: '#cccccc',
106-
margin: '20px 0',
107-
};
108-
109-
const footer = {
110-
color: '#8898aa',
111-
fontSize: '12px',
112-
};

0 commit comments

Comments
 (0)