diff --git a/.changeset/icy-ghosts-move.md b/.changeset/icy-ghosts-move.md
new file mode 100644
index 0000000000..a45770f10c
--- /dev/null
+++ b/.changeset/icy-ghosts-move.md
@@ -0,0 +1,6 @@
+---
+"@react-email/tailwind": minor
+"@react-email/components": minor
+---
+
+fix `max-*` breakpoints generating invalid CSS
diff --git a/packages/tailwind/package.json b/packages/tailwind/package.json
index fab11dce3b..6ce1be219c 100644
--- a/packages/tailwind/package.json
+++ b/packages/tailwind/package.json
@@ -58,6 +58,7 @@
     "@vitejs/plugin-react": "4.4.1",
     "postcss": "8.5.3",
     "postcss-selector-parser": "7.1.0",
+    "postcss-value-parser": "4.2.0",
     "react-dom": "^19",
     "shelljs": "0.9.2",
     "tailwindcss": "3.4.10",
diff --git a/packages/tailwind/src/__snapshots__/tailwind.spec.tsx.snap b/packages/tailwind/src/__snapshots__/tailwind.spec.tsx.snap
index 76d7a2b1da..785b34cde5 100644
--- a/packages/tailwind/src/__snapshots__/tailwind.spec.tsx.snap
+++ b/packages/tailwind/src/__snapshots__/tailwind.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Custom plugins config > should be able to use custom plugins 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><div style="border:2px solid"></div><!--/$-->"`;
 
