Skip to content

fix(tailwind): media queries not getting sanitized sometimes #1929

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 6 commits into from
Jul 11, 2025
Merged

fix(tailwind): media queries not getting sanitized sometimes #1929

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
81a5278
update types for tailwind internals
gabrielmfern Feb 25, 2025
c7587fb
update responsive styles test to ensure #1871
gabrielmfern Feb 25, 2025
5344b1e
fix #1871
gabrielmfern Feb 25, 2025
7c5cd2a
add changeset
gabrielmfern Feb 25, 2025
71c70a4
update snapshots
gabrielmfern Jul 10, 2025
845dae5
Merge branch 'main' into fix/tailwind-not-extracting-media-queries
gabrielmfern Jul 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
5 changes: 5 additions & 0 deletions .changeset/calm-birds-spend.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@react-email/tailwind": patch
---

Fix color-scheme media queries sometimes not getting sanitized at the className
17 changes: 16 additions & 1 deletion packages/tailwind/src/__snapshots__/tailwind.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,22 @@ exports[`Tailwind component > should work with custom components with fragment a

exports[`non-inlinable styles > should add css to <head/> and keep class names 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html lang="en"><head><!--$--><style>@media(min-width:640px){.sm_bg-red-300{background-color:rgb(252,165,165) !important}.sm_hover_bg-red-200:hover{background-color:rgb(254,202,202) !important}}@media(min-width:768px){.md_bg-red-400{background-color:rgb(248,113,113) !important}}@media(min-width:1024px){.lg_bg-red-500{background-color:rgb(239,68,68) !important}}.hover_bg-red-600:hover{background-color:rgb(220,38,38) !important}.focus_bg-red-700:focus{background-color:rgb(185,28,28) !important}</style></head><body><div class="hover_bg-red-600 focus_bg-red-700 sm_bg-red-300 sm_hover_bg-red-200 md_bg-red-400 lg_bg-red-500" style="background-color:rgb(254,202,202)"></div><!--/$--></body></html>"`;

exports[`non-inlinable styles > should not have duplicate media queries 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><head><meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/><meta name="x-apple-disable-message-reformatting"/><!--$--><style>@media(min-width:768px){.md_px-64px{padding-left:64px !important;padding-right:64px !important}}.hover_underline:hover{text-decoration-line:underline !important}</style></head><body class="hover_underline md_px-64px" style="margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;background-color:rgb(255,255,255);font-family:ui-sans-serif, system-ui, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;"><div class="hover_underline md_px-64px"></div><!--/$--></body>"`;
exports[`non-inlinable styles > should not have duplicate media queries 1`] = `
"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<meta name="x-apple-disable-message-reformatting" />
<!--$-->
<style>
@media(min-width:768px){.md_px-64px{padding-left:64px !important;padding-right:64px !important}}@media(prefers-color-scheme:dark){.dark_bg-black{background-color:rgb(0,0,0) !important}.dark_text-green-500{color:rgb(34,197,94) !important}}
</style>
</head>
<body class="md_px-64px dark_bg-black dark_text-green-500">
<div class="md_px-64px dark_text-green-500"></div>
<!--/$-->
</body>
"
`;

exports[`non-inlinable styles > should persist existing <head/> elements 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html lang="en"><head><!--$--><style></style><link/><style>@media(min-width:640px){.sm_bg-red-500{background-color:rgb(239,68,68) !important}}</style></head><body><div class="sm_bg-red-500" style="background-color:rgb(254,202,202)"></div><!--/$--></body></html>"`;

Expand Down
7 changes: 5 additions & 2 deletions packages/tailwind/src/tailwind.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -387,10 +387,13 @@ describe('non-inlinable styles', () => {
const output = await render(
<Tailwind>
<Head />
<Body className="mx-auto my-auto bg-white font-sans hover:underline md:px-[64px]">
<div className="hover:underline md:px-[64px]" />
<Body className="md:px-[64px] dark:bg-black dark:text-green-500">
<div className="md:px-[64px] dark:text-green-500" />
</Body>
</Tailwind>,
{
pretty: true,
},
);

expect(output).toMatchSnapshot();
Expand Down
5 changes: 3 additions & 2 deletions packages/tailwind/src/utils/tailwindcss/setup-tailwind.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ export function setupTailwind(config: TailwindConfig) {
const tailwindContext = setupTailwindContext(config);
return {
generateRootForClasses: (classes: string[]) => {
tailwindContext.candidateRuleCache = new Map();
const bigIntRuleTuples: [bigint, Rule][] = rawGenerateRules(
new Set(classes),
tailwindContext,
Expand All @@ -42,8 +43,8 @@ export function setupTailwind(config: TailwindConfig) {
evaluateTailwindFunctions(tailwindContext)(root);
substituteScreenAtRules(tailwindContext)(root);
resolveDefaultsAtRules(tailwindContext)(root);
collapseAdjacentRules(tailwindContext)(root);
collapseDuplicateDeclarations(tailwindContext)(root);
collapseAdjacentRules()(root);
collapseDuplicateDeclarations()(root);

resolveAllCSSVariables(root);

Expand Down
8 changes: 2 additions & 6 deletions packages/tailwind/src/utils/tailwindcss/tailwind-internals.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,18 +63,14 @@ declare module "tailwindcss/lib/lib/collapseAdjacentRules" {
import type { JitContext } from "tailwindcss/lib/lib/setupContextUtils";
import type { Root } from "postcss";

export default async function collapseAdjacentRules(
context: JITContext,
): (root: Root) => void;
export default function collapseAdjacentRules(): (root: Root) => void;
}

declare module "tailwindcss/lib/lib/collapseDuplicateDeclarations" {
import type { JitContext } from "tailwindcss/lib/lib/setupContextUtils";
import type { Root } from "postcss";

export default async function collapseDuplicateDeclarations(
context: JITContext,
): (root: Root) => void;
export default function collapseDuplicateDeclarations(): (root: Root) => void;
}

declare module "tailwindcss/lib/lib/generateRules" {
Expand Down
Loading