Skip to content

feat(demo): use Tailwind v4 in google-play-policy-update.tsx #2495

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

Open
wants to merge 2 commits into
base: chore/basic-setup
Choose a base branch
from
+158 −154
Open

feat(demo): use Tailwind v4 in google-play-policy-update.tsx #2495

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4991fd6
refactor(demo): google with tailwind
bukinoshita Sep 29, 2025
852ce00
migrate google play policy to tailwind v4
gabrielmfern Oct 2, 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
304 changes: 151 additions & 153 deletions apps/demo/emails/newsletters/google-play-policy-update.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,10 @@ import {
Preview,
Row,
Section,
Tailwind,
Text,
} from '@react-email/components';
import tailwindConfig from '../tailwind.config';

const baseUrl = process.env.VERCEL_URL
? `https://${process.env.VERCEL_URL}`
Expand All @@ -20,171 +22,167 @@ const baseUrl = process.env.VERCEL_URL
export const GooglePlayPolicyUpdateEmail = () => (
<Html>
<Head />
<Body style={main}>
<Preview>Google Play developers</Preview>
<Container style={container}>
<Section>
<Row>
<Column>
<Img
style={headerBlue}
src={`${baseUrl}/static/google-play-header.png`}
width="305"
height="28"
alt="Google Play developers header blue transparent"
/>
<Img
style={sectionLogo}
src={`${baseUrl}/static/google-play-logo.png`}
width="155"
height="31"
alt="Google Play"
/>
</Column>
</Row>
</Section>

<Section style={paragraphContent}>
<Hr style={hr} />
<Text style={heading}>DEVELOPER UPDATE</Text>
<Text style={paragraph}>Hello Google Play Developer,</Text>
<Text style={paragraph}>
We strive to make Google Play a safe and trusted experience for
users.
</Text>
<Text style={paragraph}>
We've added clarifications to our{' '}
<Link href="https://notifications.google.com" style={link}>
Target API Level policy
</Link>
. Because this is a clarification, our enforcement standards and
practices for this policy remain the same.
</Text>
</Section>
<Section style={paragraphList}>
<Text style={paragraph}>
We’re noting exceptions to the{' '}
<Link href="https://notifications.google.com" style={link}>
Target API Level policy
</Link>
, which can be found in our updated{' '}
<Link href="https://notifications.google.com" style={link}>
Help Center article.
</Link>
These exceptions include permanently private apps and apps that
target automotive or wearables form factors and are bundled within
the same package.{' '}
<Link href="https://notifications.google.com" style={link}>
Learn more
</Link>
</Text>
</Section>
<Section style={paragraphContent}>
<Text style={paragraph}>
We’re also extending the deadline to give you more time to adjust to
these changes. Now, apps that target API level 29 or below will
start experiencing reduced distribution starting <b>Jan 31, 2023</b>{' '}
instead of Nov 1, 2022. If you need more time to update your app,
you can request an extension to keep your app discoverable to all
users until May 1, 2023.
</Text>
<Hr style={hr} />
</Section>

<Section style={paragraphContent}>
<Text style={paragraph}>Thank you,</Text>
<Text style={{ ...paragraph, fontSize: '20px' }}>
The Google Play team
</Text>
</Section>

<Section style={containerContact}>
<Row>
<Text style={paragraph}>Connect with us</Text>
</Row>
<Row
align="left"
style={{
width: '84px',
float: 'left',
}}
>
<Column style={{ paddingRight: '4px' }}>
<Link href="https://notifications.google.com">
<Tailwind config={tailwindConfig}>
<Body className="bg-[#dbddde] font-google">
<Preview>Google Play developers</Preview>
<Container className="my-[30px] mx-auto bg-white rounded-[5px] overflow-hidden">
<Section>
<Row>
<Column>
<Img
width="28"
className="-mt-px"
src={`${baseUrl}/static/google-play-header.png`}
width="305"
height="28"
src={`${baseUrl}/static/google-play-chat.png`}
alt="Google Play developers header blue transparent"
/>
</Link>
</Column>
<Column style={{ paddingRight: '4px' }}>
<Link href="https://notifications.google.com">
<Img
width="28"
height="28"
src={`${baseUrl}/static/google-play-icon.png`}
className="px-10"
src={`${baseUrl}/static/google-play-logo.png`}
width="155"
height="31"
alt="Google Play"
/>
</Column>
</Row>
</Section>

<Section className="px-10">
<Hr className="border-[#e8eaed] my-5" />
<Text className="text-sm leading-[26px] font-bold text-[#004dcf]">
DEVELOPER UPDATE
</Text>
<Text className="text-sm leading-[22px] text-[#3c4043]">
Hello Google Play Developer,
</Text>
<Text className="text-sm leading-[22px] text-[#3c4043]">
We strive to make Google Play a safe and trusted experience for
users.
</Text>
<Text className="text-sm leading-[22px] text-[#3c4043]">
We've added clarifications to our{' '}
<Link
href="https://notifications.google.com"
className="text-sm leading-[22px] text-[#004dcf]"
>
Target API Level policy
</Link>
</Column>
<Column style={{ paddingRight: '4px' }}>
<Link href="https://notifications.google.com">
<Img
width="28"
height="28"
src={`${baseUrl}/static/google-play-academy.png`}
/>
. Because this is a clarification, our enforcement standards and
practices for this policy remain the same.
</Text>
</Section>
<Section className="pl-10">
<Text className="text-sm leading-[22px] text-[#3c4043]">
We're noting exceptions to the{' '}
<Link
href="https://notifications.google.com"
className="text-sm leading-[22px] text-[#004dcf]"
>
Target API Level policy
</Link>
, which can be found in our updated{' '}
<Link
href="https://notifications.google.com"
className="text-sm leading-[22px] text-[#004dcf]"
>
Help Center article.
</Link>
</Column>
</Row>
<Row>
<Img
style={footer}
width="540"
height="48"
src={`${baseUrl}/static/google-play-footer.png`}
/>
</Row>
</Section>

<Section style={{ ...paragraphContent, paddingBottom: 30 }}>
<Text
style={{
...paragraph,
fontSize: '12px',
textAlign: 'center',
margin: 0,
}}
>
© 2022 Google LLC 1600 Amphitheatre Parkway, Mountain View, CA
94043, USA
</Text>
<Text
style={{
...paragraph,
fontSize: '12px',
textAlign: 'center',
margin: 0,
}}
>
You have received this mandatory email service announcement to
update you about important changes to your Google Play Developer
account.
</Text>
</Section>
</Container>
</Body>
These exceptions include permanently private apps and apps that
target automotive or wearables form factors and are bundled within
the same package.{' '}
<Link
href="https://notifications.google.com"
className="text-sm leading-[22px] text-[#004dcf]"
>
Learn more
</Link>
</Text>
</Section>
<Section className="px-10">
<Text className="text-sm leading-[22px] text-[#3c4043]">
We're also extending the deadline to give you more time to adjust
to these changes. Now, apps that target API level 29 or below will
start experiencing reduced distribution starting{' '}
<b>Jan 31, 2023</b> instead of Nov 1, 2022. If you need more time
to update your app, you can request an extension to keep your app
discoverable to all users until May 1, 2023.
</Text>
<Hr className="border-[#e8eaed] my-5" />
</Section>

<Section className="px-10">
<Text className="text-sm leading-[22px] text-[#3c4043]">
Thank you,
</Text>
<Text className="text-xl leading-[22px] text-[#3c4043]">
The Google Play team
</Text>
</Section>

<Section className="bg-[#f0fcff] w-[90%] rounded-[5px] overflow-hidden pl-5">
<Row>
<Text className="text-sm leading-[22px] text-[#3c4043]">
Connect with us
</Text>
</Row>
<Row align="left" className="w-[84px] float-left">
<Column className="pr-1">
<Link href="https://notifications.google.com">
<Img
width="28"
height="28"
src={`${baseUrl}/static/google-play-chat.png`}
/>
</Link>
</Column>
<Column className="pr-1">
<Link href="https://notifications.google.com">
<Img
width="28"
height="28"
src={`${baseUrl}/static/google-play-icon.png`}
/>
</Link>
</Column>
<Column className="pr-1">
<Link href="https://notifications.google.com">
<Img
width="28"
height="28"
src={`${baseUrl}/static/google-play-academy.png`}
/>
</Link>
</Column>
</Row>
<Row>
<Img
className="max-w-full"
width="540"
height="48"
src={`${baseUrl}/static/google-play-footer.png`}
/>
</Row>
</Section>

<Section className="px-10 pb-[30px]">
<Text className="text-xs leading-[22px] text-[#3c4043] text-center m-0">
© 2022 Google LLC 1600 Amphitheatre Parkway, Mountain View, CA
94043, USA
</Text>
<Text className="text-xs leading-[22px] text-[#3c4043] text-center m-0">
You have received this mandatory email service announcement to
update you about important changes to your Google Play Developer
account.
</Text>
</Section>
</Container>
</Body>
</Tailwind>
</Html>
);

export default GooglePlayPolicyUpdateEmail;

const main = {
backgroundColor: '#dbddde',
fontFamily:
'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
};

const sectionLogo = {
padding: '0 40px',
};
Expand Down
8 changes: 7 additions & 1 deletion apps/demo/emails/tailwind.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
import { pixelBasedPreset, type TailwindConfig } from '@react-email/components';
import { pixelBasedPreset, type TailwindConfig } from "@react-email/components";

export default {
presets: [pixelBasedPreset],
theme: {
fontFamily: {
google:
'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
},
},
} satisfies TailwindConfig;
Loading