-exports[`Custom plugins config > should be able to use custom plugins with responsive styles 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_border-custom{border:2px solid !important}}</style></head><body><div class="sm_border-custom" style="border:2px solid"></div><!--/$--></body></html>"`;
+exports[`Custom plugins config > should be able to use custom plugins with responsive styles 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_border-custom{border:2px solid!important}}</style></head><body><div class="sm_border-custom" style="border:2px solid"></div><!--/$--></body></html>"`;
 
 exports[`Custom theme config > should be able to use custom border radius 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><div style="border-radius:2rem"></div><!--/$-->"`;
 
@@ -14,11 +14,11 @@ exports[`Custom theme config > should be able to use custom spacing 1`] = `"<!DO
 
 exports[`Custom theme config > should be able to use custom text alignment 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><div style="text-align:justify"></div><!--/$-->"`;
 
-exports[`Responsive styles > should add css to <head/> and keep responsive 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}}@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}}</style></head><body><div class="sm_bg-red-300 md_bg-red-400 lg_bg-red-500" style="background-color:rgb(254,202,202)"></div><!--/$--></body></html>"`;
+exports[`Responsive styles > should add css to <head/> and keep responsive 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}}@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}}</style></head><body><div class="sm_bg-red-300 md_bg-red-400 lg_bg-red-500" style="background-color:rgb(254,202,202)"></div><!--/$--></body></html>"`;
 
-exports[`Responsive 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}}</style></head><body class="md_px-64px" style="margin-top:auto;margin-bottom:auto;margin-left:auto;margin-right: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="md_px-64px"></div><!--/$--></body>"`;
+exports[`Responsive 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}}</style></head><body class="md_px-64px" style="margin-top:auto;margin-bottom:auto;margin-left:auto;margin-right: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="md_px-64px"></div><!--/$--></body>"`;
 
-exports[`Responsive 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>"`;
+exports[`Responsive 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>"`;
 
 exports[`Responsive styles > should throw an error when used without a <head/> 1`] = `
 [Error: You are trying to use the following Tailwind classes that cannot be inlined: sm:bg-red-500.
@@ -44,11 +44,13 @@ If you do already have a <head> element at some depth,
 please file a bug https://github.com/resend/react-email/issues/new?assignees=&labels=Type%3A+Bug&projects=&template=1.bug_report.yml.]
 `;
 
-exports[`Responsive styles > should work with arbitrarily deep (in the React tree) <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>@media(min-width:640px){.sm_bg-red-300{background-color:rgb(252,165,165) !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}}</style></head><body><div class="sm_bg-red-300 md_bg-red-400 lg_bg-red-500" style="background-color:rgb(254,202,202)"></div><!--/$--></body></html>"`;
+exports[`Responsive styles > should work with arbitrarily deep (in the React tree) <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>@media (min-width:640px){.sm_bg-red-300{background-color:rgb(252,165,165)!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}}</style></head><body><div class="sm_bg-red-300 md_bg-red-400 lg_bg-red-500" style="background-color:rgb(254,202,202)"></div><!--/$--></body></html>"`;
 
-exports[`Responsive styles > should work with arbitrarily deep (in the React tree) <head> elements 2`] = `"<!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}}@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}}</style></head><body><div class="sm_bg-red-300 md_bg-red-400 lg_bg-red-500" style="background-color:rgb(254,202,202)"></div><!--/$--></body></html>"`;
+exports[`Responsive styles > should work with arbitrarily deep (in the React tree) <head> elements 2`] = `"<!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}}@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}}</style></head><body><div class="sm_bg-red-300 md_bg-red-400 lg_bg-red-500" style="background-color:rgb(254,202,202)"></div><!--/$--></body></html>"`;
 
-exports[`Responsive styles > should work with relatively complex media query utilities 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 not all and(min-width:640px){.max-sm_text-red-600{color:rgb(220,38,38) !important}}</style></head><p class="max-sm_text-red-600" style="color:rgb(29,78,216)">I am some text</p><!--/$-->"`;
+exports[`Responsive styles > should work with max-* breakpoints 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><head><!--$--><style>@media not all and (min-width:640px){.max-sm_bg-green-500{background-color:rgb(34,197,94)!important}}</style></head><div class="max-sm_bg-green-500" style="background-color:rgb(254,226,226)">Test</div><!--/$-->"`;
+
+exports[`Responsive styles > should work with relatively complex media query utilities 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 not all and (min-width:640px){.max-sm_text-red-600{color:rgb(220,38,38)!important}}</style></head><p class="max-sm_text-red-600" style="color:rgb(29,78,216)">I am some text</p><!--/$-->"`;
 
 exports[`Tailwind component > <Button className="px-3 py-2 mt-8 text-sm text-gray-200 bg-blue-600 rounded-md"> 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><a style="margin-top:2rem;border-radius:0.375rem;background-color:rgb(37,99,235);padding-left:12px;padding-right:12px;padding-top:8px;padding-bottom:8px;color:rgb(229,231,235);font-size:0.875rem;line-height:1.25rem;text-decoration:none;display:inline-block;max-width:100%;mso-padding-alt:0px" target="_blank"><span><!--[if mso]><i style="mso-font-width:300%;mso-text-raise:12" hidden>&#8202;&#8202;</i><![endif]--></span><span style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:6px">Testing button</span><span><!--[if mso]><i style="mso-font-width:300%" hidden>&#8202;&#8202;&#8203;</i><![endif]--></span></a>Testing<!--/$-->"`;
 
@@ -60,15 +62,15 @@ exports[`Tailwind component > should be able to use background image 1`] = `"<!D
 
 exports[`Tailwind component > should not override inline styles with Tailwind styles 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><div style="background-color:red;font-size:12px"></div><!--/$-->"`;
 
-exports[`Tailwind component > should preserve mso styles 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html dir="ltr" lang="en"><head><meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/><meta name="x-apple-disable-message-reformatting"/><!--$--><style>@media(min-width:640px){.sm_bg-red-50{background-color:rgb(254,242,242) !important}.sm_text-sm{font-size:0.875rem !important;line-height:1.25rem !important}}@media(min-width:768px){.md_text-lg{font-size:1.125rem !important;line-height:1.75rem !important}}</style></head><span><!--[if mso]><i style="letter-spacing: 10px;mso-font-width:-100%;" hidden>&nbsp;</i><![endif]--></span><div class="custom-class sm_bg-red-50 sm_text-sm md_text-lg" style="background-color:rgb(255,255,255)"></div><!--/$--></html>"`;
+exports[`Tailwind component > should preserve mso styles 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html dir="ltr" lang="en"><head><meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/><meta name="x-apple-disable-message-reformatting"/><!--$--><style>@media (min-width:640px){.sm_bg-red-50{background-color:rgb(254,242,242)!important}.sm_text-sm{font-size:0.875rem!important;line-height:1.25rem!important}}@media (min-width:768px){.md_text-lg{font-size:1.125rem!important;line-height:1.75rem!important}}</style></head><span><!--[if mso]><i style="letter-spacing: 10px;mso-font-width:-100%;" hidden>&nbsp;</i><![endif]--></span><div class="custom-class sm_bg-red-50 sm_text-sm md_text-lg" style="background-color:rgb(255,255,255)"></div><!--/$--></html>"`;
 
-exports[`Tailwind component > should recognize custom responsive screen 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html dir="ltr" lang="en"><head><meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/><meta name="x-apple-disable-message-reformatting"/><!--$--><style>@media(min-width:1280px){.xl_bg-green-500{background-color:rgb(34,197,94) !important}}@media(min-width:1536px){.twoxl_bg-blue-500{background-color:rgb(59,130,246) !important}}</style></head><div class="xl_bg-green-500" style="background-color:rgb(254,226,226)">Test</div><div class="twoxl_bg-blue-500">Test</div><!--/$--></html>"`;
+exports[`Tailwind component > should recognize custom responsive screen 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html dir="ltr" lang="en"><head><meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/><meta name="x-apple-disable-message-reformatting"/><!--$--><style>@media (min-width:1280px){.xl_bg-green-500{background-color:rgb(34,197,94)!important}}@media (min-width:1536px){.twoxl_bg-blue-500{background-color:rgb(59,130,246)!important}}</style></head><div class="xl_bg-green-500" style="background-color:rgb(254,226,226)">Test</div><div class="twoxl_bg-blue-500">Test</div><!--/$--></html>"`;
 
 exports[`Tailwind component > should work properly with 'no-underline' 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html dir="ltr" lang="en"><head></head><!--$--><body><p style="font-size:14px;color:rgb(0,0,0);line-height:24px">or copy and paste this URL into your browser:<!-- --> <a class="other" href="https://react.email" style="color:rgb(37,99,235);text-decoration-line:none" target="_blank">https://react.email</a></p><p style="font-size:14px;color:rgb(0,0,0);line-height:24px">or copy and paste this URL into your browser:<!-- --> <a href="https://react.email" style="color:rgb(37,99,235);text-decoration-line:none" target="_blank">https://react.email</a></p><!--/$--></body></html>"`;
 
 exports[`Tailwind component > should work with Heading component 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$-->Hello<h1>My testing heading</h1>friends<!--/$-->"`;
 
-exports[`Tailwind component > should work with calc() with + sign 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><head><!--$--><style>@media(min-width:1024px){.lg_max-h-calc50pxplus5rem{max-height:calc(50px + 5rem) !important}}</style></head><div class="lg_max-h-calc50pxplus5rem" style="max-height:calc(50px + 3rem);background-color:rgb(254,226,226)"><div style="height:200px">something tall</div></div><!--/$-->"`;
+exports[`Tailwind component > should work with calc() with + sign 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><head><!--$--><style>@media (min-width:1024px){.lg_max-h-calc50pxplus5rem{max-height:calc(50px + 5rem)!important}}</style></head><div class="lg_max-h-calc50pxplus5rem" style="max-height:calc(50px + 3rem);background-color:rgb(254,226,226)"><div style="height:200px">something tall</div></div><!--/$-->"`;
 
 exports[`Tailwind component > should work with class manipulation done on components 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><div style="padding:4px;color:rgb(96,165,250);background-color:rgb(239,68,68)"></div><!--/$-->"`;
 
diff --git a/packages/tailwind/src/tailwind.spec.tsx b/packages/tailwind/src/tailwind.spec.tsx
index aafa0abb93..7c9fa24727 100644
--- a/packages/tailwind/src/tailwind.spec.tsx
+++ b/packages/tailwind/src/tailwind.spec.tsx
@@ -380,6 +380,18 @@ describe('Responsive styles', () => {
     ).toMatchSnapshot();
   });
 
+  // https://github.com/resend/react-email/issues/2297
+  it('should work with max-* breakpoints', async () => {
+    const actualOutput = await render(
+      <Tailwind config={{}}>
+        <head />
+        <div className="bg-red-100 max-sm:bg-green-500">Test</div>
+      </Tailwind>,
+    );
+
+    expect(actualOutput).toMatchSnapshot();
+  });
+
   it('should not have duplicate media queries', async () => {
     const Body = (props: { className: string; children: React.ReactNode }) => {
       return <body className={props.className}>{props.children}</body>;
diff --git a/packages/tailwind/src/tailwind.tsx b/packages/tailwind/src/tailwind.tsx
index 25ec946f02..ca347d2c00 100644
--- a/packages/tailwind/src/tailwind.tsx
+++ b/packages/tailwind/src/tailwind.tsx
@@ -79,9 +79,7 @@ export const Tailwind: React.FC<TailwindProps> = ({ children, config }) => {
 
           /*                   only minify here since it is the only place that is going to be in the DOM */
           const styleElement = (
-            <style>
-              {minifyCss(nonInlineStylesRootToApply.toString().trim())}
-            </style>
+            <style>{minifyCss(nonInlineStylesRootToApply)}</style>
           );
 
           return React.cloneElement(
diff --git a/packages/tailwind/src/utils/css/minify-css.spec.ts b/packages/tailwind/src/utils/css/minify-css.spec.ts
new file mode 100644
index 0000000000..521f46bfd5
--- /dev/null
+++ b/packages/tailwind/src/utils/css/minify-css.spec.ts
@@ -0,0 +1,47 @@
+import { parse } from 'postcss';
+import { minifyCss } from './minify-css';
+
+describe('minifyCss', () => {
+  it('should remove comments', () => {
+    const input = parse('body { color: red; /* This is a comment */ }');
+    const expected = 'body{color:red}';
+    expect(minifyCss(input)).toBe(expected);
+  });
+
+  it('should remove extra spaces after semicolons and colons', () => {
+    const input = parse('body { color: red;   font-size: 16px; }');
+    const expected = 'body{color:red;font-size:16px}';
+    expect(minifyCss(input)).toBe(expected);
+  });
+
+  it('should remove extra spaces before and after brackets', () => {
+    const input = parse('body { color: red; } .class { margin: 10px; }');
+    const expected = 'body{color:red}.class{margin:10px}';
+    expect(minifyCss(input)).toBe(expected);
+  });
+
+  it('should handle multiple rules in a single string', () => {
+    const input = parse('body { color: red; } .class { margin: 10px; }');
+    const expected = 'body{color:red}.class{margin:10px}';
+    expect(minifyCss(input)).toBe(expected);
+  });
+
+  // https://github.com/resend/react-email/issues/2297
+  it('should handle at rules with multiple parameters', () => {
+    const input = parse(`@media not all and (min-width:600px) {
+  .max-desktop_px-40 {
+    padding-left: 40px !important;
+    padding-right: 40px !important
+  }
+}`);
+    const expected =
+      '@media not all and (min-width:600px){.max-desktop_px-40{padding-left:40px!important;padding-right:40px!important}}';
+    expect(minifyCss(input)).toBe(expected);
+  });
+
+  it('should handle empty strings', () => {
+    const input = parse('');
+    const expected = '';
+    expect(minifyCss(input)).toBe(expected);
+  });
+});
diff --git a/packages/tailwind/src/utils/css/minify-css.ts b/packages/tailwind/src/utils/css/minify-css.ts
index 2d7b7832be..13001b102a 100644
--- a/packages/tailwind/src/utils/css/minify-css.ts
+++ b/packages/tailwind/src/utils/css/minify-css.ts
@@ -1,21 +1,57 @@
-export const minifyCss = (css: string): string => {
-  // Thanks tw-to-css!
-  // from https://github.com/vinicoder/tw-to-css/blob/main/src/util/format-css.ts
-  return (
-    css
-      // Remove comments
-      .replace(/\/\*[\s\S]*?\*\//gm, '')
+import type { Root } from 'postcss';
+import selectorParser from 'postcss-selector-parser';
+import valueParser from 'postcss-value-parser';
 
-      // Remove extra spaces after semicolons and colons
-      .replace(/;\s+/gm, ';')
-      .replace(/:\s+/gm, ':')
+function minifyValue(value: string) {
+  const parsed = valueParser(value.trim());
+  parsed.walk((node) => {
+    if ('before' in node) node.before = '';
+    if ('after' in node) node.after = '';
+    if (node.type === 'space') node.value = ' ';
+  });
+  return parsed.toString();
+}
 
-      // Remove extra spaces before and after brackets
-      .replace(/\)\s*{/gm, '){') // Remove spaces before opening curly brace after closing parenthesis
-      .replace(/\s+\(/gm, '(') // Remove spaces before opening parenthesis
-      .replace(/{\s+/gm, '{') // Remove spaces after opening curly brace
-      .replace(/}\s+/gm, '}') // Remove spaces before closing curly brace
-      .replace(/\s*{/gm, '{') // Remove spaces after opening curly brace
-      .replace(/;?\s*}/gm, '}')
-  ); // Remove extra spaces and semicolons before closing curly braces
+export const minifyCss = (root: Root): string => {
+  const toMinify = root.clone();
+  toMinify.walk((node) => {
+    if (node.type === 'comment') {
+      if (node.text[0] === '!') {
+        node.raws.before = '';
+        node.raws.after = '';
+      } else {
+        node.remove();
+      }
+    } else if (node.type === 'atrule') {
+      node.raws = {
+        before: '',
+        after: '',
+        afterName: ' ',
+      };
+      node.params = minifyValue(node.params);
+    } else if (node.type === 'decl') {
+      node.raws = {
+        before: '',
+        between: ':',
+        important: node.important
+          ? (node.raws.important?.replaceAll(' ', '') ?? '!important')
+          : undefined,
+      };
+      node.value = minifyValue(node.value);
+    } else if (node.type === 'rule') {
+      node.raws = { before: '', between: '', after: '', semicolon: false };
+      node.selector = selectorParser((selectorRoot) => {
+        selectorRoot.walk((selector) => {
+          selector.spaces = { before: '', after: '' };
+
+          if ('raws' in selector && selector.raws?.spaces) {
+            selector.raws.spaces = {};
+          }
+        });
+      })
+        .processSync(node.selector)
+        .toString();
+    }
+  });
+  return toMinify.toString();
 };
diff --git a/packages/tailwind/vite.config.ts b/packages/tailwind/vite.config.ts
index c7fbbd5260..1ec93b241a 100644
--- a/packages/tailwind/vite.config.ts
+++ b/packages/tailwind/vite.config.ts
@@ -21,6 +21,7 @@ export default defineConfig({
       // - tailwindcss
       // - postcss
       // - postcss-selector-parser
+      // - postcss-value-parser
       external: ['react', /^react\/.*/, 'react-dom', /react-dom\/.*/],
     },
     lib: {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index dc582ccb15..cc55c49448 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -916,6 +916,9 @@ importers:
       postcss-selector-parser:
         specifier: 7.1.0
         version: 7.1.0
+      postcss-value-parser:
+        specifier: 4.2.0
+        version: 4.2.0
       react-dom:
         specifier: ^19.0.0
         version: 19.0.0(react@19.0.0)
