Skip to content

feat(demo): use Tailwind v4 in github-access-token.tsx #2496

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
Merged

feat(demo): use Tailwind v4 in github-access-token.tsx #2496

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
6bcdf4a
refactor(demo): github with tailwind
bukinoshita Sep 29, 2025
e138c2c
use tailwind
gabrielmfern Oct 2, 2025
63b7742
fix pixel differences
gabrielmfern Oct 7, 2025
90ef413
lint
gabrielmfern Oct 10, 2025
8ee89b5
small tweak
gabrielmfern Oct 10, 2025
3a69911
lint
gabrielmfern Oct 10, 2025
019288f
Merge branch 'chore/basic-setup' into apps/demo/emails/notifications/…
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
134 changes: 44 additions & 90 deletions apps/demo/emails/notifications/github-access-token.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,10 @@ import {
Link,
Preview,
Section,
Tailwind,
Text,
} from '@react-email/components';
import tailwindConfig from '../tailwind.config';

interface GithubAccessTokenEmailProps {
username?: string;
Expand All @@ -24,44 +26,51 @@ export const GithubAccessTokenEmail = ({
}: GithubAccessTokenEmailProps) => (
<Html>
<Head />
<Body style={main}>
<Preview>
A fine-grained personal access token has been added to your account
</Preview>
<Container style={container}>
<Img
src={`${baseUrl}/static/github.png`}
width="32"
height="32"
alt="Github"
/>

<Text style={title}>
<strong>@{username}</strong>, a personal access was created on your
account.
</Text>

<Section style={section}>
<Text style={text}>
Hey <strong>{username}</strong>!
</Text>
<Text style={text}>
A fine-grained personal access token (<Link>resend</Link>) was
recently added to your account.
<Tailwind config={tailwindConfig}>
<Body className="bg-white text-[#24292e] font-github">
<Preview>
A fine-grained personal access token has been added to your account
</Preview>
<Container className="max-w-[480px] mx-auto my-0 pt-5 pb-12 px-0">
<Img
src={`${baseUrl}/static/github.png`}
width="32"
height="32"
alt="Github"
/>

<Text className="text-[24px] leading-[1.25]">
<strong>@{username}</strong>, a personal access was created on your
account.
</Text>

<Button style={button}>View your token</Button>
</Section>
<Text style={links}>
<Link style={link}>Your security audit log</Link> ・{' '}
<Link style={link}>Contact support</Link>
</Text>
<Section className="p-6 border border-solid border-[#dedede] rounded-[5px] text-center">
<Text className="mb-[10px] mt-0 text-left">
Hey <strong>{username}</strong>!
</Text>
<Text className="mb-[10px] mt-0 text-left">
A fine-grained personal access token (<Link>resend</Link>) was
recently added to your account.
</Text>

<Button className="text-sm bg-[#28a745] text-white leading-normal rounded-lg py-3 px-6">
View your token
</Button>
</Section>
<Text className="text-center">
<Link className="text-[#0366d6] text-[12px]">
Your security audit log
</Link>{' '}
・{' '}
<Link className="text-[#0366d6] text-[12px]">Contact support</Link>
</Text>

<Text style={footer}>
GitHub, Inc. ・88 Colin P Kelly Jr Street ・San Francisco, CA 94107
</Text>
</Container>
</Body>
<Text className="text-[#6a737d] text-xs leading-[24px] text-center mt-[60px] mb-4">
GitHub, Inc. ・88 Colin P Kelly Jr Street ・San Francisco, CA 94107
</Text>
</Container>
</Body>
</Tailwind>
</Html>
);

Expand All @@ -70,58 +79,3 @@ GithubAccessTokenEmail.PreviewProps = {
} as GithubAccessTokenEmailProps;

export default GithubAccessTokenEmail;

const main = {
backgroundColor: '#ffffff',
color: '#24292e',
fontFamily:
'-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"',
};

const container = {
maxWidth: '480px',
margin: '0 auto',
padding: '20px 0 48px',
};

const title = {
fontSize: '24px',
lineHeight: 1.25,
};

const section = {
padding: '24px',
border: 'solid 1px #dedede',
borderRadius: '5px',
textAlign: 'center' as const,
};

const text = {
margin: '0 0 10px 0',
textAlign: 'left' as const,
};

const button = {
fontSize: '14px',
backgroundColor: '#28a745',
color: '#fff',
lineHeight: 1.5,
borderRadius: '0.5em',
padding: '12px 24px',
};

const links = {
textAlign: 'center' as const,
};

const link = {
color: '#0366d6',
fontSize: '12px',
};

const footer = {
color: '#6a737d',
fontSize: '12px',
textAlign: 'center' as const,
marginTop: '60px',
};
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'],
github:
'-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"',
yelp: [
'-apple-system',
'BlinkMacSystemFont',
Expand Down
Loading