Skip to content

Commit d4ae665

Browse files
gabrielmferngabrielmfern
committed
use tailwind
1 parent c882e62 commit d4ae665

File tree

3 files changed

+61
-71
lines changed

3 files changed

+61
-71
lines changed

‎apps/demo/emails/index.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@import "tailwindcss";

‎apps/demo/emails/reset-password/dropbox-reset-password.tsx‎

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

1516
interface DropboxResetPasswordEmailProps {
1617
userFirstname?: string;
@@ -28,39 +29,48 @@ export const DropboxResetPasswordEmail = ({
2829
return (
2930
<Html>
3031
<Head />
31-
<Body style={main}>
32-
<Preview>Dropbox reset your password</Preview>
33-
<Container style={container}>
34-
<Img
35-
src={`${baseUrl}/static/dropbox-logo.png`}
36-
width="40"
37-
height="33"
38-
alt="Dropbox"
39-
/>
40-
<Section>
41-
<Text style={text}>Hi {userFirstname},</Text>
42-
<Text style={text}>
43-
Someone recently requested a password change for your Dropbox
44-
account. If this was you, you can set a new password here:
45-
</Text>
46-
<Button style={button} href={resetPasswordLink}>
47-
Reset password
48-
</Button>
49-
<Text style={text}>
50-
If you don&apos;t want to change your password or didn&apos;t
51-
request this, just ignore and delete this message.
52-
</Text>
53-
<Text style={text}>
54-
To keep your account secure, please don&apos;t forward this email
55-
to anyone. See our Help Center for{' '}
56-
<Link style={anchor} href={resetPasswordLink}>
57-
more security tips.
58-
</Link>
59-
</Text>
60-
<Text style={text}>Happy Dropboxing!</Text>
61-
</Section>
62-
</Container>
63-
</Body>
32+
<Tailwind config={tailwindConfig}>
33+
<Body className="bg-[#f6f9fc] py-2.5">
34+
<Preview>Dropbox reset your password</Preview>
35+
<Container className="bg-white border border-[#f0f0f0] p-11">
36+
<Img
37+
src={`${baseUrl}/static/dropbox-logo.png`}
38+
width="40"
39+
height="33"
40+
alt="Dropbox"
41+
/>
42+
<Section>
43+
<Text className="text-base font-dropbox font-light text-[#404040] leading-[26px]">
44+
Hi {userFirstname},
45+
</Text>
46+
<Text className="text-base font-dropbox font-light text-[#404040] leading-[26px]">
47+
Someone recently requested a password change for your Dropbox
48+
account. If this was you, you can set a new password here:
49+
</Text>
50+
<Button
51+
className="bg-[#007ee6] rounded text-white font-dropbox text-[15px] no-underline text-center block w-[210px] py-3.5 px-2"
52+
href={resetPasswordLink}
53+
>
54+
Reset password
55+
</Button>
56+
<Text className="text-base font-dropbox font-light text-[#404040] leading-[26px]">
57+
If you don&apos;t want to change your password or didn&apos;t
58+
request this, just ignore and delete this message.
59+
</Text>
60+
<Text className="text-base font-dropbox font-light text-[#404040] leading-[26px]">
61+
To keep your account secure, please don&apos;t forward this
62+
email to anyone. See our Help Center for{' '}
63+
<Link className="underline" href={resetPasswordLink}>
64+
more security tips.
65+
</Link>
66+
</Text>
67+
<Text className="text-base font-dropbox font-light text-[#404040] leading-[26px]">
68+
Happy Dropboxing!
69+
</Text>
70+
</Section>
71+
</Container>
72+
</Body>
73+
</Tailwind>
6474
</Html>
6575
);
6676
};
@@ -70,41 +80,6 @@ DropboxResetPasswordEmail.PreviewProps = {
7080
resetPasswordLink: 'https://www.dropbox.com',
7181
} as DropboxResetPasswordEmailProps;
7282

73-
export default DropboxResetPasswordEmail;
74-
75-
const main = {
76-
backgroundColor: '#f6f9fc',
77-
padding: '10px 0',
78-
};
83+
DropboxResetPasswordEmail.tailwindConfig = tailwindConfig;
7984

80-
const container = {
81-
backgroundColor: '#ffffff',
82-
border: '1px solid #f0f0f0',
83-
padding: '45px',
84-
};
85-
86-
const text = {
87-
fontSize: '16px',
88-
fontFamily:
89-
"'Open Sans', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif",
90-
fontWeight: '300',
91-
color: '#404040',
92-
lineHeight: '26px',
93-
};
94-
95-
const button = {
96-
backgroundColor: '#007ee6',
97-
borderRadius: '4px',
98-
color: '#fff',
99-
fontFamily: "'Open Sans', 'Helvetica Neue', Arial",
100-
fontSize: '15px',
101-
textDecoration: 'none',
102-
textAlign: 'center' as const,
103-
display: 'block',
104-
width: '210px',
105-
padding: '14px 7px',
106-
};
107-
108-
const anchor = {
109-
textDecoration: 'underline',
110-
};
85+
export default DropboxResetPasswordEmail;

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

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

33
export default {
44
presets: [pixelBasedPreset],
5+
theme: {
6+
fontFamily: {
7+
dropbox: [
8+
'Open Sans',
9+
'HelveticaNeue-Light',
10+
'Helvetica Neue Light',
11+
'Helvetica Neue',
12+
'Helvetica',
13+
'Arial',
14+
'Lucida Grande',
15+
'sans-serif',
16+
],
17+
},
18+
},
519
} satisfies TailwindConfig;

0 commit comments

Comments
 (0)