From 8aa8f8e9d9c7446dd957093fa93d0f24784dcfea Mon Sep 17 00:00:00 2001
From: Kaylee <65376239+KayleeWilliams@users.noreply.github.com>
Date: Mon, 17 Feb 2025 18:39:15 +0000
Subject: [PATCH 01/33] feat(react-email): added a theme switcher to the dev
 preview (#1749)

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: gabriel miranda <gabrielmfern@outlook.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Bu Kinoshita <6929565+bukinoshita@users.noreply.github.com>
---
 .changeset/dirty-needles-chew.md              |  5 ++
 .../src/app/preview/[...slug]/preview.tsx     | 64 +++++++++-----
 .../src/components/icons/icon-moon.tsx        | 16 ++++
 .../src/components/icons/icon-sun.tsx         | 16 ++++
 .../components/topbar/theme-toggle-group.tsx  | 84 +++++++++++++++++++
 .../src/hooks/use-iframe-color-scheme.ts      | 35 ++++++++
 6 files changed, 198 insertions(+), 22 deletions(-)
 create mode 100644 .changeset/dirty-needles-chew.md
 create mode 100644 packages/preview-server/src/components/icons/icon-moon.tsx
 create mode 100644 packages/preview-server/src/components/icons/icon-sun.tsx
 create mode 100644 packages/preview-server/src/components/topbar/theme-toggle-group.tsx
 create mode 100644 packages/preview-server/src/hooks/use-iframe-color-scheme.ts

diff --git a/.changeset/dirty-needles-chew.md b/.changeset/dirty-needles-chew.md
new file mode 100644
index 0000000000..acc7dd42e2
--- /dev/null
+++ b/.changeset/dirty-needles-chew.md
@@ -0,0 +1,5 @@
+---
+"react-email": minor
+---
+
+Theme switcher for email template
diff --git a/packages/preview-server/src/app/preview/[...slug]/preview.tsx b/packages/preview-server/src/app/preview/[...slug]/preview.tsx
index ef5c09cde3..1cb68a7f36 100644
--- a/packages/preview-server/src/app/preview/[...slug]/preview.tsx
+++ b/packages/preview-server/src/app/preview/[...slug]/preview.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import { flushSync } from 'react-dom';
 import { Toaster } from 'sonner';
 import { useDebouncedCallback } from 'use-debounce';
@@ -15,9 +15,11 @@ import { Send } from '../../../components/send';
 import { useToolbarState } from '../../../components/toolbar';
 import { Tooltip } from '../../../components/tooltip';
 import { ActiveViewToggleGroup } from '../../../components/topbar/active-view-toggle-group';
+import { ThemeToggleGroup } from '../../../components/topbar/theme-toggle-group';
 import { ViewSizeControls } from '../../../components/topbar/view-size-controls';
 import { usePreviewContext } from '../../../contexts/preview';
 import { useClampedState } from '../../../hooks/use-clamped-state';
+import { useIframeColorScheme } from '../../../hooks/use-iframe-color-scheme';
 import { cn } from '../../../utils';
 import { ErrorOverlay } from './error-overlay';
 
@@ -32,9 +34,17 @@ const Preview = ({ emailTitle, className, ...props }: PreviewProps) => {
   const pathname = usePathname();
   const searchParams = useSearchParams();
 
-  const activeView = searchParams.get('view') ?? 'preview';
+  const activeTheme: 'dark' | 'light' =
+    searchParams.get('theme') === 'dark' ? 'dark' : 'light';
+  const activeView = searchParams.get('view') ?? 'desktop';
   const activeLang = searchParams.get('lang') ?? 'jsx';
 
+  const handleThemeChange = (theme: 'dark' | 'light') => {
+    const params = new URLSearchParams(searchParams);
+    params.set('theme', theme);
+    router.push(`${pathname}?${params.toString()}`);
+  };
+
   const handleViewChange = (view: string) => {
     const params = new URLSearchParams(searchParams);
     params.set('view', view);
@@ -51,6 +61,9 @@ const Preview = ({ emailTitle, className, ...props }: PreviewProps) => {
     );
   };
 
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  useIframeColorScheme(iframeRef, activeTheme);
+
   const hasRenderingMetadata = typeof renderedEmailMetadata !== 'undefined';
   const hasErrors = 'error' in renderingResult;
 
@@ -83,26 +96,32 @@ const Preview = ({ emailTitle, className, ...props }: PreviewProps) => {
   return (
     <>
       <Topbar emailTitle={emailTitle}>
-        {activeView === 'preview' && (
-          <ViewSizeControls
-            setViewHeight={(height) => {
-              setHeight(height);
-              flushSync(() => {
-                handleSaveViewSize();
-              });
-            }}
-            setViewWidth={(width) => {
-              setWidth(width);
-              flushSync(() => {
-                handleSaveViewSize();
-              });
-            }}
-            viewHeight={height}
-            viewWidth={width}
-            minWidth={minWidth}
-            minHeight={minHeight}
-          />
-        )}
+        {activeView === 'preview' ? (
+          <>
+            <ViewSizeControls
+              setViewHeight={(height) => {
+                setHeight(height);
+                flushSync(() => {
+                  handleSaveViewSize();
+                });
+              }}
+              setViewWidth={(width) => {
+                setWidth(width);
+                flushSync(() => {
+                  handleSaveViewSize();
+                });
+              }}
+              viewHeight={height}
+              viewWidth={width}
+              minWidth={minWidth}
+              minHeight={minHeight}
+            />
+            <ThemeToggleGroup
+              active={activeTheme}
+              onChange={(theme) => handleThemeChange(theme)}
+            />
+          </>
+        ) : null}
         <ActiveViewToggleGroup
           activeView={activeView}
           setActiveView={handleViewChange}
@@ -168,6 +187,7 @@ const Preview = ({ emailTitle, className, ...props }: PreviewProps) => {
                 <iframe
                   className="max-h-full rounded-lg bg-white [color-scheme:auto]"
                   ref={(iframe) => {
+                    iframeRef.current = iframe;
                     if (iframe) {
                       return makeIframeDocumentBubbleEvents(iframe);
                     }
diff --git a/packages/preview-server/src/components/icons/icon-moon.tsx b/packages/preview-server/src/components/icons/icon-moon.tsx
new file mode 100644
index 0000000000..559bb146ee
--- /dev/null
+++ b/packages/preview-server/src/components/icons/icon-moon.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { IconElement, IconProps } from './icon-base';
+import { IconBase } from './icon-base';
+
+export const IconMoon = React.forwardRef<IconElement, Readonly<IconProps>>(
+  ({ ...props }, forwardedRef) => (
+    <IconBase ref={forwardedRef} {...props}>
+      <path
+        fill="currentColor"
+        d="m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3zm3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95zm-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31"
+      />
+    </IconBase>
+  ),
+);
+
+IconMoon.displayName = 'IconMoon';
diff --git a/packages/preview-server/src/components/icons/icon-sun.tsx b/packages/preview-server/src/components/icons/icon-sun.tsx
new file mode 100644
index 0000000000..aab4a61f9f
--- /dev/null
+++ b/packages/preview-server/src/components/icons/icon-sun.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { IconElement, IconProps } from './icon-base';
+import { IconBase } from './icon-base';
+
+export const IconSun = React.forwardRef<IconElement, Readonly<IconProps>>(
+  ({ ...props }, forwardedRef) => (
+    <IconBase ref={forwardedRef} {...props}>
+      <path
+        fill="currentColor"
+        d="m3.55 19.09l1.41 1.41l1.8-1.79l-1.42-1.42M12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6s6-2.69 6-6c0-3.32-2.69-6-6-6m8 7h3v-2h-3m-2.76 7.71l1.8 1.79l1.41-1.41l-1.79-1.8M20.45 5l-1.41-1.4l-1.8 1.79l1.42 1.42M13 1h-2v3h2M6.76 5.39L4.96 3.6L3.55 5l1.79 1.81zM1 13h3v-2H1m12 9h-2v3h2"
+      />
+    </IconBase>
+  ),
+);
+
+IconSun.displayName = 'IconSun';
diff --git a/packages/preview-server/src/components/topbar/theme-toggle-group.tsx b/packages/preview-server/src/components/topbar/theme-toggle-group.tsx
new file mode 100644
index 0000000000..b0a3f7def3
--- /dev/null
+++ b/packages/preview-server/src/components/topbar/theme-toggle-group.tsx
@@ -0,0 +1,84 @@
+import * as ToggleGroup from '@radix-ui/react-toggle-group';
+import { Tooltip } from '../tooltip';
+import { cn } from '../../utils';
+import { motion } from 'framer-motion';
+import { IconMoon } from '../icons/icon-moon';
+import { tabTransition } from '../../utils/constants';
+import { IconSun } from '../icons/icon-sun';
+
+interface ThemeToggleGroupProps {
+  active: 'light' | 'dark';
+  onChange: (theme: 'light' | 'dark') => unknown;
+}
+
+export const ThemeToggleGroup = ({ active, onChange }: ThemeToggleGroupProps) => {
+  return (
+    <ToggleGroup.Root
+      aria-label="Color Scheme"
+      className="inline-block items-center bg-slate-2 border border-slate-6 rounded-md overflow-hidden h-[36px]"
+      id="theme-toggle"
+      onValueChange={(value) => {
+        if (value) onChange(value as 'light' | 'dark');
+      }}
+      type="single"
+      value={active}
+    >
+      <ToggleGroup.Item value="light">
+        <Tooltip>
+          <Tooltip.Trigger asChild>
+            <div
+              className={cn(
+                'relative px-3 py-2 transition duration-200 ease-in-out hover:text-slate-12',
+                {
+                  'text-slate-11': active !== 'light',
+                  'text-slate-12': active === 'light',
+                },
+              )}
+            >
+              {active === 'light' && (
+                <motion.span
+                  animate={{ opacity: 1 }}
+                  className="absolute top-0 right-0 bottom-0 left-0 bg-slate-4"
+                  exit={{ opacity: 0 }}
+                  initial={{ opacity: 0 }}
+                  layoutId="topbar-theme-tabs"
+                  transition={tabTransition}
+                />
+              )}
+              <IconSun />
+            </div>
+          </Tooltip.Trigger>
+          <Tooltip.Content>Light</Tooltip.Content>
+        </Tooltip>
+      </ToggleGroup.Item>
+      <ToggleGroup.Item value="dark">
+        <Tooltip>
+          <Tooltip.Trigger asChild>
+            <div
+              className={cn(
+                'relative px-3 py-2 transition duration-200 ease-in-out hover:text-slate-12',
+                {
+                  'text-slate-11': active !== 'dark',
+                  'text-slate-12': active === 'dark',
+                },
+              )}
+            >
+              {active === 'dark' && (
+                <motion.span
+                  animate={{ opacity: 1 }}
+                  className="absolute top-0 right-0 bottom-0 left-0 bg-slate-4"
+                  exit={{ opacity: 0 }}
+                  initial={{ opacity: 0 }}
+                  layoutId="topbar-theme-tabs"
+                  transition={tabTransition}
+                />
+              )}
+              <IconMoon />
+            </div>
+          </Tooltip.Trigger>
+          <Tooltip.Content>Dark</Tooltip.Content>
+        </Tooltip>
+      </ToggleGroup.Item>
+    </ToggleGroup.Root>
+  );
+};
diff --git a/packages/preview-server/src/hooks/use-iframe-color-scheme.ts b/packages/preview-server/src/hooks/use-iframe-color-scheme.ts
new file mode 100644
index 0000000000..33e05a05c3
--- /dev/null
+++ b/packages/preview-server/src/hooks/use-iframe-color-scheme.ts
@@ -0,0 +1,35 @@
+import * as React from 'react';
+
+export function useIframeColorScheme(
+  iframeRef: React.RefObject<HTMLIFrameElement | null>,
+  theme: string,
+) {
+  React.useEffect(() => {
+    const iframe = iframeRef.current;
+
+    if (!iframe) return;
+
+    // Set on iframe element itself
+    iframe.style.colorScheme = theme;
+
+    // Set on iframe's document if available
+    if (iframe.contentDocument) {
+      iframe.contentDocument.documentElement.style.colorScheme = theme;
+      iframe.contentDocument.body.style.colorScheme = theme;
+    }
+
+    // Ensure styles are applied after it loads
+    const handleLoad = () => {
+      if (iframe.contentDocument) {
+        iframe.contentDocument.documentElement.style.colorScheme = theme;
+        iframe.contentDocument.body.style.colorScheme = theme;
+      }
+    };
+
+    iframe.addEventListener('load', handleLoad);
+
+    return () => {
+      iframe.removeEventListener('load', handleLoad);
+    };
+  }, [theme, iframeRef]);
+}

From 2e946232b2a919ffb0a04201422938e2195ef3e5 Mon Sep 17 00:00:00 2001
From: gabriel miranda <gabrielmfern@outlook.com>
Date: Wed, 15 Oct 2025 16:40:42 -0300
Subject: [PATCH 02/33] fix conflict resolution issues

---
 .../src/app/preview/[...slug]/preview.tsx         |  2 +-
 .../src/components/topbar/theme-toggle-group.tsx  | 15 ++++++++++-----
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/preview-server/src/app/preview/[...slug]/preview.tsx b/packages/preview-server/src/app/preview/[...slug]/preview.tsx
index 1cb68a7f36..ea24ccd0c7 100644
--- a/packages/preview-server/src/app/preview/[...slug]/preview.tsx
+++ b/packages/preview-server/src/app/preview/[...slug]/preview.tsx
@@ -36,7 +36,7 @@ const Preview = ({ emailTitle, className, ...props }: PreviewProps) => {
 
   const activeTheme: 'dark' | 'light' =
     searchParams.get('theme') === 'dark' ? 'dark' : 'light';
-  const activeView = searchParams.get('view') ?? 'desktop';
+  const activeView = searchParams.get('view') ?? 'preview';
   const activeLang = searchParams.get('lang') ?? 'jsx';
 
   const handleThemeChange = (theme: 'dark' | 'light') => {
diff --git a/packages/preview-server/src/components/topbar/theme-toggle-group.tsx b/packages/preview-server/src/components/topbar/theme-toggle-group.tsx
index b0a3f7def3..517f84bc9a 100644
--- a/packages/preview-server/src/components/topbar/theme-toggle-group.tsx
+++ b/packages/preview-server/src/components/topbar/theme-toggle-group.tsx
@@ -1,22 +1,27 @@
 import * as ToggleGroup from '@radix-ui/react-toggle-group';
-import { Tooltip } from '../tooltip';
-import { cn } from '../../utils';
 import { motion } from 'framer-motion';
-import { IconMoon } from '../icons/icon-moon';
+import { useId } from 'react';
+import { cn } from '../../utils';
 import { tabTransition } from '../../utils/constants';
+import { IconMoon } from '../icons/icon-moon';
 import { IconSun } from '../icons/icon-sun';
+import { Tooltip } from '../tooltip';
 
 interface ThemeToggleGroupProps {
   active: 'light' | 'dark';
   onChange: (theme: 'light' | 'dark') => unknown;
 }
 
-export const ThemeToggleGroup = ({ active, onChange }: ThemeToggleGroupProps) => {
+export const ThemeToggleGroup = ({
+  active,
+  onChange,
+}: ThemeToggleGroupProps) => {
+  const id = useId();
   return (
     <ToggleGroup.Root
       aria-label="Color Scheme"
       className="inline-block items-center bg-slate-2 border border-slate-6 rounded-md overflow-hidden h-[36px]"
-      id="theme-toggle"
+      id={id}
       onValueChange={(value) => {
         if (value) onChange(value as 'light' | 'dark');
       }}

From 0e7ae4c2c2a2d171ab7b6bf8e1936115ee14d9dc Mon Sep 17 00:00:00 2001
From: Bu Kinoshita <6929565+bukinoshita@users.noreply.github.com>
Date: Thu, 16 Oct 2025 18:21:27 +0000
Subject: [PATCH 03/33] feat(demo): use Tailwind v4 on all templates (#2487)

Co-authored-by: gabriel miranda <gabrielmfern@outlook.com>
Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>
---
 .../emails/magic-links/aws-verify-email.tsx   | 206 ++---
 .../emails/magic-links/linear-login-code.tsx  | 140 +---
 .../emails/magic-links/notion-magic-link.tsx  | 156 ++--
 .../magic-links/plaid-verify-identity.tsx     | 163 +---
 .../emails/magic-links/raycast-magic-link.tsx | 129 ++-
 .../demo/emails/magic-links/slack-confirm.tsx | 300 +++----
 .../newsletters/codepen-challengers.tsx       | 611 ++++++--------
 .../newsletters/google-play-policy-update.tsx | 304 ++++---
 .../newsletters/stack-overflow-tips.tsx       | 359 +++-----
 .../notifications/github-access-token.tsx     | 134 +--
 .../notifications/yelp-recent-login.tsx       | 226 ++----
 apps/demo/emails/receipts/apple-receipt.tsx   | 764 +++++++-----------
 apps/demo/emails/receipts/nike-receipt.tsx    | 757 ++++++++---------
 .../reset-password/dropbox-reset-password.tsx | 116 ++-
 .../reset-password/twitch-reset-password.tsx  | 205 ++---
 apps/demo/emails/reviews/airbnb-review.tsx    | 241 +++---
 apps/demo/emails/reviews/amazon-review.tsx    | 336 ++++----
 apps/demo/emails/tailwind.config.ts           |  93 +++
 apps/demo/emails/welcome/koala-welcome.tsx    | 121 +--
 apps/demo/emails/welcome/stripe-welcome.tsx   | 222 +++--
 apps/demo/package.json                        |  10 +-
 pnpm-lock.yaml                                | 738 +++++++++++++++--
 22 files changed, 2894 insertions(+), 3437 deletions(-)
 create mode 100644 apps/demo/emails/tailwind.config.ts

diff --git a/apps/demo/emails/magic-links/aws-verify-email.tsx b/apps/demo/emails/magic-links/aws-verify-email.tsx
index ab93659440..8155680ee3 100644
--- a/apps/demo/emails/magic-links/aws-verify-email.tsx
+++ b/apps/demo/emails/magic-links/aws-verify-email.tsx
@@ -9,8 +9,10 @@ import {
   Link,
   Preview,
   Section,
+  Tailwind,
   Text,
 } from '@react-email/components';
+import tailwindConfig from '../tailwind.config';
 
 interface AWSVerifyEmailProps {
   verificationCode?: string;
@@ -26,59 +28,76 @@ export default function AWSVerifyEmail({
   return (
     <Html>
       <Head />
-      <Body style={main}>
-        <Preview>AWS Email Verification</Preview>
-        <Container style={container}>
-          <Section style={coverSection}>
-            <Section style={imageSection}>
-              <Img
-                src={`${baseUrl}/static/aws-logo.png`}
-                width="75"
-                height="45"
-                alt="AWS's Logo"
-              />
-            </Section>
-            <Section style={upperSection}>
-              <Heading style={h1}>Verify your email address</Heading>
-              <Text style={mainText}>
-                Thanks for starting the new AWS account creation process. We
-                want to make sure it's really you. Please enter the following
-                verification code when prompted. If you don&apos;t want to
-                create an account, you can ignore this message.
-              </Text>
-              <Section style={verificationSection}>
-                <Text style={verifyText}>Verification code</Text>
-
-                <Text style={codeText}>{verificationCode}</Text>
-                <Text style={validityText}>
-                  (This code is valid for 10 minutes)
+      <Tailwind config={tailwindConfig}>
+        <Body className="bg-white font-aws text-[#212121]">
+          <Preview>AWS Email Verification</Preview>
+          <Container className="p-5 mx-auto bg-[#eee]">
+            <Section className="bg-white">
+              <Section className="bg-[#252f3d] flex py-5 items-center justify-center">
+                <Img
+                  src={`${baseUrl}/static/aws-logo.png`}
+                  width="75"
+                  height="45"
+                  alt="AWS's Logo"
+                />
+              </Section>
+              <Section className="py-[25px] px-[35px]">
+                <Heading className="text-[#333] text-[20px] font-bold mb-[15px]">
+                  Verify your email address
+                </Heading>
+                <Text className="text-[#333] text-[14px] leading-[24px] mt-6 mb-[14px] mx-0">
+                  Thanks for starting the new AWS account creation process. We
+                  want to make sure it's really you. Please enter the following
+                  verification code when prompted. If you don&apos;t want to
+                  create an account, you can ignore this message.
+                </Text>
+                <Section className="flex items-center justify-center">
+                  <Text className="text-[#333] m-0 font-bold text-center text-[14px]">
+                    Verification code
+                  </Text>
+
+                  <Text className="text-[#333] text-[36px] my-[10px] mx-0 font-bold text-center">
+                    {verificationCode}
+                  </Text>
+                  <Text className="text-[#333] text-[14px] m-0 text-center">
+                    (This code is valid for 10 minutes)
+                  </Text>
+                </Section>
+              </Section>
+              <Hr />
+              <Section className="py-[25px] px-[35px]">
+                <Text className="text-[#333] text-[14px] m-0">
+                  Amazon Web Services will never email you and ask you to
+                  disclose or verify your password, credit card, or banking
+                  account number.
                 </Text>
               </Section>
             </Section>
-            <Hr />
-            <Section style={lowerSection}>
-              <Text style={cautionText}>
-                Amazon Web Services will never email you and ask you to disclose
-                or verify your password, credit card, or banking account number.
-              </Text>
-            </Section>
-          </Section>
-          <Text style={footerText}>
-            This message was produced and distributed by Amazon Web Services,
-            Inc., 410 Terry Ave. North, Seattle, WA 98109. © 2022, Amazon Web
-            Services, Inc.. All rights reserved. AWS is a registered trademark
-            of{' '}
-            <Link href="https://amazon.com" target="_blank" style={link}>
-              Amazon.com
-            </Link>
-            , Inc. View our{' '}
-            <Link href="https://amazon.com" target="_blank" style={link}>
-              privacy policy
-            </Link>
-            .
-          </Text>
-        </Container>
-      </Body>
+            <Text className="text-[#333] text-[12px] my-[24px] mx-0 px-5 py-0">
+              This message was produced and distributed by Amazon Web Services,
+              Inc., 410 Terry Ave. North, Seattle, WA 98109. © 2022, Amazon Web
+              Services, Inc.. All rights reserved. AWS is a registered trademark
+              of{' '}
+              <Link
+                href="https://amazon.com"
+                target="_blank"
+                className="text-[#2754C5] underline text-[14px]"
+              >
+                Amazon.com
+              </Link>
+              , Inc. View our{' '}
+              <Link
+                href="https://amazon.com"
+                target="_blank"
+                className="text-[#2754C5] underline text-[14px]"
+              >
+                privacy policy
+              </Link>
+              .
+            </Text>
+          </Container>
+        </Body>
+      </Tailwind>
     </Html>
   );
 }
@@ -86,90 +105,3 @@ export default function AWSVerifyEmail({
 AWSVerifyEmail.PreviewProps = {
   verificationCode: '596853',
 } satisfies AWSVerifyEmailProps;
-
-const main = {
-  backgroundColor: '#fff',
-  color: '#212121',
-};
-
-const container = {
-  padding: '20px',
-  margin: '0 auto',
-  backgroundColor: '#eee',
-};
-
-const h1 = {
-  color: '#333',
-  fontFamily:
-    "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
-  fontSize: '20px',
-  fontWeight: 'bold',
-  marginBottom: '15px',
-};
-
-const link = {
-  color: '#2754C5',
-  fontFamily:
-    "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
-  fontSize: '14px',
-  textDecoration: 'underline',
-};
-
-const text = {
-  color: '#333',
-  fontFamily:
-    "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
-  fontSize: '14px',
-  margin: '24px 0',
-};
-
-const imageSection = {
-  backgroundColor: '#252f3d',
-  display: 'flex',
-  padding: '20px 0',
-  alignItems: 'center',
-  justifyContent: 'center',
-};
-
-const coverSection = { backgroundColor: '#fff' };
-
-const upperSection = { padding: '25px 35px' };
-
-const lowerSection = { padding: '25px 35px' };
-
-const footerText = {
-  ...text,
-  fontSize: '12px',
-  padding: '0 20px',
-};
-
-const verifyText = {
-  ...text,
-  margin: 0,
-  fontWeight: 'bold',
-  textAlign: 'center' as const,
-};
-
-const codeText = {
-  ...text,
-  fontWeight: 'bold',
-  fontSize: '36px',
-  margin: '10px 0',
-  textAlign: 'center' as const,
-};
-
-const validityText = {
-  ...text,
-  margin: '0px',
-  textAlign: 'center' as const,
-};
-
-const verificationSection = {
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-};
-
-const mainText = { ...text, marginBottom: '14px' };
-
-const cautionText = { ...text, margin: '0px' };
diff --git a/apps/demo/emails/magic-links/linear-login-code.tsx b/apps/demo/emails/magic-links/linear-login-code.tsx
index 6c6265daf6..1e94cb076d 100644
--- a/apps/demo/emails/magic-links/linear-login-code.tsx
+++ b/apps/demo/emails/magic-links/linear-login-code.tsx
@@ -10,8 +10,10 @@ import {
   Link,
   Preview,
   Section,
+  Tailwind,
   Text,
 } from '@react-email/components';
+import tailwindConfig from '../tailwind.config';
 
 interface LinearLoginCodeEmailProps {
   validationCode?: string;
@@ -26,33 +28,46 @@ export const LinearLoginCodeEmail = ({
 }: LinearLoginCodeEmailProps) => (
   <Html>
     <Head />
-    <Body style={main}>
-      <Preview>Your login code for Linear</Preview>
-      <Container style={container}>
-        <Img
-          src={`${baseUrl}/static/linear-logo.png`}
-          width="42"
-          height="42"
-          alt="Linear"
-          style={logo}
-        />
-        <Heading style={heading}>Your login code for Linear</Heading>
-        <Section style={buttonContainer}>
-          <Button style={button} href="https://linear.app">
-            Login to Linear
-          </Button>
-        </Section>
-        <Text style={paragraph}>
-          This link and code will only be valid for the next 5 minutes. If the
-          link does not work, you can use the login verification code directly:
-        </Text>
-        <code style={code}>{validationCode}</code>
-        <Hr style={hr} />
-        <Link href="https://linear.app" style={reportLink}>
-          Linear
-        </Link>
-      </Container>
-    </Body>
+    <Tailwind config={tailwindConfig}>
+      <Body className="bg-white font-linear">
+        <Preview>Your login code for Linear</Preview>
+        <Container className="mx-auto my-0 max-w-[560px] px-0 pt-5 pb-12">
+          <Img
+            src={`${baseUrl}/static/linear-logo.png`}
+            width="42"
+            height="42"
+            alt="Linear"
+            className="rounded-3xl w-[42px] h-[42px]"
+          />
+          <Heading className="text-[24px] tracking-[-0.5px] leading-[1.3] font-normal text-[#484848] pt-[17px] px-0 pb-0">
+            Your login code for Linear
+          </Heading>
+          <Section className="py-[27px] px-0">
+            <Button
+              className="bg-[#5e6ad2] rounded font-semibold text-white text-[15px] no-underline text-center block py-[11px] px-[23px]"
+              href="https://linear.app"
+            >
+              Login to Linear
+            </Button>
+          </Section>
+          <Text className="mb-[15px] mx-0 mt-0 leading-[1.4] text-[15px] text-[#3c4149]">
+            This link and code will only be valid for the next 5 minutes. If the
+            link does not work, you can use the login verification code
+            directly:
+          </Text>
+          <code className="font-mono font-bold px-1 py-px bg-[#dfe1e4] text-[#3c4149] text-[21px] tracking-[-0.3px] rounded">
+            {validationCode}
+          </code>
+          <Hr className="border-[#dfe1e4] mt-[42px] mb-[26px]" />
+          <Link
+            href="https://linear.app"
+            className="text-[#b4becc] text-[14px]"
+          >
+            Linear
+          </Link>
+        </Container>
+      </Body>
+    </Tailwind>
   </Html>
 );
 
@@ -61,74 +76,3 @@ LinearLoginCodeEmail.PreviewProps = {
 } as LinearLoginCodeEmailProps;
 
 export default LinearLoginCodeEmail;
-
-const logo = {
-  borderRadius: 21,
-  width: 42,
-  height: 42,
-};
-
-const main = {
-  backgroundColor: '#ffffff',
-  fontFamily:
-    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
-};
-
-const container = {
-  margin: '0 auto',
-  padding: '20px 0 48px',
-  maxWidth: '560px',
-};
-
-const heading = {
-  fontSize: '24px',
-  letterSpacing: '-0.5px',
-  lineHeight: '1.3',
-  fontWeight: '400',
-  color: '#484848',
-  padding: '17px 0 0',
-};
-
-const paragraph = {
-  margin: '0 0 15px',
-  fontSize: '15px',
-  lineHeight: '1.4',
-  color: '#3c4149',
-};
-
-const buttonContainer = {
-  padding: '27px 0 27px',
-};
-
-const button = {
-  backgroundColor: '#5e6ad2',
-  borderRadius: '3px',
-  fontWeight: '600',
-  color: '#fff',
-  fontSize: '15px',
-  textDecoration: 'none',
-  textAlign: 'center' as const,
-  display: 'block',
-  padding: '11px 23px',
-};
-
-const reportLink = {
-  fontSize: '14px',
-  color: '#b4becc',
-};
-
-const hr = {
-  borderColor: '#dfe1e4',
-  margin: '42px 0 26px',
-};
-
-const code = {
-  fontFamily: 'monospace',
-  fontWeight: '700',
-  padding: '1px 4px',
-  backgroundColor: '#dfe1e4',
-  letterSpacing: '-0.3px',
-  fontSize: '21px',
-  borderRadius: '4px',
-  color: '#3c4149',
-};
diff --git a/apps/demo/emails/magic-links/notion-magic-link.tsx b/apps/demo/emails/magic-links/notion-magic-link.tsx
index 1fe5774d4c..ddbebb400b 100644
--- a/apps/demo/emails/magic-links/notion-magic-link.tsx
+++ b/apps/demo/emails/magic-links/notion-magic-link.tsx
@@ -7,8 +7,10 @@ import {
   Img,
   Link,
   Preview,
+  Tailwind,
   Text,
 } from '@react-email/components';
+import tailwindConfig from '../tailwind.config';
 
 interface NotionMagicLinkEmailProps {
   loginCode?: string;
@@ -23,66 +25,54 @@ export const NotionMagicLinkEmail = ({
 }: NotionMagicLinkEmailProps) => (
   <Html>
     <Head />
-    <Body style={main}>
-      <Preview>Log in with this magic link</Preview>
-      <Container style={container}>
-        <Heading style={h1}>Login</Heading>
-        <Link
-          href="https://notion.so"
-          target="_blank"
-          style={{
-            ...link,
-            display: 'block',
-            marginBottom: '16px',
-          }}
-        >
-          Click here to log in with this magic link
-        </Link>
-        <Text style={{ ...text, marginBottom: '14px' }}>
-          Or, copy and paste this temporary login code:
-        </Text>
-        <code style={code}>{loginCode}</code>
-        <Text
-          style={{
-            ...text,
-            color: '#ababab',
-            marginTop: '14px',
-            marginBottom: '16px',
-          }}
-        >
-          If you didn&apos;t try to login, you can safely ignore this email.
-        </Text>
-        <Text
-          style={{
-            ...text,
-            color: '#ababab',
-            marginTop: '12px',
-            marginBottom: '38px',
-          }}
-        >
-          Hint: You can set a permanent password in Settings & members → My
-          account.
-        </Text>
-        <Img
-          src={`${baseUrl}/static/notion-logo.png`}
-          width="32"
-          height="32"
-          alt="Notion's Logo"
-        />
-        <Text style={footer}>
+    <Tailwind config={tailwindConfig}>
+      <Body className="bg-white font-notion">
+        <Preview>Log in with this magic link</Preview>
+        <Container className="px-3 mx-auto">
+          <Heading className="text-[#333] text-[24px] my-10 mx-0 p-0">
+            Login
+          </Heading>
           <Link
             href="https://notion.so"
             target="_blank"
-            style={{ ...link, color: '#898989' }}
+            className="text-[#2754C5] text-[14px] underline mb-4 block"
           >
-            Notion.so
+            Click here to log in with this magic link
           </Link>
-          , the all-in-one-workspace
-          <br />
-          for your notes, tasks, wikis, and databases.
-        </Text>
-      </Container>
-    </Body>
+          <Text className="text-[#333] text-[14px] my-6 mb-3.5">
+            Or, copy and paste this temporary login code:
+          </Text>
+          <code className="inline-block py-4 px-[4.5%] w-9/10 bg-[#f4f4f4] rounded-md border border-solid border-[#eee] text-[#333]">
+            {loginCode}
+          </code>
+          <Text className="text-[#ababab] text-[14px] mt-3.5 mb-4">
+            If you didn&apos;t try to login, you can safely ignore this email.
+          </Text>
+          <Text className="text-[#ababab] text-[14px] mt-3.5 mb-9.5">
+            Hint: You can set a permanent password in Settings & members → My
+            account.
+          </Text>
+          <Img
+            src={`${baseUrl}/static/notion-logo.png`}
+            width="32"
+            height="32"
+            alt="Notion's Logo"
+          />
+          <Text className="text-[#898989] text-[12px] leading-[22px] mt-3 mb-6">
+            <Link
+              href="https://notion.so"
+              target="_blank"
+              className="text-[#898989] text-[14px] underline"
+            >
+              Notion.so
+            </Link>
+            , the all-in-one-workspace
+            <br />
+            for your notes, tasks, wikis, and databases.
+          </Text>
+        </Container>
+      </Body>
+    </Tailwind>
   </Html>
 );
 
@@ -91,59 +81,3 @@ NotionMagicLinkEmail.PreviewProps = {
 } as NotionMagicLinkEmailProps;
 
 export default NotionMagicLinkEmail;
-
-const main = {
-  backgroundColor: '#ffffff',
-};
-
-const container = {
-  paddingLeft: '12px',
-  paddingRight: '12px',
-  margin: '0 auto',
-};
-
-const h1 = {
-  color: '#333',
-  fontFamily:
-    "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
-  fontSize: '24px',
-  fontWeight: 'bold',
-  margin: '40px 0',
-  padding: '0',
-};
-
-const link = {
-  color: '#2754C5',
-  fontFamily:
-    "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
-  fontSize: '14px',
-  textDecoration: 'underline',
-};
-
-const text = {
-  color: '#333',
-  fontFamily:
-    "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
-  fontSize: '14px',
-  margin: '24px 0',
-};
-
-const footer = {
-  color: '#898989',
-  fontFamily:
-    "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
-  fontSize: '12px',
-  lineHeight: '22px',
-  marginTop: '12px',
-  marginBottom: '24px',
-};
-
-const code = {
-  display: 'inline-block',
-  padding: '16px 4.5%',
-  width: '90.5%',
-  backgroundColor: '#f4f4f4',
-  borderRadius: '5px',
-  border: '1px solid #eee',
-  color: '#333',
-};
diff --git a/apps/demo/emails/magic-links/plaid-verify-identity.tsx b/apps/demo/emails/magic-links/plaid-verify-identity.tsx
index cd967538d3..1be7fe2b58 100644
--- a/apps/demo/emails/magic-links/plaid-verify-identity.tsx
+++ b/apps/demo/emails/magic-links/plaid-verify-identity.tsx
@@ -7,8 +7,10 @@ import {
   Img,
   Link,
   Section,
+  Tailwind,
   Text,
 } from '@react-email/components';
+import tailwindConfig from '../tailwind.config';
 
 interface PlaidVerifyIdentityEmailProps {
   validationCode?: string;
@@ -23,33 +25,46 @@ export const PlaidVerifyIdentityEmail = ({
 }: PlaidVerifyIdentityEmailProps) => (
   <Html>
     <Head />
-    <Body style={main}>
-      <Container style={container}>
-        <Img
-          src={`${baseUrl}/static/plaid-logo.png`}
-          width="212"
-          height="88"
-          alt="Plaid"
-          style={logo}
-        />
-        <Text style={tertiary}>Verify Your Identity</Text>
-        <Heading style={secondary}>
-          Enter the following code to finish linking Venmo.
-        </Heading>
-        <Section style={codeContainer}>
-          <Text style={code}>{validationCode}</Text>
-        </Section>
-        <Text style={paragraph}>Not expecting this email?</Text>
-        <Text style={paragraph}>
-          Contact{' '}
-          <Link href="mailto:login@plaid.com" style={link}>
-            login@plaid.com
-          </Link>{' '}
-          if you did not request this code.
+    <Tailwind config={tailwindConfig}>
+      <Body className="bg-white font-plaid">
+        <Container className="bg-white border border-solid border-[#eee] rounded shadow-[rgba(20,50,70,.2)] shadow-md mt-5 max-w-[360px] mx-auto my-0 pt-[68px] px-0 pb-[130px]">
+          <Img
+            src={`${baseUrl}/static/plaid-logo.png`}
+            width="212"
+            height="88"
+            alt="Plaid"
+            className="mx-auto my-0"
+          />
+          <Text className="text-[#0a85ea] text-[11px] font-bold h-4 tracking-[0] leading-[16px] mt-4 mb-2 mx-2 uppercase text-center">
+            Verify Your Identity
+          </Text>
+          <Heading className="text-black font-medium font-[HelveticaNeue-Medium,Helvetica,Arial,sans-serif] inline-block text-[20px] leading-[24px] my-0 text-center">
+            Enter the following code to finish linking Venmo.
+          </Heading>
+          <Section className="bg-[rgba(0,0,0,.05)] rounded mx-auto font-[HelveticaNeue-Bold] mt-4 mb-3.5 align-middle w-[280px]">
+            <Text className="text-black text-[32px] font-bold tracking-[6px] leading-10 py-2 mx-auto my-0 block text-center">
+              {validationCode}
+            </Text>
+          </Section>
+          <Text className="text-[#444] text-[15px] leading-[23px] tracking-[0] py-0 px-10 m-0 text-center">
+            Not expecting this email?
+          </Text>
+          <Text className="text-[#444] text-[15px] leading-[23px] tracking-[0] py-0 px-10 m-0 text-center">
+            Contact{' '}
+            <Link
+              href="mailto:login@plaid.com"
+              className="text-[#444] underline"
+            >
+              login@plaid.com
+            </Link>{' '}
+            if you did not request this code.
+          </Text>
+        </Container>
+        <Text className="text-black text-xs font-extrabold tracking-[0] leading-[23px] m-0 mt-5 text-center uppercase">
+          Securely powered by Plaid.
         </Text>
-      </Container>
-      <Text style={footer}>Securely powered by Plaid.</Text>
-    </Body>
+      </Body>
+    </Tailwind>
   </Html>
 );
 
@@ -58,99 +73,3 @@ PlaidVerifyIdentityEmail.PreviewProps = {
 } as PlaidVerifyIdentityEmailProps;
 
 export default PlaidVerifyIdentityEmail;
-
-const main = {
-  backgroundColor: '#ffffff',
-  fontFamily: 'HelveticaNeue,Helvetica,Arial,sans-serif',
-};
-
-const container = {
-  backgroundColor: '#ffffff',
-  border: '1px solid #eee',
-  borderRadius: '5px',
-  boxShadow: '0 5px 10px rgba(20,50,70,.2)',
-  marginTop: '20px',
-  maxWidth: '360px',
-  margin: '0 auto',
-  padding: '68px 0 130px',
-};
-
-const logo = {
-  margin: '0 auto',
-};
-
-const tertiary = {
-  color: '#0a85ea',
-  fontSize: '11px',
-  fontWeight: 700,
-  fontFamily: 'HelveticaNeue,Helvetica,Arial,sans-serif',
-  height: '16px',
-  letterSpacing: '0',
-  lineHeight: '16px',
-  margin: '16px 8px 8px 8px',
-  textTransform: 'uppercase' as const,
-  textAlign: 'center' as const,
-};
-
-const secondary = {
-  color: '#000',
-  display: 'inline-block',
-  fontFamily: 'HelveticaNeue-Medium,Helvetica,Arial,sans-serif',
-  fontSize: '20px',
-  fontWeight: 500,
-  lineHeight: '24px',
-  marginBottom: '0',
-  marginTop: '0',
-  textAlign: 'center' as const,
-};
-
-const codeContainer = {
-  background: 'rgba(0,0,0,.05)',
-  borderRadius: '4px',
-  margin: '16px auto 14px',
-  verticalAlign: 'middle',
-  width: '280px',
-};
-
-const code = {
-  color: '#000',
-  fontFamily: 'HelveticaNeue-Bold',
-  fontSize: '32px',
-  fontWeight: 700,
-  letterSpacing: '6px',
-  lineHeight: '40px',
-  paddingBottom: '8px',
-  paddingTop: '8px',
-  margin: '0 auto',
-  display: 'block',
-  textAlign: 'center' as const,
-};
-
-const paragraph = {
-  color: '#444',
-  fontSize: '15px',
-  fontFamily: 'HelveticaNeue,Helvetica,Arial,sans-serif',
-  letterSpacing: '0',
-  lineHeight: '23px',
-  padding: '0 40px',
-  margin: '0',
-  textAlign: 'center' as const,
-};
-
-const link = {
-  color: '#444',
-  textDecoration: 'underline',
-};
-
-const footer = {
-  color: '#000',
-  fontSize: '12px',
-  fontWeight: 800,
-  letterSpacing: '0',
-  lineHeight: '23px',
-  margin: '0',
-  marginTop: '20px',
-  fontFamily: 'HelveticaNeue,Helvetica,Arial,sans-serif',
-  textAlign: 'center' as const,
-  textTransform: 'uppercase' as const,
-};
diff --git a/apps/demo/emails/magic-links/raycast-magic-link.tsx b/apps/demo/emails/magic-links/raycast-magic-link.tsx
index 5a8e7c1b4e..1d091f0d1c 100644
--- a/apps/demo/emails/magic-links/raycast-magic-link.tsx
+++ b/apps/demo/emails/magic-links/raycast-magic-link.tsx
@@ -9,8 +9,10 @@ import {
   Link,
   Preview,
   Section,
+  Tailwind,
   Text,
 } from '@react-email/components';
+import tailwindConfig from '../tailwind.config';
 
 interface RaycastMagicLinkEmailProps {
   magicLink?: string;
@@ -25,47 +27,52 @@ export const RaycastMagicLinkEmail = ({
 }: RaycastMagicLinkEmailProps) => (
   <Html>
     <Head />
-    <Body style={main}>
-      <Preview>Log in with this magic link.</Preview>
-      <Container style={container}>
-        <Img
-          src={`${baseUrl}/static/raycast-logo.png`}
-          width={48}
-          height={48}
-          alt="Raycast"
-        />
-        <Heading style={heading}>🪄 Your magic link</Heading>
-        <Section style={body}>
-          <Text style={paragraph}>
-            <Link style={link} href={magicLink}>
-              👉 Click here to sign in 👈
-            </Link>
+    <Tailwind config={tailwindConfig}>
+      <Body className="bg-white font-raycast">
+        <Preview>Log in with this magic link.</Preview>
+        <Container className="mx-auto my-0 pt-5 px-[25px] pb-12 bg-[url('/static/raycast-bg.png')] [background-position:bottom] [background-repeat:no-repeat]">
+          <Img
+            src={`${baseUrl}/static/raycast-logo.png`}
+            width={48}
+            height={48}
+            alt="Raycast"
+          />
+          <Heading className="text-[28px] font-bold mt-12">
+            🪄 Your magic link
+          </Heading>
+          <Section className="my-6 mx-0">
+            <Text className="text-base leading-6.5">
+              <Link className="text-[#FF6363]" href={magicLink}>
+                👉 Click here to sign in 👈
+              </Link>
+            </Text>
+            <Text className="text-base leading-6.5">
+              If you didn't request this, please ignore this email.
+            </Text>
+          </Section>
+          <Text className="text-base leading-6.5">
+            Best,
+            <br />- Raycast Team
           </Text>
-          <Text style={paragraph}>
-            If you didn't request this, please ignore this email.
+          <Hr className="border-[#dddddd] mt-12" />
+          <Img
+            src={`${baseUrl}/static/raycast-logo.png`}
+            width={32}
+            height={32}
+            style={{
+              WebkitFilter: 'grayscale(100%)',
+            }}
+            className="[filter:grayscale(100%)] my-5 mx-0"
+          />
+          <Text className="text-[#8898aa] text-xs leading-6 ml-1">
+            Raycast Technologies Inc.
           </Text>
-        </Section>
-        <Text style={paragraph}>
-          Best,
-          <br />- Raycast Team
-        </Text>
-        <Hr style={hr} />
-        <Img
-          src={`${baseUrl}/static/raycast-logo.png`}
-          width={32}
-          height={32}
-          style={{
-            WebkitFilter: 'grayscale(100%)',
-            filter: 'grayscale(100%)',
-            margin: '20px 0',
-          }}
-        />
-        <Text style={footer}>Raycast Technologies Inc.</Text>
-        <Text style={footer}>
-          2093 Philadelphia Pike #3222, Claymont, DE 19703
-        </Text>
-      </Container>
-    </Body>
+          <Text className="text-[#8898aa] text-xs leading-6 ml-1">
+            2093 Philadelphia Pike #3222, Claymont, DE 19703
+          </Text>
+        </Container>
+      </Body>
+    </Tailwind>
   </Html>
 );
 
@@ -74,47 +81,3 @@ RaycastMagicLinkEmail.PreviewProps = {
 } as RaycastMagicLinkEmailProps;
 
 export default RaycastMagicLinkEmail;
-
-const main = {
-  backgroundColor: '#ffffff',
-  fontFamily:
-    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
-};
-
-const container = {
-  margin: '0 auto',
-  padding: '20px 25px 48px',
-  backgroundImage: 'url("/static/raycast-bg.png")',
-  backgroundPosition: 'bottom',
-  backgroundRepeat: 'no-repeat, no-repeat',
-};
-
-const heading = {
-  fontSize: '28px',
-  fontWeight: 'bold',
-  marginTop: '48px',
-};
-
-const body = {
-  margin: '24px 0',
-};
-
-const paragraph = {
-  fontSize: '16px',
-  lineHeight: '26px',
-};
-
-const link = {
-  color: '#FF6363',
-};
-
-const hr = {
-  borderColor: '#dddddd',
-  marginTop: '48px',
-};
-
-const footer = {
-  color: '#8898aa',
-  fontSize: '12px',
-  marginLeft: '4px',
-};
diff --git a/apps/demo/emails/magic-links/slack-confirm.tsx b/apps/demo/emails/magic-links/slack-confirm.tsx
index a9269416ac..01c3a7f546 100644
--- a/apps/demo/emails/magic-links/slack-confirm.tsx
+++ b/apps/demo/emails/magic-links/slack-confirm.tsx
@@ -10,8 +10,10 @@ import {
   Preview,
   Row,
   Section,
+  Tailwind,
   Text,
 } from '@react-email/components';
+import tailwindConfig from '../tailwind.config';
 
 interface SlackConfirmEmailProps {
   validationCode?: string;
@@ -26,121 +28,127 @@ export const SlackConfirmEmail = ({
 }: SlackConfirmEmailProps) => (
   <Html>
     <Head />
-    <Body style={main}>
-      <Preview>Confirm your email address</Preview>
-      <Container style={container}>
-        <Section style={logoContainer}>
-          <Img
-            src={`${baseUrl}/static/slack-logo.png`}
-            width="120"
-            height="36"
-            alt="Slack"
-          />
-        </Section>
-        <Heading style={h1}>Confirm your email address</Heading>
-        <Text style={heroText}>
-          Your confirmation code is below - enter it in your open browser window
-          and we'll help you get signed in.
-        </Text>
+    <Tailwind config={tailwindConfig}>
+      <Body className="bg-white font-slack mx-auto my-0">
+        <Preview>Confirm your email address</Preview>
+        <Container className="mx-auto my-0 py-0 px-5">
+          <Section className="mt-8">
+            <Img
+              src={`${baseUrl}/static/slack-logo.png`}
+              width="120"
+              height="36"
+              alt="Slack"
+            />
+          </Section>
+          <Heading className="text-[#1d1c1d] text-4xl font-bold my-[30px] mx-0 p-0 leading-[42px]">
+            Confirm your email address
+          </Heading>
+          <Text className="text-xl mb-7.5">
+            Your confirmation code is below - enter it in your open browser
+            window and we'll help you get signed in.
+          </Text>
 
-        <Section style={codeBox}>
-          <Text style={confirmationCodeText}>{validationCode}</Text>
-        </Section>
+          <Section className="bg-[rgb(245,244,245)] rounded mb-[30px] py-10 px-[10px]">
+            <Text className="text-3xl leading-[24px] text-center align-middle">
+              {validationCode}
+            </Text>
+          </Section>
 
-        <Text style={text}>
-          If you didn't request this email, there's nothing to worry about, you
-          can safely ignore it.
-        </Text>
+          <Text className="text-black text-sm leading-6">
+            If you didn't request this email, there's nothing to worry about,
+            you can safely ignore it.
+          </Text>
 
-        <Section>
-          <Row style={footerLogos}>
-            <Column style={{ width: '66%' }}>
-              <Img
-                src={`${baseUrl}/static/slack-logo.png`}
-                width="120"
-                height="36"
-                alt="Slack"
-              />
-            </Column>
-            <Column align="right">
-              <Link href="/">
-                <Img
-                  src={`${baseUrl}/static/slack-twitter.png`}
-                  width="32"
-                  height="32"
-                  alt="Slack"
-                  style={socialMediaIcon}
-                />
-              </Link>
-              <Link href="/">
+          <Section>
+            <Row className="mb-8 pl-2 pr-2">
+              <Column className="w-2/3">
                 <Img
-                  src={`${baseUrl}/static/slack-facebook.png`}
-                  width="32"
-                  height="32"
+                  src={`${baseUrl}/static/slack-logo.png`}
+                  width="120"
+                  height="36"
                   alt="Slack"
-                  style={socialMediaIcon}
                 />
-              </Link>
-              <Link href="/">
-                <Img
-                  src={`${baseUrl}/static/slack-linkedin.png`}
-                  width="32"
-                  height="32"
-                  alt="Slack"
-                  style={socialMediaIcon}
-                />
-              </Link>
-            </Column>
-          </Row>
-        </Section>
-
-        <Section>
-          <Link
-            style={footerLink}
-            href="https://slackhq.com"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Our blog
-          </Link>
-          &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
-          <Link
-            style={footerLink}
-            href="https://slack.com/legal"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Policies
-          </Link>
-          &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
-          <Link
-            style={footerLink}
-            href="https://slack.com/help"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Help center
-          </Link>
-          &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
-          <Link
-            style={footerLink}
-            href="https://slack.com/community"
-            target="_blank"
-            rel="noopener noreferrer"
-            data-auth="NotApplicable"
-            data-linkindex="6"
-          >
-            Slack Community
-          </Link>
-          <Text style={footerText}>
-            ©2022 Slack Technologies, LLC, a Salesforce company. <br />
-            500 Howard Street, San Francisco, CA 94105, USA <br />
-            <br />
-            All rights reserved.
-          </Text>
-        </Section>
-      </Container>
-    </Body>
+              </Column>
+              <Column align="right">
+                <Link href="/">
+                  <Img
+                    src={`${baseUrl}/static/slack-twitter.png`}
+                    width="32"
+                    height="32"
+                    alt="Slack"
+                    className="inline ml-2"
+                  />
+                </Link>
+                <Link href="/">
+                  <Img
+                    src={`${baseUrl}/static/slack-facebook.png`}
+                    width="32"
+                    height="32"
+                    alt="Slack"
+                    className="inline ml-2"
+                  />
+                </Link>
+                <Link href="/">
+                  <Img
+                    src={`${baseUrl}/static/slack-linkedin.png`}
+                    width="32"
+                    height="32"
+                    alt="Slack"
+                    className="inline ml-2"
+                  />
+                </Link>
+              </Column>
+            </Row>
+          </Section>
+
+          <Section>
+            <Link
+              className="text-[#b7b7b7] underline"
+              href="https://slackhq.com"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Our blog
+            </Link>
+            &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+            <Link
+              className="text-[#b7b7b7] underline"
+              href="https://slack.com/legal"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Policies
+            </Link>
+            &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+            <Link
+              className="text-[#b7b7b7] underline"
+              href="https://slack.com/help"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Help center
+            </Link>
+            &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+            <Link
+              className="text-[#b7b7b7] underline"
+              href="https://slack.com/community"
+              target="_blank"
+              rel="noopener noreferrer"
+              data-auth="NotApplicable"
+              data-linkindex="6"
+            >
+              Slack Community
+            </Link>
+            <Text className="text-xs leading-[15px] text-left mb-[50px] text-[#b7b7b7]">
+              ©2022 Slack Technologies, LLC, a Salesforce company. <br />
+              500 Howard Street, San Francisco, CA 94105, USA <br />
+              <br />
+              All rights reserved.
+            </Text>
+          </Section>
+        </Container>
+      </Body>
+    </Tailwind>
   </Html>
 );
 
@@ -149,77 +157,3 @@ SlackConfirmEmail.PreviewProps = {
 } as SlackConfirmEmailProps;
 
 export default SlackConfirmEmail;
-
-const footerText = {
-  fontSize: '12px',
-  color: '#b7b7b7',
-  lineHeight: '15px',
-  textAlign: 'left' as const,
-  marginBottom: '50px',
-};
-
-const footerLink = {
-  color: '#b7b7b7',
-  textDecoration: 'underline',
-};
-
-const footerLogos = {
-  marginBottom: '32px',
-  paddingLeft: '8px',
-  paddingRight: '8px',
-};
-
-const socialMediaIcon = {
-  display: 'inline',
-  marginLeft: '8px',
-};
-
-const main = {
-  backgroundColor: '#ffffff',
-  margin: '0 auto',
-  fontFamily:
-    "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
-};
-
-const container = {
-  margin: '0 auto',
-  padding: '0px 20px',
-};
-
-const logoContainer = {
-  marginTop: '32px',
-};
-
-const h1 = {
-  color: '#1d1c1d',
-  fontSize: '36px',
-  fontWeight: '700',
-  margin: '30px 0',
-  padding: '0',
-  lineHeight: '42px',
-};
-
-const heroText = {
-  fontSize: '20px',
-  lineHeight: '28px',
-  marginBottom: '30px',
-};
-
-const codeBox = {
-  background: 'rgb(245, 244, 245)',
-  borderRadius: '4px',
-  marginBottom: '30px',
-  padding: '40px 10px',
-};
-
-const confirmationCodeText = {
-  fontSize: '30px',
-  textAlign: 'center' as const,
-  verticalAlign: 'middle',
-};
-
-const text = {
-  color: '#000',
-  fontSize: '14px',
-  lineHeight: '24px',
-};
diff --git a/apps/demo/emails/newsletters/codepen-challengers.tsx b/apps/demo/emails/newsletters/codepen-challengers.tsx
index d72e903041..af35271c89 100644
--- a/apps/demo/emails/newsletters/codepen-challengers.tsx
+++ b/apps/demo/emails/newsletters/codepen-challengers.tsx
@@ -11,8 +11,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}`
@@ -21,398 +23,263 @@ const baseUrl = process.env.VERCEL_URL
 export const CodepenChallengersEmail = () => (
   <Html>
     <Head />
-    <Body style={main}>
-      <Preview>#CodePenChallenge: Cubes</Preview>
-      <Section style={header}>
-        <Img
-          style={imgHeader}
-          src={`${baseUrl}/static/codepen-challengers.png`}
-          width={600}
-          alt="codepen"
-        />
-      </Section>
-      <Container style={container}>
-        <Text style={challengeLink}>
-          <Link style={link}>View this Challenge on CodePen</Link>
-        </Text>
-
-        <Heading style={heading}>
-          <strong>This week:</strong> #CodePenChallenge:{' '}
-          <Text style={cubeText}>Cubes</Text>
-        </Heading>
-
-        <Section style={section}>
-          <Text style={text}>The Shape challenge continues!</Text>
-
-          <Text style={text}>
-            Last week, we kicked things off with round shapes. We "rounded" up
-            the Pens from week one in our{' '}
-            <Link style={blueLink}>#CodePenChallenge: Round</Link> collection.
+    <Tailwind config={tailwindConfig}>
+      <Body className="font-codepen bg-[#505050] m-0">
+        <Preview>#CodePenChallenge: Cubes</Preview>
+        <Section className="w-full bg-[#191919] m-0 mx-auto pb-[30px] z-[999]">
+          <Img
+            className="mx-auto max-w-full"
+            src={`${baseUrl}/static/codepen-challengers.png`}
+            width={600}
+            alt="codepen"
+          />
+        </Section>
+        <Container className="mx-auto w-[648px] max-w-full relative">
+          <Text className="bg-[#505050] text-center py-[10px] text-[13px] absolute w-[648px] max-w-full top-[-28px] m-0 mb-4">
+            <Link className="text-white cursor-pointer">
+              View this Challenge on CodePen
+            </Link>
           </Text>
 
-          <Text style={text}>This week, we move on to cubes 🧊</Text>
+          <Heading className="bg-[#f0d361] p-[30px] text-[#191919] font-normal mb-0">
+            <strong>This week:</strong> #CodePenChallenge:{' '}
+            <Text className="text-[32px] mt-1 mb-0">Cubes</Text>
+          </Heading>
+
+          <Section className="m-0 bg-white py-0 px-6">
+            <Text className="text-base">The Shape challenge continues!</Text>
+
+            <Text className="text-base">
+              Last week, we kicked things off with round shapes. We "rounded" up
+              the Pens from week one in our{' '}
+              <Link className="text-[#15c] cursor-pointer">
+                #CodePenChallenge: Round
+              </Link>{' '}
+              collection.
+            </Text>
 
-          <Text style={text}>
-            Creating cubes in the browser is all about mastery of illusion. Take
-            control of perspective and shadows and you can make the magic of 3D
-            on a flat screen 🧙
-          </Text>
+            <Text className="text-base">This week, we move on to cubes 🧊</Text>
 
-          <Text style={text}>
-            This week is a fun chance to work on your CSS shape-building skills,
-            or dig into a 3D JavaScript library like Three.js.
-          </Text>
+            <Text className="text-base">
+              Creating cubes in the browser is all about mastery of illusion.
+              Take control of perspective and shadows and you can make the magic
+              of 3D on a flat screen 🧙
+            </Text>
 
-          <Text style={text}>
-            This week's starter template features an ice cube emoji to help
-            inspire a "cool" idea for your Pen. As always, the template is just
-            as jumping off point. Feel free to incorporate the 🧊 in your
-            creation, add more elements, or freeze it out completely and start
-            over from scratch!
-          </Text>
+            <Text className="text-base">
+              This week is a fun chance to work on your CSS shape-building
+              skills, or dig into a 3D JavaScript library like Three.js.
+            </Text>
 
-          <Text style={yourChallenge}>
-            💪 <strong>Your Challenge:</strong>{' '}
-            <Link style={blueLink}>
-              create a Pen that includes cube shapes.
-            </Link>
-          </Text>
+            <Text className="text-base">
+              This week's starter template features an ice cube emoji to help
+              inspire a "cool" idea for your Pen. As always, the template is
+              just as jumping off point. Feel free to incorporate the 🧊 in your
+              creation, add more elements, or freeze it out completely and start
+              over from scratch!
+            </Text>
 
-          <Img
-            style={imgCube}
-            src={`${baseUrl}/static/codepen-cube.png`}
-            width={600}
-            alt="codepen"
-          />
+            <Text className="text-base border-[6px] border-solid border-[#ebd473] p-5 m-0 mb-10">
+              💪 <strong>Your Challenge:</strong>{' '}
+              <Link className="text-[#15c] cursor-pointer">
+                create a Pen that includes cube shapes.
+              </Link>
+            </Text>
 
-          <Section style={sectionPro}>
             <Img
-              style={imagePro}
-              src={`${baseUrl}/static/codepen-pro.png`}
-              width={250}
+              className="max-w-full"
+              src={`${baseUrl}/static/codepen-cube.png`}
+              width={600}
               alt="codepen"
             />
 
-            <Text>
-              CodePen PRO combines a bunch of features that can help any
-              front-end designer or developer at any experience level.
-            </Text>
-
-            <Button style={button}>
-              <strong>Learn More</strong>
-            </Button>
+            <Section className="mt-10 mb-6 text-center bg-[#0b112a] text-white pt-[35px] pb-[30px] px-5 border-[6px] border-solid border-[#2138c6]">
+              <Img
+                className="mx-auto mb-[30px]"
+                src={`${baseUrl}/static/codepen-pro.png`}
+                width={250}
+                alt="codepen"
+              />
+
+              <Text>
+                CodePen PRO combines a bunch of features that can help any
+                front-end designer or developer at any experience level.
+              </Text>
+
+              <Button className="bg-[#2138c6] text-white border-0 text-[15px] leading-[18px] cursor-pointer rounded p-3">
+                <strong>Learn More</strong>
+              </Button>
+            </Section>
           </Section>
-        </Section>
-
-        <Text style={yellowSection}>
-          <strong>To participate:</strong>{' '}
-          <Link style={blueLink}>Create a Pen →</Link> and tag it{' '}
-          <Link style={blueLink}>
-            <strong>codepenchallenge</strong>
-          </Link>{' '}
-          and
-          <Link style={blueLink}>
-            {' '}
-            <strong>cpc-cubes</strong>
-          </Link>
-          . We'll be watching and gathering the Pens into a Collection, and
-          sharing on <Link style={blueLink}>Twitter</Link> and{' '}
-          <Link style={blueLink}>Instagram</Link> (Use the #CodePenChallenge tag
-          on Twitter and Instagram as well).
-        </Text>
 
-        <Section style={section}>
-          <Row>
-            <Column style={ideas}>
-              <Text style={ideasTitle}>IDEAS!</Text>
-
-              <Section style={yellowCard}>
-                🌟
-                <Text style={textCard}>
-                  This week we move from 2 dimensions to three! Maybe you could
-                  exercise your <Link style={blueLink}>perspective</Link> in CSS
-                  to create a 3D cube. Or, you can try out creating 3D shapes in
-                  JavaScript, using <Link style={blueLink}>WebGL</Link> or
-                  building a <Link style={blueLink}>Three.js scene</Link>.
-                </Text>
-              </Section>
-
-              <Section style={yellowCard}>
-                🌟
-                <Text style={textCard}>
-                  There's more to cubes than just six square sides. There are
-                  variations on the cube that could be fun to play with this
-                  week: <Link style={blueLink}>cuboid shapes</Link> are
-                  hexahedrons with faces that aren't always squares. And if you
-                  want to really push the boundaries of shape, consider the 4
-                  dimensional <Link style={blueLink}>tesseract!</Link>
-                </Text>
-              </Section>
-
-              <Section style={yellowCard}>
-                🌟
-                <Text style={textCard}>
-                  Here's a mind-bending idea that can combine the round shapes
-                  from week one with this week's cube theme:{' '}
-                  <Link style={blueLink}>Spherical Cubes</Link> 😳 Solving
-                  longstanding mathematical mysteries is probably outside the
-                  scope of a CodePen challenge, but you could use front-end
-                  tools to explore fitting spheres into cubes, or vice-versa.
-                </Text>
-              </Section>
-            </Column>
-            <Column style={resources}>
-              <Text style={resourcesTitle}>RESOURCES!</Text>
-
-              <Section style={blueCard}>
-                📖
-                <Text style={textCard}>
-                  Learn all about{' '}
-                  <Link style={blueLink}>How CSS Perspective Works</Link> and
-                  how to build a 3D CSS cube from scratch in Amit Sheen's
-                  in-depth tutorial for CSS-Tricks. Or, check out stunning
-                  examples of WebGL cubes from Matthias Hurrle:{' '}
-                  <Link style={blueLink}>Just Ice</Link> and{' '}
-                  <Link style={blueLink}>Posing</Link>.
-                </Text>
-              </Section>
+          <Text className="bg-[#f5d247] p-[30px] text-lg leading-[1.5]">
+            <strong>To participate:</strong>{' '}
+            <Link className="text-[#15c] cursor-pointer">Create a Pen →</Link>{' '}
+            and tag it{' '}
+            <Link className="text-[#15c] cursor-pointer">
+              <strong>codepenchallenge</strong>
+            </Link>{' '}
+            and
+            <Link className="text-[#15c] cursor-pointer">
+              {' '}
+              <strong>cpc-cubes</strong>
+            </Link>
+            . We'll be watching and gathering the Pens into a Collection, and
+            sharing on{' '}
+            <Link className="text-[#15c] cursor-pointer">Twitter</Link> and{' '}
+            <Link className="text-[#15c] cursor-pointer">Instagram</Link> (Use
+            the #CodePenChallenge tag on Twitter and Instagram as well).
+          </Text>
 
-              <Section style={blueCard}>
-                📖
-                <Text style={textCard}>
-                  Want to go beyond the square cube? Draw inspiration from
-                  EntropyReversed's{' '}
-                  <Link style={blueLink}>Pulsating Tesseract</Link>, Josetxu's{' '}
-                  <Link style={blueLink}>Rainbow Cuboid Loader</Link>, or Ana
-                  Tudor's{' '}
-                  <Link style={blueLink}>Pure CSS cuboid jellyfish</Link>.
+          <Section className="m-0 bg-white px-6">
+            <Row>
+              <Column className="w-1/2 pr-[10px]">
+                <Text className="font-black text-lg leading-[1.1]">IDEAS!</Text>
+
+                <Section className="p-5 m-0 mb-5 rounded-[10px] text-[36px] text-center bg-[#fff4c8] border border-solid border-[#f4d247]">
+                  🌟
+                  <Text className="text-[13px] text-left">
+                    This week we move from 2 dimensions to three! Maybe you
+                    could exercise your{' '}
+                    <Link className="text-[#15c] cursor-pointer">
+                      perspective
+                    </Link>{' '}
+                    in CSS to create a 3D cube. Or, you can try out creating 3D
+                    shapes in JavaScript, using{' '}
+                    <Link className="text-[#15c] cursor-pointer">WebGL</Link> or
+                    building a{' '}
+                    <Link className="text-[#15c] cursor-pointer">
+                      Three.js scene
+                    </Link>
+                    .
+                  </Text>
+                </Section>
+
+                <Section className="p-5 m-0 mb-5 rounded-[10px] text-[36px] text-center bg-[#fff4c8] border border-solid border-[#f4d247]">
+                  🌟
+                  <Text className="text-[13px] text-left">
+                    There's more to cubes than just six square sides. There are
+                    variations on the cube that could be fun to play with this
+                    week:{' '}
+                    <Link className="text-[#15c] cursor-pointer">
+                      cuboid shapes
+                    </Link>{' '}
+                    are hexahedrons with faces that aren't always squares. And
+                    if you want to really push the boundaries of shape, consider
+                    the 4 dimensional{' '}
+                    <Link className="text-[#15c] cursor-pointer">
+                      tesseract!
+                    </Link>
+                  </Text>
+                </Section>
+
+                <Section className="p-5 m-0 mb-5 rounded-[10px] text-[36px] text-center bg-[#fff4c8] border border-solid border-[#f4d247]">
+                  🌟
+                  <Text className="text-[13px] text-left">
+                    Here's a mind-bending idea that can combine the round shapes
+                    from week one with this week's cube theme:{' '}
+                    <Link className="text-[#15c] cursor-pointer">
+                      Spherical Cubes
+                    </Link>{' '}
+                    😳 Solving longstanding mathematical mysteries is probably
+                    outside the scope of a CodePen challenge, but you could use
+                    front-end tools to explore fitting spheres into cubes, or
+                    vice-versa.
+                  </Text>
+                </Section>
+              </Column>
+              <Column className="w-1/2 pl-[10px]">
+                <Text className="font-black -mt-10 text-lg leading-[1.1]">
+                  RESOURCES!
                 </Text>
-              </Section>
 
-              <Section style={blueCard}>
-                📖
-                <Text style={textCard}>
-                  Did that spherical cubes concept pique your interest? Explore
-                  Ryan Mulligan's <Link style={blueLink}>Cube Sphere</Link>,
-                  Munir Safi's{' '}
-                  <Link style={blueLink}>
-                    3D Sphere to Cube Animation With Virtual Trackball
-                  </Link>{' '}
-                  and Ana Tudor's{' '}
-                  <Link style={blueLink}>Infinitely unpack prism</Link> for more
-                  mindbending cube concepts that test the boundaries of how
-                  shapes interact with each other.
-                </Text>
-              </Section>
-            </Column>
-          </Row>
-        </Section>
+                <Section className="p-5 m-0 mb-5 rounded-[10px] text-[36px] text-center bg-[#d9f6ff] border border-solid border-[#92bfd0]">
+                  📖
+                  <Text className="text-[13px] text-left">
+                    Learn all about{' '}
+                    <Link className="text-[#15c] cursor-pointer">
+                      How CSS Perspective Works
+                    </Link>{' '}
+                    and how to build a 3D CSS cube from scratch in Amit Sheen's
+                    in-depth tutorial for CSS-Tricks. Or, check out stunning
+                    examples of WebGL cubes from Matthias Hurrle:{' '}
+                    <Link className="text-[#15c] cursor-pointer">Just Ice</Link>{' '}
+                    and{' '}
+                    <Link className="text-[#15c] cursor-pointer">Posing</Link>.
+                  </Text>
+                </Section>
+
+                <Section className="p-5 m-0 mb-5 rounded-[10px] text-[36px] text-center bg-[#d9f6ff] border border-solid border-[#92bfd0]">
+                  📖
+                  <Text className="text-[13px] text-left">
+                    Want to go beyond the square cube? Draw inspiration from
+                    EntropyReversed's{' '}
+                    <Link className="text-[#15c] cursor-pointer">
+                      Pulsating Tesseract
+                    </Link>
+                    , Josetxu's{' '}
+                    <Link className="text-[#15c] cursor-pointer">
+                      Rainbow Cuboid Loader
+                    </Link>
+                    , or Ana Tudor's{' '}
+                    <Link className="text-[#15c] cursor-pointer">
+                      Pure CSS cuboid jellyfish
+                    </Link>
+                    .
+                  </Text>
+                </Section>
+
+                <Section className="p-5 m-0 mb-5 rounded-[10px] text-[36px] text-center bg-[#d9f6ff] border border-solid border-[#92bfd0]">
+                  📖
+                  <Text className="text-[13px] text-left">
+                    Did that spherical cubes concept pique your interest?
+                    Explore Ryan Mulligan's{' '}
+                    <Link className="text-[#15c] cursor-pointer">
+                      Cube Sphere
+                    </Link>
+                    , Munir Safi's{' '}
+                    <Link className="text-[#15c] cursor-pointer">
+                      3D Sphere to Cube Animation With Virtual Trackball
+                    </Link>{' '}
+                    and Ana Tudor's{' '}
+                    <Link className="text-[#15c] cursor-pointer">
+                      Infinitely unpack prism
+                    </Link>{' '}
+                    for more mindbending cube concepts that test the boundaries
+                    of how shapes interact with each other.
+                  </Text>
+                </Section>
+              </Column>
+            </Row>
+          </Section>
 
-        <Section style={goToChallenge}>
-          <Button style={footerButton}>Go to Challenge Page</Button>
-        </Section>
+          <Section className="mt-[40px] mb-[120px] text-center">
+            <Button className="text-[26px] text-[#15c] bg-[#222] rounded font-bold cursor-pointer py-[15px] px-[30px]">
+              Go to Challenge Page
+            </Button>
+          </Section>
 
-        <Section style={footer}>
-          <Text style={footerText}>
-            You can adjust your{' '}
-            <Link style={footerLink}>email preferences</Link> any time, or{' '}
-            <Link style={footerLink}>instantly opt out</Link> of emails of this
-            kind. Need help with anything? Hit up{' '}
-            <Link style={footerLink}>support</Link>.
-          </Text>
-        </Section>
-      </Container>
-    </Body>
+          <Section className="bg-white text-[#505050] px-6 mb-12">
+            <Text className="text-[13px]">
+              You can adjust your{' '}
+              <Link className="underline text-[#505050] cursor-pointer">
+                email preferences
+              </Link>{' '}
+              any time, or{' '}
+              <Link className="underline text-[#505050] cursor-pointer">
+                instantly opt out
+              </Link>{' '}
+              of emails of this kind. Need help with anything? Hit up{' '}
+              <Link className="underline text-[#505050] cursor-pointer">
+                support
+              </Link>
+              .
+            </Text>
+          </Section>
+        </Container>
+      </Body>
+    </Tailwind>
   </Html>
 );
 
 export default CodepenChallengersEmail;
-
-const main = {
-  fontFamily: '"Google Sans",Roboto,RobotoDraft,Helvetica,Arial,sans-serif',
-  backgroundColor: '#505050',
-  margin: '0',
-};
-
-const imgHeader = {
-  margin: 'auto',
-  maxWidth: '100%',
-};
-
-const imgCube = {
-  maxWidth: '100%',
-};
-
-const header = {
-  width: '100%',
-  backgroundColor: '#191919',
-  margin: '0 auto',
-  paddingBottom: '30px',
-  zIndex: '999',
-};
-
-const container = {
-  margin: '0 auto',
-  width: '648px',
-  maxWidth: '100%',
-  position: 'relative' as const,
-};
-
-const challengeLink = {
-  backgroundColor: '#505050',
-  textAlign: 'center' as const,
-  padding: '10px 0',
-  fontSize: '13px',
-  position: 'absolute' as const,
-  width: '648px',
-  maxWidth: '100%',
-  top: '-28px',
-  margin: '0 0 16px 0',
-};
-
-const link = {
-  color: '#fff',
-  cursor: 'pointer',
-};
-
-const blueLink = {
-  color: '#15c',
-  cursor: 'pointer',
-};
-
-const heading = {
-  background: '#f0d361',
-  padding: '30px',
-  color: '#191919',
-  fontWeight: '400',
-  marginBottom: '0',
-};
-
-const section = {
-  margin: '0',
-  background: '#fff',
-  padding: '0 24px',
-};
-
-const yellowSection = {
-  background: '#f5d247',
-  padding: '30px',
-  fontSize: '18px',
-  lineHeight: '1.5',
-};
-
-const text = {
-  fontSize: '16px',
-};
-
-const cubeText = { fontSize: '32px', margin: '4px 0 0 0' };
-
-const yourChallenge = {
-  fontSize: '16px',
-  border: '6px solid #ebd473',
-  padding: '20px',
-  margin: '0 0 40px 0',
-};
-
-const sectionPro = {
-  marginTop: '40px',
-  marginBottom: '24px',
-  textAlign: 'center' as const,
-  background: '#0b112a',
-  color: '#fff',
-  padding: '35px 20px 30px 20px',
-  border: '6px solid #2138c6',
-};
-
-const imagePro = { margin: '0 auto 30px auto' };
-
-const button = {
-  background: '#2138c6',
-  color: '#fff',
-  border: '0',
-  fontSize: '15px',
-  lineHeight: '18px',
-  cursor: 'pointer',
-  borderRadius: '4px',
-  padding: '12px',
-};
-
-const resourcesTitle = {
-  fontWeight: '900',
-  lineHeight: '1.1',
-  marginTop: '-40px',
-  fontSize: '18px',
-};
-
-const ideasTitle = {
-  fontWeight: '900',
-  lineHeight: '1.1',
-  fontSize: '18px',
-};
-
-const ideas = {
-  width: '50%',
-  paddingRight: '10px',
-};
-
-const resources = {
-  width: '50%',
-  paddingLeft: '10px',
-};
-
-const card = {
-  padding: '20px',
-  margin: '0 0 20px 0',
-  borderRadius: '10px',
-  fontSize: '36px',
-  textAlign: 'center' as const,
-};
-
-const yellowCard = {
-  ...card,
-  background: '#fff4c8',
-  border: '1px solid #f4d247',
-};
-
-const blueCard = {
-  ...card,
-  background: '#d9f6ff',
-  border: '1px solid #92bfd0',
-};
-
-const textCard = {
-  fontSize: '13px',
-  textAlign: 'left' as const,
-};
-
-const goToChallenge = {
-  margin: '40px 0 120px 0',
-  textAlign: 'center' as const,
-};
-
-const footerButton = {
-  fontSize: '26px',
-  color: '#15c',
-  background: '#222',
-  borderRadius: '4px',
-  fontWeight: 'bold',
-  cursor: 'pointer',
-  padding: '15px 30px',
-};
-
-const footer = {
-  background: '#fff',
-  color: '#505050',
-  padding: '0 24px',
-  marginBottom: '48px',
-};
-
-const footerText = {
-  fontSize: '13px',
-};
-
-const footerLink = {
-  textDecoration: 'underline',
-  color: '#505050',
-  cursor: 'pointer',
-};
diff --git a/apps/demo/emails/newsletters/google-play-policy-update.tsx b/apps/demo/emails/newsletters/google-play-policy-update.tsx
index 079e50de8d..0db7403682 100644
--- a/apps/demo/emails/newsletters/google-play-policy-update.tsx
+++ b/apps/demo/emails/newsletters/google-play-policy-update.tsx
@@ -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}`
@@ -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',
 };
diff --git a/apps/demo/emails/newsletters/stack-overflow-tips.tsx b/apps/demo/emails/newsletters/stack-overflow-tips.tsx
index f7819747ea..465cd8c278 100644
--- a/apps/demo/emails/newsletters/stack-overflow-tips.tsx
+++ b/apps/demo/emails/newsletters/stack-overflow-tips.tsx
@@ -11,8 +11,10 @@ import {
   Preview,
   Row,
   Section,
+  Tailwind,
   Text,
 } from '@react-email/components';
+import tailwindConfig from '../tailwind.config';
 
 interface StackOverflowTipsEmailProps {
   tips?: { id: number; description: string }[];
@@ -47,107 +49,143 @@ export const StackOverflowTipsEmail = ({
 }: StackOverflowTipsEmailProps) => (
   <Html>
     <Head />
-    <Body style={main}>
-      <Preview>Stack overflow tips for searching</Preview>
-      <Container style={container}>
-        <Section style={logo}>
-          <Img width={146} src={`${baseUrl}/static/stack-overflow-logo.png`} />
-        </Section>
-
-        <Section style={header}>
-          <Row>
-            <Column style={headerContent}>
-              <Heading style={headerContentTitle}>
-                Find what you want, faster
-              </Heading>
-              <Text style={headerContentSubtitle}>
-                Tips and tricks for searching on Stack Overflow
-              </Text>
-            </Column>
-            <Column style={headerImageContainer}>
-              <Img
-                style={headerImage}
-                width={340}
-                src={`${baseUrl}/static/stack-overflow-header.png`}
-              />
-            </Column>
-          </Row>
-        </Section>
+    <Tailwind config={tailwindConfig}>
+      <Body className="bg-[#f3f3f5] font-stack-overflow">
+        <Preview>Stack overflow tips for searching</Preview>
+        <Container className="w-[680px] max-w-full mx-auto bg-white">
+          <Section className="flex bg-[#f3f3f5] p-5 px-[30px]">
+            <Img
+              width={146}
+              src={`${baseUrl}/static/stack-overflow-logo.png`}
+            />
+          </Section>
 
-        <Section style={content}>
-          <Heading as="h2" style={title}>
-            Searching for solutions
-          </Heading>
-          <Text style={paragraph}>
-            With more than 18 million questions, it's possible that someone has
-            already provided a solution to the problem you're facing.{' '}
-          </Text>
+          <Section className="rounded-t-md flex flex-col bg-[#2b2d6e]">
+            <Row>
+              <Column className="py-5 px-[30px] pb-[15px]">
+                <Heading className="text-white text-[27px] leading-[27px] font-bold">
+                  Find what you want, faster
+                </Heading>
+                <Text className="text-white text-[17px] leading-[24px]">
+                  Tips and tricks for searching on Stack Overflow
+                </Text>
+              </Column>
+              <Column className="py-[30px] px-[10px]">
+                <Img
+                  className="max-w-full"
+                  width={340}
+                  src={`${baseUrl}/static/stack-overflow-header.png`}
+                />
+              </Column>
+            </Row>
+          </Section>
 
-          <Hr style={divider} />
+          <Section className="pt-[30px] px-[30px] pb-10">
+            <Heading
+              as="h2"
+              className="mb-[15px] mt-0 font-bold text-[21px] leading-none text-[#0c0d0e]"
+            >
+              Searching for solutions
+            </Heading>
+            <Text className="text-[15px] leading-[21px] text-[#3c3f44]">
+              With more than 18 million questions, it's possible that someone
+              has already provided a solution to the problem you're facing.{' '}
+            </Text>
+
+            <Hr className="my-[30px]" />
+
+            <Heading
+              as="h2"
+              className="mb-[15px] font-bold text-[21px] leading-none text-[#0c0d0e]"
+            >
+              Use the search bar at the top of the page to find what you need
+            </Heading>
+            <Text className="text-[15px] leading-[21px] text-[#3c3f44]">
+              Here are a few simple search tips to get you started:
+            </Text>
+            <ul>
+              {tips.map((tip) => (
+                <li key={tip.id}>
+                  <Text className="text-[15px] leading-[21px] text-[#3c3f44]">
+                    {tip.description}
+                  </Text>
+                </li>
+              ))}
+            </ul>
+
+            <Text className="text-[15px] leading-[21px] text-[#3c3f44]">
+              The more information you can put in the search bar, the more
+              likely you will be to either find the answer you need or feel
+              confident that no one else has asked the question before.
+            </Text>
+
+            <Hr className="my-[30px]" />
+
+            <Heading
+              as="h2"
+              className="mb-4 font-bold text-[21px] leading-none text-[#0c0d0e]"
+            >
+              Take a break and read about the worst coder in the world
+            </Heading>
+
+            <Section className="mt-6 block">
+              <Link
+                className="bg-[#0095ff] border border-solid border-[#0077cc] text-[17px] leading-[17px] py-[13px] px-[17px] rounded max-w-[120px] text-white"
+                href="https://stackoverflow.blog/2019/10/22/"
+              >
+                I need a break
+              </Link>
+            </Section>
+          </Section>
+        </Container>
 
-          <Heading as="h2" style={title}>
-            Use the search bar at the top of the page to find what you need
-          </Heading>
-          <Text style={paragraph}>
-            Here are a few simple search tips to get you started:
+        <Section className="w-[680px] max-w-full mt-8 mx-auto py-0 px-[30px]">
+          <Text className="text-xs leading-[15px] text-[#9199a1] m-0">
+            You're receiving this email because your Stack Overflow activity
+            triggered this tip or reminder.
           </Text>
-          <ul>
-            {tips.map((tip) => (
-              <li key={tip.id}>
-                <Text style={paragraph}>{tip.description}</Text>
-              </li>
-            ))}
-          </ul>
 
-          <Text style={paragraph}>
-            The more information you can put in the search bar, the more likely
-            you will be to either find the answer you need or feel confident
-            that no one else has asked the question before.
+          <Link
+            href="/"
+            className="inline-block text-[#9199a1] underline text-[12px] mr-[10px] mb-0 mt-2"
+          >
+            Unsubscribe from emails like this{' '}
+          </Link>
+          <Link
+            href="/"
+            className="inline-block text-[#9199a1] underline text-[12px] mr-[10px] mb-0 mt-2"
+          >
+            Edit email settings{' '}
+          </Link>
+          <Link
+            href="/"
+            className="inline-block text-[#9199a1] underline text-[12px] mr-[10px] mb-0 mt-2"
+          >
+            Contact us
+          </Link>
+          <Link
+            href="/"
+            className="inline-block text-[#9199a1] underline text-[12px] mr-[10px] mb-0 mt-2"
+          >
+            Privacy
+          </Link>
+
+          <Hr className="my-[30px] border-[#d6d8db]" />
+
+          <Img
+            width={111}
+            src={`${baseUrl}/static/stack-overflow-logo-sm.png`}
+          />
+          <Text className="my-1 text-[12px] leading-[15px] text-[#9199a1]">
+            <strong>Stack Overflow</strong>, 110 William Street, 28th Floor, New
+            York, NY 10038
+          </Text>
+          <Text className="rounded-[1px] border border-solid border-[#d6d9dc] pt-1 pb-[3px] px-[6px] text-[11px] leading-none font-stack-overflow-mono text-[#e06c77] max-w-min m-0 mb-8">
+            {'<3'}
           </Text>
-
-          <Hr style={divider} />
-
-          <Heading as="h2" style={title}>
-            Take a break and read about the worst coder in the world
-          </Heading>
-
-          <Section style={buttonContainer}>
-            <Link style={button} href="https://stackoverflow.blog/2019/10/22/">
-              I need a break
-            </Link>
-          </Section>
         </Section>
-      </Container>
-
-      <Section style={footer}>
-        <Text style={footerText}>
-          You're receiving this email because your Stack Overflow activity
-          triggered this tip or reminder.
-        </Text>
-
-        <Link href="/" style={footerLink}>
-          Unsubscribe from emails like this{' '}
-        </Link>
-        <Link href="/" style={footerLink}>
-          Edit email settings{' '}
-        </Link>
-        <Link href="/" style={footerLink}>
-          Contact us
-        </Link>
-        <Link href="/" style={footerLink}>
-          Privacy
-        </Link>
-
-        <Hr style={footerDivider} />
-
-        <Img width={111} src={`${baseUrl}/static/stack-overflow-logo-sm.png`} />
-        <Text style={footerAddress}>
-          <strong>Stack Overflow</strong>, 110 William Street, 28th Floor, New
-          York, NY 10038
-        </Text>
-        <Text style={footerHeart}>{'<3'}</Text>
-      </Section>
-    </Body>
+      </Body>
+    </Tailwind>
   </Html>
 );
 
@@ -156,136 +194,3 @@ StackOverflowTipsEmail.PreviewProps = {
 } as StackOverflowTipsEmailProps;
 
 export default StackOverflowTipsEmail;
-
-const main = {
-  backgroundColor: '#f3f3f5',
-  fontFamily: 'HelveticaNeue,Helvetica,Arial,sans-serif',
-};
-
-const headerContent = { padding: '20px 30px 15px' };
-
-const headerContentTitle = {
-  color: '#fff',
-  fontSize: '27px',
-  fontWeight: 'bold',
-  lineHeight: '27px',
-};
-
-const headerContentSubtitle = {
-  color: '#fff',
-  fontSize: '17px',
-};
-
-const headerImageContainer = {
-  padding: '30px 10px',
-};
-
-const headerImage = {
-  maxWidth: '100%',
-};
-
-const title = {
-  margin: '0 0 15px',
-  fontWeight: 'bold',
-  fontSize: '21px',
-  lineHeight: '21px',
-  color: '#0c0d0e',
-};
-
-const paragraph = {
-  fontSize: '15px',
-  lineHeight: '21px',
-  color: '#3c3f44',
-};
-
-const divider = {
-  margin: '30px 0',
-};
-
-const container = {
-  width: '680px',
-  maxWidth: '100%',
-  margin: '0 auto',
-  backgroundColor: '#ffffff',
-};
-
-const footer = {
-  width: '680px',
-  maxWidth: '100%',
-  margin: '32px auto 0 auto',
-  padding: '0 30px',
-};
-
-const content = {
-  padding: '30px 30px 40px 30px',
-};
-
-const logo = {
-  display: 'flex',
-  background: '#f3f3f5',
-  padding: '20px 30px',
-};
-
-const header = {
-  borderRadius: '5px 5px 0 0',
-  display: 'flex',
-  flexDireciont: 'column',
-  backgroundColor: '#2b2d6e',
-};
-
-const buttonContainer = {
-  marginTop: '24px',
-  display: 'block',
-};
-
-const button = {
-  backgroundColor: '#0095ff',
-  border: '1px solid #0077cc',
-  fontSize: '17px',
-  lineHeight: '17px',
-  padding: '13px 17px',
-  borderRadius: '4px',
-  maxWidth: '120px',
-  color: '#fff',
-};
-
-const footerDivider = {
-  ...divider,
-  borderColor: '#d6d8db',
-};
-
-const footerText = {
-  fontSize: '12px',
-  lineHeight: '15px',
-  color: '#9199a1',
-  margin: '0',
-};
-
-const footerLink = {
-  display: 'inline-block',
-  color: '#9199a1',
-  textDecoration: 'underline',
-  fontSize: '12px',
-  marginRight: '10px',
-  marginBottom: '0',
-  marginTop: '8px',
-};
-
-const footerAddress = {
-  margin: '4px 0',
-  fontSize: '12px',
-  lineHeight: '15px',
-  color: '#9199a1',
-};
-
-const footerHeart = {
-  borderRadius: '1px',
-  border: '1px solid #d6d9dc',
-  padding: '4px 6px 3px 6px',
-  fontSize: '11px',
-  lineHeight: '11px',
-  fontFamily: 'Consolas,monospace',
-  color: '#e06c77',
-  maxWidth: 'min-content',
-  margin: '0 0 32px 0',
-};
diff --git a/apps/demo/emails/notifications/github-access-token.tsx b/apps/demo/emails/notifications/github-access-token.tsx
index ee85b69b38..adb8d18885 100644
--- a/apps/demo/emails/notifications/github-access-token.tsx
+++ b/apps/demo/emails/notifications/github-access-token.tsx
@@ -8,8 +8,10 @@ import {
   Link,
   Preview,
   Section,
+  Tailwind,
   Text,
 } from '@react-email/components';
+import tailwindConfig from '../tailwind.config';
 
 interface GithubAccessTokenEmailProps {
   username?: string;
@@ -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>
 );
 
@@ -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',
-};
diff --git a/apps/demo/emails/notifications/yelp-recent-login.tsx b/apps/demo/emails/notifications/yelp-recent-login.tsx
index 5b56a4a219..dc350ae55a 100644
--- a/apps/demo/emails/notifications/yelp-recent-login.tsx
+++ b/apps/demo/emails/notifications/yelp-recent-login.tsx
@@ -10,8 +10,10 @@ import {
   Preview,
   Row,
   Section,
+  Tailwind,
   Text,
 } from '@react-email/components';
+import tailwindConfig from '../tailwind.config';
 
 interface YelpRecentLoginEmailProps {
   userFirstName?: string;
@@ -39,106 +41,88 @@ export const YelpRecentLoginEmail = ({
 
   return (
     <Html>
-      <Head />
-      <Body style={main}>
-        <Preview>Yelp recent login</Preview>
-        <Container>
-          <Section style={logo}>
-            <Img src={`${baseUrl}/static/yelp-logo.png`} alt="Yelp logo" />
-          </Section>
-
-          <Section style={content}>
-            <Row>
+      <Tailwind config={tailwindConfig}>
+        <Head />
+        <Body className="bg-white font-yelp">
+          <Preview>Yelp recent login</Preview>
+          <Container>
+            <Section className="px-5 py-[30px]">
+              <Img src={`${baseUrl}/static/yelp-logo.png`} alt="Yelp logo" />
+            </Section>
+
+            <Section className="border border-solid border-black/10 rounded overflow-hidden">
+              <Row>
+                <Img
+                  className="max-w-full"
+                  width={620}
+                  src={`${baseUrl}/static/yelp-header.png`}
+                  alt="Yelp header illustration"
+                />
+              </Row>
+
+              <Row className="p-5 pb-0">
+                <Column>
+                  <Heading className="text-[32px] font-bold text-center">
+                    Hi {userFirstName},
+                  </Heading>
+                  <Heading
+                    as="h2"
+                    className="text-[26px] font-bold text-center"
+                  >
+                    We noticed a recent login to your Yelp account.
+                  </Heading>
+
+                  <Text className="text-base">
+                    <b>Time: </b>
+                    {formattedDate}
+                  </Text>
+                  <Text className="text-base -mt-[5px]">
+                    <b>Device: </b>
+                    {loginDevice}
+                  </Text>
+                  <Text className="text-base -mt-[5px]">
+                    <b>Location: </b>
+                    {loginLocation}
+                  </Text>
+                  <Text className="text-black/50 text-sm leading-[24px] -mt-[5px]">
+                    *Approximate geographic location based on IP address:
+                    {loginIp}
+                  </Text>
+
+                  <Text className="text-base">
+                    If this was you, there's nothing else you need to do.
+                  </Text>
+                  <Text className="text-base -mt-[5px]">
+                    If this wasn't you or if you have additional questions,
+                    please see our support page.
+                  </Text>
+                </Column>
+              </Row>
+              <Row className="p-5 pt-0">
+                <Column className="text-center" colSpan={2}>
+                  <Button className="bg-[#e00707] rounded border border-solid border-black/10 text-white font-bold cursor-pointer inline-block px-[30px] py-3 no-underline">
+                    Learn More
+                  </Button>
+                </Column>
+              </Row>
+            </Section>
+
+            <Section className="pt-[45px]">
               <Img
-                style={image}
+                className="max-w-full"
                 width={620}
-                src={`${baseUrl}/static/yelp-header.png`}
-                alt="Yelp header illustration"
+                src={`${baseUrl}/static/yelp-footer.png`}
+                alt="Yelp footer decoration"
               />
-            </Row>
-
-            <Row style={{ ...boxInfos, paddingBottom: '0' }}>
-              <Column>
-                <Heading
-                  style={{
-                    fontSize: 32,
-                    fontWeight: 'bold',
-                    textAlign: 'center',
-                  }}
-                >
-                  Hi {userFirstName},
-                </Heading>
-                <Heading
-                  as="h2"
-                  style={{
-                    fontSize: 26,
-                    fontWeight: 'bold',
-                    textAlign: 'center',
-                  }}
-                >
-                  We noticed a recent login to your Yelp account.
-                </Heading>
-
-                <Text style={paragraph}>
-                  <b>Time: </b>
-                  {formattedDate}
-                </Text>
-                <Text style={{ ...paragraph, marginTop: -5 }}>
-                  <b>Device: </b>
-                  {loginDevice}
-                </Text>
-                <Text style={{ ...paragraph, marginTop: -5 }}>
-                  <b>Location: </b>
-                  {loginLocation}
-                </Text>
-                <Text
-                  style={{
-                    color: 'rgb(0,0,0, 0.5)',
-                    fontSize: 14,
-                    marginTop: -5,
-                  }}
-                >
-                  *Approximate geographic location based on IP address:
-                  {loginIp}
-                </Text>
-
-                <Text style={paragraph}>
-                  If this was you, there's nothing else you need to do.
-                </Text>
-                <Text style={{ ...paragraph, marginTop: -5 }}>
-                  If this wasn't you or if you have additional questions, please
-                  see our support page.
-                </Text>
-              </Column>
-            </Row>
-            <Row style={{ ...boxInfos, paddingTop: '0' }}>
-              <Column style={buttonContainer} colSpan={2}>
-                <Button style={button}>Learn More</Button>
-              </Column>
-            </Row>
-          </Section>
-
-          <Section style={containerImageFooter}>
-            <Img
-              style={image}
-              width={620}
-              src={`${baseUrl}/static/yelp-footer.png`}
-              alt="Yelp footer decoration"
-            />
-          </Section>
-
-          <Text
-            style={{
-              textAlign: 'center',
-              fontSize: 12,
-              color: 'rgb(0,0,0, 0.7)',
-            }}
-          >
-            © 2022 | Yelp Inc., 350 Mission Street, San Francisco, CA 94105,
-            U.S.A. | www.yelp.com
-          </Text>
-        </Container>
-      </Body>
+            </Section>
+
+            <Text className="text-center text-xs leading-[24px] text-black/70">
+              © 2022 | Yelp Inc., 350 Mission Street, San Francisco, CA 94105,
+              U.S.A. | www.yelp.com
+            </Text>
+          </Container>
+        </Body>
+      </Tailwind>
     </Html>
   );
 };
@@ -152,51 +136,3 @@ YelpRecentLoginEmail.PreviewProps = {
 } as YelpRecentLoginEmailProps;
 
 export default YelpRecentLoginEmail;
-
-const main = {
-  backgroundColor: '#fff',
-  fontFamily:
-    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
-};
-
-const paragraph = {
-  fontSize: 16,
-};
-
-const logo = {
-  padding: '30px 20px',
-};
-
-const buttonContainer = {
-  textAlign: 'center' as const,
-};
-
-const button = {
-  backgroundColor: '#e00707',
-  borderRadius: 3,
-  color: '#FFF',
-  fontWeight: 'bold',
-  border: '1px solid rgb(0,0,0, 0.1)',
-  cursor: 'pointer',
-  display: 'inline-block',
-  padding: '12px 30px',
-  textDecoration: 'none',
-};
-
-const content = {
-  border: '1px solid rgb(0,0,0, 0.1)',
-  borderRadius: '3px',
-  overflow: 'hidden',
-};
-
-const image = {
-  maxWidth: '100%',
-};
-
-const boxInfos = {
-  padding: '20px',
-};
-
-const containerImageFooter = {
-  padding: '45px 0 0 0',
-};
diff --git a/apps/demo/emails/receipts/apple-receipt.tsx b/apps/demo/emails/receipts/apple-receipt.tsx
index 194a2c1348..0fe12f8992 100644
--- a/apps/demo/emails/receipts/apple-receipt.tsx
+++ b/apps/demo/emails/receipts/apple-receipt.tsx
@@ -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}`
@@ -20,473 +22,313 @@ const baseUrl = process.env.VERCEL_URL
 export const AppleReceiptEmail = () => (
   <Html>
     <Head />
-
-    <Body style={main}>
-      <Preview>Apple Receipt</Preview>
-      <Container style={container}>
-        <Section>
-          <Row>
-            <Column>
-              <Img
-                src={`${baseUrl}/static/apple-logo.png`}
-                width="42"
-                height="42"
-                alt="Apple Logo"
-              />
-            </Column>
-
-            <Column align="right" style={tableCell}>
-              <Text style={heading}>Receipt</Text>
-            </Column>
-          </Row>
-        </Section>
-        <Section>
-          <Text style={cupomText}>
-            Save 3% on all your Apple purchases with Apple Card.
-            <sup style={supStyle}>1</sup>{' '}
-            <Link href="https://www.apple.com/apple-card/">
-              Apply and use in minutes
+    <Tailwind config={tailwindConfig}>
+      <Body className="font-apple bg-white">
+        <Preview>Apple Receipt</Preview>
+        <Container className="mx-auto px-0 pt-5 pb-12 w-[660px] max-w-full">
+          <Section>
+            <Row>
+              <Column>
+                <Img
+                  src={`${baseUrl}/static/apple-logo.png`}
+                  width="42"
+                  height="42"
+                  alt="Apple Logo"
+                />
+              </Column>
+
+              <Column align="right" className="table-cell">
+                <Text className="text-[32px] font-light text-[#888888] my-4 leading-6">
+                  Receipt
+                </Text>
+              </Column>
+            </Row>
+          </Section>
+          <Section>
+            <Text className="text-center m-0 mt-9 mb-10 text-[14px] leading-[24px] font-medium text-[#111111]">
+              Save 3% on all your Apple purchases with Apple Card.
+              <sup className="font-light">1</sup>{' '}
+              <Link href="https://www.apple.com/apple-card/">
+                Apply and use in minutes
+              </Link>
+              <sup className="font-light">2</sup>
+            </Text>
+          </Section>
+          <Section className="border-collapse border-spacing-0 text-[rgb(51,51,51)] bg-[rgb(250,250,250)] rounded-[3px] text-[12px]">
+            <Row className="min-h-[46px]">
+              <Column colSpan={2}>
+                <Section>
+                  <Row>
+                    <Column className="pl-5 border-solid border-white border-0 border-r border-b min-h-[44px]">
+                      <Text className="m-0 p-0 text-[rgb(102,102,102)] text-[10px] leading-[1.4]">
+                        APPLE ID
+                      </Text>
+                      <Link className="m-0 p-0 text-[#15c] underline text-[12px] leading-[1.4]">
+                        alan.turing@gmail.com
+                      </Link>
+                    </Column>
+                  </Row>
+
+                  <Row>
+                    <Column className="pl-5 border-solid border-white border-0 border-r border-b min-h-[44px]">
+                      <Text className="m-0 p-0 text-[rgb(102,102,102)] text-[10px] leading-[1.4]">
+                        INVOICE DATE
+                      </Text>
+                      <Text className="m-0 p-0 text-[12px] leading-[1.4]">
+                        18 Jan 2023
+                      </Text>
+                    </Column>
+                  </Row>
+
+                  <Row>
+                    <Column className="pl-5 border-solid border-white border-0 border-r border-b min-h-[44px]">
+                      <Text className="m-0 p-0 text-[rgb(102,102,102)] text-[10px] leading-[1.4]">
+                        ORDER ID
+                      </Text>
+                      <Link className="m-0 p-0 text-[#15c] underline text-[12px] leading-[1.4]">
+                        ML4F5L8522
+                      </Link>
+                    </Column>
+                    <Column className="pl-5 border-solid border-white border-0 border-r border-b min-h-[44px]">
+                      <Text className="m-0 p-0 text-[rgb(102,102,102)] text-[10px] leading-[1.4]">
+                        DOCUMENT NO.
+                      </Text>
+                      <Text className="m-0 p-0 text-[12px] leading-[1.4]">
+                        186623754793
+                      </Text>
+                    </Column>
+                  </Row>
+                </Section>
+              </Column>
+              <Column
+                className="pl-5 border-solid border-white border-0 border-r border-b min-h-[44px]"
+                colSpan={2}
+              >
+                <Text className="m-0 p-0 text-[rgb(102,102,102)] text-[10px] leading-[1.4]">
+                  BILLED TO
+                </Text>
+                <Text className="m-0 p-0 text-[12px] leading-[1.4]">
+                  Visa .... 7461 (Apple Pay)
+                </Text>
+                <Text className="m-0 p-0 text-[12px] leading-[1.4]">
+                  Alan Turing
+                </Text>
+                <Text className="m-0 p-0 text-[12px] leading-[1.4]">
+                  2125 Chestnut St
+                </Text>
+                <Text className="m-0 p-0 text-[12px] leading-[1.4]">
+                  San Francisco, CA 94123
+                </Text>
+                <Text className="m-0 p-0 text-[12px] leading-[1.4]">USA</Text>
+              </Column>
+            </Row>
+          </Section>
+          <Section className="border-collapse border-spacing-0 text-[rgb(51,51,51)] bg-[rgb(250,250,250)] rounded-[3px] text-[12px] mt-[30px] mb-[15px] min-h-[24px]">
+            <Text className="bg-[#fafafa] pl-[10px] text-sm leading-[24px] font-medium m-0">
+              App Store
+            </Text>
+          </Section>
+          <Section>
+            <Row>
+              <Column className="w-16">
+                <Img
+                  src={`${baseUrl}/static/apple-hbo-max-icon.jpeg`}
+                  width="64"
+                  height="64"
+                  alt="HBO Max"
+                  className="ml-5 rounded-[14px] border border-solid border-[rgb(242,242,242)]"
+                />
+              </Column>
+              <Column className="pl-[22px]">
+                <Text className="text-xs font-semibold m-0 p-0 leading-[1.4]">
+                  HBO Max: Stream TV &amp; Movies
+                </Text>
+                <Text className="text-xs text-[rgb(102,102,102)] m-0 p-0 leading-[1.4]">
+                  HBO Max Ad-Free (Monthly)
+                </Text>
+                <Text className="text-xs text-[rgb(102,102,102)] m-0 p-0 leading-[1.4]">
+                  Renews Aug 20, 2023
+                </Text>
+                <Link
+                  href="https://www.apple.com/"
+                  className="text-[12px] text-[rgb(0,112,201)] no-underline"
+                >
+                  Write a Review
+                </Link>
+                <span className="mx-1 text-[rgb(51,51,51)] font-extralight">
+                  |
+                </span>
+                <Link
+                  href="https://www.apple.com/"
+                  className="text-[12px] text-[rgb(0,112,201)] no-underline"
+                >
+                  Report a Problem
+                </Link>
+              </Column>
+
+              <Column
+                className="table-cell pr-5 w-[100px] align-top"
+                align="right"
+              >
+                <Text className="text-[12px] leading-[24px] font-semibold m-0">
+                  $14.99
+                </Text>
+              </Column>
+            </Row>
+          </Section>
+          <Hr className="mt-[30px] mb-0" />
+          <Section align="right">
+            <Row>
+              <Column className="table-cell" align="right">
+                <Text className="m-0 text-[rgb(102,102,102)] text-[10px] font-semibold p-0 pr-[30px] text-right">
+                  TOTAL
+                </Text>
+              </Column>
+              <Column className="min-h-12 pt-12 [border-left:1px_solid_rgb(238,238,238)]" />
+              <Column className="table-cell w-[90px]">
+                <Text className="text-base font-semibold whitespace-nowrap m-0 mr-5 text-right">
+                  $14.99
+                </Text>
+              </Column>
+            </Row>
+          </Section>
+          <Hr className="mb-[75px]" />
+          <Section>
+            <Row>
+              <Column align="center" className="block">
+                <Img
+                  src={`${baseUrl}/static/apple-card-icon.png`}
+                  width="60"
+                  height="17"
+                  alt="Apple Card"
+                />
+              </Column>
+            </Row>
+          </Section>
+          <Section>
+            <Row>
+              <Column align="center" className="block mt-[15px]">
+                <Text className="text-[24px] leading-none font-medium">
+                  Save 3% on all your Apple purchases.
+                </Text>
+              </Column>
+            </Row>
+          </Section>
+          <Section>
+            <Row>
+              <Column align="center" className="table-cell mt-[10px]">
+                <Link
+                  href="https://www.apple.com/"
+                  className="text-[rgb(0,126,255)] no-underline"
+                >
+                  <Img
+                    src={`${baseUrl}/static/apple-wallet.png`}
+                    width="28"
+                    height="28"
+                    alt="Apple Wallet"
+                    className="[display:inherit] pr-2 align-middle"
+                  />
+                  <span className="text-[14px] font-normal no-underline">
+                    Apply and use in minutes
+                  </span>
+                </Link>
+              </Column>
+            </Row>
+          </Section>
+          <Hr className="my-[65px] mb-5" />
+          <Text className="text-[12px] leading-[normal] text-[rgb(102,102,102)] m-0 mb-4">
+            1. 3% savings is earned as Daily Cash and is transferred to your
+            Apple Cash card when transactions post to your Apple Card account.
+            If you do not have an Apple Cash card, Daily Cash can be applied by
+            you as a credit on your statement balance. 3% is the total amount of
+            Daily Cash earned for these purchases. See the Apple Card Customer
+            Agreement for more details on Daily Cash and qualifying
+            transactions.
+          </Text>
+          <Text className="text-[12px] leading-[normal] text-[rgb(102,102,102)] m-0 mb-4">
+            2. Subject to credit approval.
+          </Text>
+          <Text className="text-[12px] leading-[normal] text-[rgb(102,102,102)] m-0 mb-4">
+            To access and use all the features of Apple Card, you must add Apple
+            Card to Wallet on an iPhone or iPad with iOS or iPadOS 13.2 or
+            later. Update to the latest version of iOS or iPadOS by going to
+            Settings &gt; General &gt; Software Update. Tap Download and
+            Install.
+          </Text>
+          <Text className="text-[12px] leading-[normal] text-[rgb(102,102,102)] m-0 mb-4">
+            Available for qualifying applicants in the United States.
+          </Text>
+          <Text className="text-[12px] leading-[normal] text-[rgb(102,102,102)] m-0 mb-4">
+            Apple Card is issued by Goldman Sachs Bank USA, Salt Lake City
+            Branch.
+          </Text>
+          <Text className="text-[12px] leading-[normal] text-[rgb(102,102,102)] m-0 mb-4">
+            If you reside in the US territories, please call Goldman Sachs at
+            877-255-5923 with questions about Apple Card.
+          </Text>
+          <Text className="text-[12px] leading-[normal] text-[rgb(102,102,102)] my-5 text-center">
+            Privacy: We use a
+            <Link
+              href="https://www.apple.com/"
+              className="text-[rgb(0,115,255)]"
+            >
+              {' '}
+              Subscriber ID{' '}
             </Link>
-            <sup style={supStyle}>2</sup>
+            to provide reports to developers.
+          </Text>
+          <Text className="text-[12px] text-[rgb(102,102,102)] my-5 leading-[normal] text-center">
+            Get help with subscriptions and purchases.
+            <Link
+              href="https://www.apple.com/"
+              className="text-[rgb(0,115,255)]"
+            >
+              Visit Apple Support.
+            </Link>
+          </Text>
+          <Text className="text-xs text-[rgb(102,102,102)] my-5 leading-[normal] text-center">
+            Learn how to{' '}
+            <Link href="https://www.apple.com/">
+              manage your password preferences
+            </Link>{' '}
+            for iTunes, Apple Books, and App Store purchases.
           </Text>
-        </Section>
-        <Section style={informationTable}>
-          <Row style={informationTableRow}>
-            <Column colSpan={2}>
-              <Section>
-                <Row>
-                  <Column style={informationTableColumn}>
-                    <Text style={informationTableLabel}>APPLE ID</Text>
-                    <Link
-                      style={{
-                        ...informationTableValue,
-                        color: '#15c',
-                        textDecoration: 'underline',
-                      }}
-                    >
-                      alan.turing@gmail.com
-                    </Link>
-                  </Column>
-                </Row>
-
-                <Row>
-                  <Column style={informationTableColumn}>
-                    <Text style={informationTableLabel}>INVOICE DATE</Text>
-                    <Text style={informationTableValue}>18 Jan 2023</Text>
-                  </Column>
-                </Row>
-
-                <Row>
-                  <Column style={informationTableColumn}>
-                    <Text style={informationTableLabel}>ORDER ID</Text>
-                    <Link
-                      style={{
-                        ...informationTableValue,
-                        color: '#15c',
-                        textDecoration: 'underline',
-                      }}
-                    >
-                      ML4F5L8522
-                    </Link>
-                  </Column>
-                  <Column style={informationTableColumn}>
-                    <Text style={informationTableLabel}>DOCUMENT NO.</Text>
-                    <Text style={informationTableValue}>186623754793</Text>
-                  </Column>
-                </Row>
-              </Section>
-            </Column>
-            <Column style={informationTableColumn} colSpan={2}>
-              <Text style={informationTableLabel}>BILLED TO</Text>
-              <Text style={informationTableValue}>
-                Visa .... 7461 (Apple Pay)
-              </Text>
-              <Text style={informationTableValue}>Alan Turing</Text>
-              <Text style={informationTableValue}>2125 Chestnut St</Text>
-              <Text style={informationTableValue}>San Francisco, CA 94123</Text>
-              <Text style={informationTableValue}>USA</Text>
-            </Column>
-          </Row>
-        </Section>
-        <Section style={productTitleTable}>
-          <Text style={productsTitle}>App Store</Text>
-        </Section>
-        <Section>
-          <Row>
-            <Column style={{ width: '64px' }}>
-              <Img
-                src={`${baseUrl}/static/apple-hbo-max-icon.jpeg`}
-                width="64"
-                height="64"
-                alt="HBO Max"
-                style={productIcon}
-              />
-            </Column>
-            <Column style={{ paddingLeft: '22px' }}>
-              <Text style={productTitle}>HBO Max: Stream TV &amp; Movies</Text>
-              <Text style={productDescription}>HBO Max Ad-Free (Monthly)</Text>
-              <Text style={productDescription}>Renews Aug 20, 2023</Text>
-              <Link href="https://www.apple.com/" style={productLink}>
-                Write a Review
-              </Link>
-              <span style={divisor}>|</span>
-              <Link href="https://www.apple.com/" style={productLink}>
-                Report a Problem
-              </Link>
-            </Column>
 
-            <Column style={productPriceWrapper} align="right">
-              <Text style={productPrice}>$14.99</Text>
-            </Column>
-          </Row>
-        </Section>
-        <Hr style={productPriceLine} />
-        <Section align="right">
-          <Row>
-            <Column style={tableCell} align="right">
-              <Text style={productPriceTotal}>TOTAL</Text>
-            </Column>
-            <Column style={productPriceVerticalLine} />
-            <Column style={productPriceLargeWrapper}>
-              <Text style={productPriceLarge}>$14.99</Text>
-            </Column>
-          </Row>
-        </Section>
-        <Hr style={productPriceLineBottom} />
-        <Section>
-          <Row>
-            <Column align="center" style={block}>
-              <Img
-                src={`${baseUrl}/static/apple-card-icon.png`}
-                width="60"
-                height="17"
-                alt="Apple Card"
-              />
-            </Column>
-          </Row>
-        </Section>
-        <Section>
-          <Row>
-            <Column align="center" style={ctaTitle}>
-              <Text style={ctaText}>Save 3% on all your Apple purchases.</Text>
-            </Column>
-          </Row>
-        </Section>
-        <Section>
-          <Row>
-            <Column align="center" style={walletWrapper}>
-              <Link href="https://www.apple.com/" style={walletLink}>
+          <Text className="text-xs text-[rgb(102,102,102)] my-5 leading-[normal] text-center">
+            {' '}
+            You have the option to stop receiving email receipts for your
+            subscription renewals. If you have opted out, you can still view
+            your receipts in your account under Purchase History. To manage
+            receipts or to opt in again, go to{' '}
+            <Link href="https://www.apple.com/">Account Settings.</Link>
+          </Text>
+          <Section>
+            <Row>
+              <Column align="center" className="block mt-10">
                 <Img
-                  src={`${baseUrl}/static/apple-wallet.png`}
-                  width="28"
-                  height="28"
-                  alt="Apple Wallet"
-                  style={walletImage}
+                  src={`${baseUrl}/static/apple-logo.png`}
+                  width="26"
+                  height="26"
+                  alt="Apple Card"
                 />
-                <span style={walletLinkText}>Apply and use in minutes</span>
-              </Link>
-            </Column>
-          </Row>
-        </Section>
-        <Hr style={walletBottomLine} />
-        <Text style={footerText}>
-          1. 3% savings is earned as Daily Cash and is transferred to your Apple
-          Cash card when transactions post to your Apple Card account. If you do
-          not have an Apple Cash card, Daily Cash can be applied by you as a
-          credit on your statement balance. 3% is the total amount of Daily Cash
-          earned for these purchases. See the Apple Card Customer Agreement for
-          more details on Daily Cash and qualifying transactions.
-        </Text>
-        <Text style={footerText}>2. Subject to credit approval.</Text>
-        <Text style={footerText}>
-          To access and use all the features of Apple Card, you must add Apple
-          Card to Wallet on an iPhone or iPad with iOS or iPadOS 13.2 or later.
-          Update to the latest version of iOS or iPadOS by going to Settings
-          &gt; General &gt; Software Update. Tap Download and Install.
-        </Text>
-        <Text style={footerText}>
-          Available for qualifying applicants in the United States.
-        </Text>
-        <Text style={footerText}>
-          Apple Card is issued by Goldman Sachs Bank USA, Salt Lake City Branch.
-        </Text>
-        <Text style={footerText}>
-          If you reside in the US territories, please call Goldman Sachs at
-          877-255-5923 with questions about Apple Card.
-        </Text>
-        <Text style={footerTextCenter}>
-          Privacy: We use a
-          <Link href="https://www.apple.com/" style={footerLink}>
-            {' '}
-            Subscriber ID{' '}
-          </Link>
-          to provide reports to developers.
-        </Text>
-        <Text style={footerTextCenter}>
-          Get help with subscriptions and purchases.
-          <Link href="https://www.apple.com/" style={footerLink}>
-            Visit Apple Support.
-          </Link>
-        </Text>
-        <Text style={footerTextCenter}>
-          Learn how to{' '}
-          <Link href="https://www.apple.com/">
-            manage your password preferences
-          </Link>{' '}
-          for iTunes, Apple Books, and App Store purchases.
-        </Text>
-
-        <Text style={footerTextCenter}>
-          {' '}
-          You have the option to stop receiving email receipts for your
-          subscription renewals. If you have opted out, you can still view your
-          receipts in your account under Purchase History. To manage receipts or
-          to opt in again, go to{' '}
-          <Link href="https://www.apple.com/">Account Settings.</Link>
-        </Text>
-        <Section>
-          <Row>
-            <Column align="center" style={footerIcon}>
-              <Img
-                src={`${baseUrl}/static/apple-logo.png`}
-                width="26"
-                height="26"
-                alt="Apple Card"
-              />
-            </Column>
-          </Row>
-        </Section>
-        <Text style={footerLinksWrapper}>
-          <Link href="https://www.apple.com/">Account Settings</Link> •{' '}
-          <Link href="https://www.apple.com/">Terms of Sale</Link> •{' '}
-          <Link href="https://www.apple.com/legal/privacy/">
-            Privacy Policy{' '}
-          </Link>
-        </Text>
-        <Text style={footerCopyright}>
-          Copyright © 2023 Apple Inc. <br />{' '}
-          <Link href="https://www.apple.com/legal/">All rights reserved</Link>
-        </Text>
-      </Container>
-    </Body>
+              </Column>
+            </Row>
+          </Section>
+          <Text className="m-0 mt-2 text-center text-[12px] leading-[24px] text-[rgb(102,102,102)]">
+            <Link href="https://www.apple.com/">Account Settings</Link> •{' '}
+            <Link href="https://www.apple.com/">Terms of Sale</Link> •{' '}
+            <Link href="https://www.apple.com/legal/privacy/">
+              Privacy Policy{' '}
+            </Link>
+          </Text>
+          <Text className="m-0 mt-[25px] text-center text-[12px] leading-[24px] text-[rgb(102,102,102)]">
+            Copyright © 2023 Apple Inc. <br />{' '}
+            <Link href="https://www.apple.com/legal/">All rights reserved</Link>
+          </Text>
+        </Container>
+      </Body>
+    </Tailwind>
   </Html>
 );
 
 export default AppleReceiptEmail;
-
-const main = {
-  fontFamily: '"Helvetica Neue",Helvetica,Arial,sans-serif',
-  backgroundColor: '#ffffff',
-};
-
-const resetText = {
-  margin: '0',
-  padding: '0',
-  lineHeight: 1.4,
-};
-
-const container = {
-  margin: '0 auto',
-  padding: '20px 0 48px',
-  width: '660px',
-  maxWidth: '100%',
-};
-
-const tableCell = { display: 'table-cell' };
-
-const heading = {
-  fontSize: '32px',
-  fontWeight: '300',
-  color: '#888888',
-};
-
-const cupomText = {
-  textAlign: 'center' as const,
-  margin: '36px 0 40px 0',
-  fontSize: '14px',
-  fontWeight: '500',
-  color: '#111111',
-};
-
-const supStyle = {
-  fontWeight: '300',
-};
-
-const informationTable = {
-  borderCollapse: 'collapse' as const,
-  borderSpacing: '0px',
-  color: 'rgb(51,51,51)',
-  backgroundColor: 'rgb(250,250,250)',
-  borderRadius: '3px',
-  fontSize: '12px',
-};
-
-const informationTableRow = {
-  minHeight: '46px',
-};
-
-const informationTableColumn = {
-  paddingLeft: '20px',
-  borderStyle: 'solid',
-  borderColor: 'white',
-  borderWidth: '0px 1px 1px 0px',
-  minHeight: '44px',
-};
-
-const informationTableLabel = {
-  ...resetText,
-  color: 'rgb(102,102,102)',
-  fontSize: '10px',
-};
-
-const informationTableValue = {
-  fontSize: '12px',
-  margin: '0',
-  padding: '0',
-  lineHeight: 1.4,
-};
-
-const productTitleTable = {
-  ...informationTable,
-  margin: '30px 0 15px 0',
-  minHeight: '24px',
-};
-
-const productsTitle = {
-  background: '#fafafa',
-  paddingLeft: '10px',
-  fontSize: '14px',
-  fontWeight: '500',
-  margin: '0',
-};
-
-const productIcon = {
-  margin: '0 0 0 20px',
-  borderRadius: '14px',
-  border: '1px solid rgb(242,242,242)',
-};
-
-const productTitle = { fontSize: '12px', fontWeight: '600', ...resetText };
-
-const productDescription = {
-  fontSize: '12px',
-  color: 'rgb(102,102,102)',
-  ...resetText,
-};
-
-const productLink = {
-  fontSize: '12px',
-  color: 'rgb(0,112,201)',
-  textDecoration: 'none',
-};
-
-const divisor = {
-  marginLeft: '4px',
-  marginRight: '4px',
-  color: 'rgb(51,51,51)',
-  fontWeight: 200,
-};
-
-const productPriceTotal = {
-  margin: '0',
-  color: 'rgb(102,102,102)',
-  fontSize: '10px',
-  fontWeight: '600',
-  padding: '0px 30px 0px 0px',
-  textAlign: 'right' as const,
-};
-
-const productPrice = {
-  fontSize: '12px',
-  fontWeight: '600',
-  margin: '0',
-};
-
-const productPriceLarge = {
-  margin: '0px 20px 0px 0px',
-  fontSize: '16px',
-  fontWeight: '600',
-  whiteSpace: 'nowrap' as const,
-  textAlign: 'right' as const,
-};
-
-const productPriceWrapper = {
-  display: 'table-cell',
-  padding: '0px 20px 0px 0px',
-  width: '100px',
-  verticalAlign: 'top',
-};
-
-const productPriceLine = { margin: '30px 0 0 0' };
-
-const productPriceVerticalLine = {
-  minHeight: '48px',
-  paddingTop: '48px',
-  borderLeft: '1px solid',
-  borderColor: 'rgb(238,238,238)',
-};
-
-const productPriceLargeWrapper = { display: 'table-cell', width: '90px' };
-
-const productPriceLineBottom = { margin: '0 0 75px 0' };
-
-const block = { display: 'block' };
-
-const ctaTitle = {
-  display: 'block',
-  margin: '15px 0 0 0',
-};
-
-const ctaText = { fontSize: '24px', fontWeight: '500' };
-
-const walletWrapper = { display: 'table-cell', margin: '10px 0 0 0' };
-
-const walletLink = { color: 'rgb(0,126,255)', textDecoration: 'none' };
-
-const walletImage = {
-  display: 'inherit',
-  paddingRight: '8px',
-  verticalAlign: 'middle',
-};
-
-const walletBottomLine = { margin: '65px 0 20px 0' };
-
-const footerText = {
-  fontSize: '12px',
-  color: 'rgb(102,102,102)',
-  margin: '0',
-  lineHeight: 'auto',
-  marginBottom: '16px',
-};
-
-const footerTextCenter = {
-  fontSize: '12px',
-  color: 'rgb(102,102,102)',
-  margin: '20px 0',
-  lineHeight: 'auto',
-  textAlign: 'center' as const,
-};
-
-const footerLink = { color: 'rgb(0,115,255)' };
-
-const footerIcon = { display: 'block', margin: '40px 0 0 0' };
-
-const footerLinksWrapper = {
-  margin: '8px 0 0 0',
-  textAlign: 'center' as const,
-  fontSize: '12px',
-  color: 'rgb(102,102,102)',
-};
-
-const footerCopyright = {
-  margin: '25px 0 0 0',
-  textAlign: 'center' as const,
-  fontSize: '12px',
-  color: 'rgb(102,102,102)',
-};
-
-const walletLinkText = {
-  fontSize: '14px',
-  fontWeight: '400',
-  textDecoration: 'none',
-};
diff --git a/apps/demo/emails/receipts/nike-receipt.tsx b/apps/demo/emails/receipts/nike-receipt.tsx
index db13e06a87..d58e6a59a1 100644
--- a/apps/demo/emails/receipts/nike-receipt.tsx
+++ b/apps/demo/emails/receipts/nike-receipt.tsx
@@ -11,9 +11,10 @@ import {
   Preview,
   Row,
   Section,
+  Tailwind,
   Text,
 } from '@react-email/components';
-import type * as React from 'react';
+import tailwindConfig from '../tailwind.config';
 
 const baseUrl = process.env.VERCEL_URL
   ? `https://${process.env.VERCEL_URL}`
@@ -22,442 +23,336 @@ const baseUrl = process.env.VERCEL_URL
 export const NikeReceiptEmail = () => (
   <Html>
     <Head />
-    <Body style={main}>
-      <Preview>
-        Get your order summary, estimated delivery date and more
-      </Preview>
-      <Container style={container}>
-        <Section style={track.container}>
-          <Row>
-            <Column>
-              <Text style={global.paragraphWithBold}>Tracking Number</Text>
-              <Text style={track.number}>1ZV218970300071628</Text>
-            </Column>
-            <Column align="right">
-              <Link style={global.button}>Track Package</Link>
-            </Column>
-          </Row>
-        </Section>
-        <Hr style={global.hr} />
-        <Section style={message}>
-          <Img
-            src={`${baseUrl}/static/nike-logo.png`}
-            width="66"
-            height="22"
-            alt="Nike"
-            style={{ margin: 'auto' }}
-          />
-          <Heading style={global.heading}>It's On Its Way.</Heading>
-          <Text style={global.text}>
-            You order's is on its way. Use the link above to track its progress.
-          </Text>
-          <Text style={{ ...global.text, marginTop: 24 }}>
-            We´ve also charged your payment method for the cost of your order
-            and will be removing any authorization holds. For payment details,
-            please visit your Orders page on Nike.com or in the Nike app.
-          </Text>
-        </Section>
-        <Hr style={global.hr} />
-        <Section style={global.defaultPadding}>
-          <Text style={adressTitle}>Shipping to: Alan Turing</Text>
-          <Text style={{ ...global.text, fontSize: 14 }}>
-            2125 Chestnut St, San Francisco, CA 94123
-          </Text>
-        </Section>
-        <Hr style={global.hr} />
-        <Section
-          style={{ ...paddingX, paddingTop: '40px', paddingBottom: '40px' }}
-        >
-          <Row>
-            <Column>
-              <Img
-                src={`${baseUrl}/static/nike-product.png`}
-                alt="Brazil 2022/23 Stadium Away Women's Nike Dri-FIT Soccer Jersey"
-                style={{ float: 'left' }}
-                width="260px"
-              />
-            </Column>
-            <Column style={{ verticalAlign: 'top', paddingLeft: '12px' }}>
-              <Text style={{ ...paragraph, fontWeight: '500' }}>
-                Brazil 2022/23 Stadium Away Women's Nike Dri-FIT Soccer Jersey
-              </Text>
-              <Text style={global.text}>Size L (12–14)</Text>
-            </Column>
-          </Row>
-        </Section>
-        <Hr style={global.hr} />
-        <Section style={global.defaultPadding}>
-          <Row style={{ display: 'inline-flex', marginBottom: 40 }}>
-            <Column style={{ width: '170px' }}>
-              <Text style={global.paragraphWithBold}>Order Number</Text>
-              <Text style={track.number}>C0106373851</Text>
-            </Column>
-            <Column>
-              <Text style={global.paragraphWithBold}>Order Date</Text>
-              <Text style={track.number}>Sep 22, 2022</Text>
-            </Column>
-          </Row>
-          <Row>
-            <Column align="center">
-              <Link style={global.button}>Order Status</Link>
-            </Column>
-          </Row>
-        </Section>
-        <Hr style={global.hr} />
-        <Section style={paddingY}>
-          <Row>
-            <Text style={global.heading}>Top Picks For You</Text>
-          </Row>
-          <Row style={recomendations.container}>
-            <Column
-              style={{ ...recomendations.product, paddingLeft: '4px' }}
-              align="center"
-            >
-              <Img
-                src={`${baseUrl}/static/nike-recomendation-1.png`}
-                alt="Brazil 2022/23 Stadium Away Women's Nike Dri-FIT Soccer Jersey"
-                width="100%"
-              />
-              <Text style={recomendations.title}>
-                USWNT 2022/23 Stadium Home
-              </Text>
-              <Text style={recomendations.text}>
-                Women's Nike Dri-FIT Soccer Jersey
+    <Tailwind config={tailwindConfig}>
+      <Body className="bg-white font-nike">
+        <Preview>
+          Get your order summary, estimated delivery date and more
+        </Preview>
+        <Container className="my-[10px] mx-auto w-[600px] max-w-full border border-[#E5E5E5]">
+          <Section className="py-[22px] px-10 bg-[#F7F7F7]">
+            <Row>
+              <Column>
+                <Text className="m-0 text-[14px] leading-[2] font-bold">
+                  Tracking Number
+                </Text>
+                <Text className="mt-3 mb-0 font-medium text-[14px] leading-[1.4] text-[#6F6F6F]">
+                  1ZV218970300071628
+                </Text>
+              </Column>
+              <Column align="right">
+                <Link className="border border-solid border-[#929292] text-[16px] no-underline py-[10px] px-0 w-[220px] block text-center font-medium text-black">
+                  Track Package
+                </Link>
+              </Column>
+            </Row>
+          </Section>
+          <Hr className="border-[#E5E5E5] m-0" />
+          <Section className="py-10 px-[74px] text-center">
+            <Img
+              src={`${baseUrl}/static/nike-logo.png`}
+              width="66"
+              height="22"
+              alt="Nike"
+              className="mx-auto"
+            />
+            <Heading className="text-[32px] leading-[1.3] font-bold text-center -tracking-[1px]">
+              It's On Its Way.
+            </Heading>
+            <Text className="m-0 text-[14px] leading-[2] text-[#747474] font-medium">
+              You order's is on its way. Use the link above to track its
+              progress.
+            </Text>
+            <Text className="m-0 text-[14px] leading-[2] text-[#747474] font-medium mt-6">
+              We´ve also charged your payment method for the cost of your order
+              and will be removing any authorization holds. For payment details,
+              please visit your Orders page on Nike.com or in the Nike app.
+            </Text>
+          </Section>
+          <Hr className="border-[#E5E5E5] m-0" />
+          <Section className="py-[22px] px-10">
+            <Text className="m-0 text-[15px] leading-[2] font-bold">
+              Shipping to: Alan Turing
+            </Text>
+            <Text className="m-0 text-[14px] leading-[2] text-[#747474] font-medium">
+              2125 Chestnut St, San Francisco, CA 94123
+            </Text>
+          </Section>
+          <Hr className="border-[#E5E5E5] m-0" />
+          <Section className="py-10 px-10">
+            <Row>
+              <Column>
+                <Img
+                  src={`${baseUrl}/static/nike-product.png`}
+                  alt="Brazil 2022/23 Stadium Away Women's Nike Dri-FIT Soccer Jersey"
+                  className="float-left"
+                  width="260px"
+                />
+              </Column>
+              <Column className="align-top pl-3">
+                <Text className="m-0 text-[14px] leading-[2] font-medium">
+                  Brazil 2022/23 Stadium Away Women's Nike Dri-FIT Soccer Jersey
+                </Text>
+                <Text className="m-0 text-[14px] leading-[2] text-[#747474] font-medium">
+                  Size L (12–14)
+                </Text>
+              </Column>
+            </Row>
+          </Section>
+          <Hr className="border-[#E5E5E5] m-0" />
+          <Section className="py-[22px] px-10">
+            <Row className="inline-flex mb-10">
+              <Column className="w-[170px]">
+                <Text className="m-0 text-[14px] leading-[2] font-bold">
+                  Order Number
+                </Text>
+                <Text className="mt-3 mb-0 font-medium text-[14px] leading-[1.4] text-[#6F6F6F]">
+                  C0106373851
+                </Text>
+              </Column>
+              <Column>
+                <Text className="m-0 text-[14px] leading-[2] font-bold">
+                  Order Date
+                </Text>
+                <Text className="mt-3 mb-0 font-medium text-[14px] leading-[1.4] text-[#6F6F6F]">
+                  Sep 22, 2022
+                </Text>
+              </Column>
+            </Row>
+            <Row>
+              <Column align="center">
+                <Link className="border border-[#929292] no-underline py-[10px] px-0 w-[220px] text-[16px] block text-center font-medium text-black">
+                  Order Status
+                </Link>
+              </Column>
+            </Row>
+          </Section>
+          <Hr className="border-[#E5E5E5] m-0" />
+          <Section className="py-[22px]">
+            <Row>
+              <Text className="text-[32px] leading-[1.3] font-bold text-center tracking-[-1px]">
+                Top Picks For You
               </Text>
-            </Column>
-            <Column style={recomendations.product} align="center">
-              <Img
-                src={`${baseUrl}/static/nike-recomendation-2.png`}
-                alt="Brazil 2022/23 Stadium Away Women's Nike Dri-FIT Soccer Jersey"
-                width="100%"
-              />
-              <Text style={recomendations.title}>
-                Brazil 2022/23 Stadium Goalkeeper
+            </Row>
+            <Row className="py-5">
+              <Column
+                className="align-top text-left pl-1 pr-[2px]"
+                align="center"
+              >
+                <Img
+                  src={`${baseUrl}/static/nike-recomendation-1.png`}
+                  alt="Brazil 2022/23 Stadium Away Women's Nike Dri-FIT Soccer Jersey"
+                  width="100%"
+                />
+                <Text className="m-0 text-[15px] leading-none px-[10px] pt-3 font-medium">
+                  USWNT 2022/23 Stadium Home
+                </Text>
+                <Text className="m-0 text-[15px] leading-none px-[10px] pt-1 text-[#747474]">
+                  Women's Nike Dri-FIT Soccer Jersey
+                </Text>
+              </Column>
+              <Column
+                className="align-top text-left pl-[2px] pr-[2px]"
+                align="center"
+              >
+                <Img
+                  src={`${baseUrl}/static/nike-recomendation-2.png`}
+                  alt="Brazil 2022/23 Stadium Away Women's Nike Dri-FIT Soccer Jersey"
+                  width="100%"
+                />
+                <Text className="m-0 text-[15px] leading-none px-[10px] pt-3 font-medium">
+                  Brazil 2022/23 Stadium Goalkeeper
+                </Text>
+                <Text className="m-0 text-[15px] leading-none px-[10px] pt-1 text-[#747474]">
+                  Men's Nike Dri-FIT Short-Sleeve Football Shirt
+                </Text>
+              </Column>
+              <Column
+                className="align-top text-left pl-[2px] pr-[2px]"
+                align="center"
+              >
+                <Img
+                  src={`${baseUrl}/static/nike-recomendation-4.png`}
+                  alt="Brazil 2022/23 Stadium Away Women's Nike Dri-FIT Soccer Jersey"
+                  width="100%"
+                />
+                <Text className="m-0 text-[15px] leading-none px-[10px] pt-3 font-medium">
+                  FFF
+                </Text>
+                <Text className="m-0 text-[15px] leading-none px-[10px] pt-1 text-[#747474]">
+                  Women's Soccer Jacket
+                </Text>
+              </Column>
+              <Column
+                className="align-top text-left pl-[2px] pr-1"
+                align="center"
+              >
+                <Img
+                  src={`${baseUrl}/static/nike-recomendation-4.png`}
+                  alt="Brazil 2022/23 Stadium Away Women's Nike Dri-FIT Soccer Jersey"
+                  width="100%"
+                />
+                <Text className="m-0 text-[15px] leading-none px-[10px] pt-3 font-medium">
+                  FFF
+                </Text>
+                <Text className="m-0 text-[15px] leading-none px-[10px] pt-1 text-[#747474]">
+                  Women's Nike Pre-Match Football Top
+                </Text>
+              </Column>
+            </Row>
+          </Section>
+          <Hr className="border-[#E5E5E5] m-0" />
+          <Section className="px-5 pt-5 bg-[#F7F7F7]">
+            <Row>
+              <Text className="px-5 font-bold">Get Help</Text>
+            </Row>
+            <Row className="py-[22px] px-5">
+              <Column className="w-1/3" colSpan={1}>
+                <Link
+                  href="https://www.nike.com/"
+                  className="text-[13.5px] mt-0 font-medium text-black"
+                >
+                  Shipping Status
+                </Link>
+              </Column>
+              <Column className="w-1/3" colSpan={1}>
+                <Link
+                  href="https://www.nike.com/"
+                  className="text-[13.5px] mt-0 font-medium text-black"
+                >
+                  Shipping & Delivery
+                </Link>
+              </Column>
+              <Column className="w-1/3" colSpan={1}>
+                <Link
+                  href="https://www.nike.com/"
+                  className="text-[13.5px] mt-0 font-medium text-black"
+                >
+                  Returns & Exchanges
+                </Link>
+              </Column>
+            </Row>
+            <Row className="pb-[22px] px-5 pt-0">
+              <Column className="w-1/3" colSpan={1}>
+                <Link
+                  href="https://www.nike.com/"
+                  className="text-[13.5px] mt-0 font-medium text-black"
+                >
+                  How to Return
+                </Link>
+              </Column>
+              <Column className="w-2/3" colSpan={2}>
+                <Link
+                  href="https://www.nike.com/"
+                  className="text-[13.5px] mt-0 font-medium text-black"
+                >
+                  Contact Options
+                </Link>
+              </Column>
+            </Row>
+            <Hr className="border-[#E5E5E5] m-0" />
+            <Row className="px-5 pt-8 pb-[22px]">
+              <Column>
+                <Row>
+                  <Column className="w-4">
+                    <Img
+                      src={`${baseUrl}/static/nike-phone.png`}
+                      alt="Nike Phone"
+                      width="16px"
+                      height="26px"
+                      className="pr-[14px]"
+                    />
+                  </Column>
+                  <Column>
+                    <Text className="text-[13.5px] mt-0 font-medium text-black mb-0">
+                      1-800-806-6453
+                    </Text>
+                  </Column>
+                </Row>
+              </Column>
+              <Column>
+                <Text className="text-[13.5px] mt-0 font-medium text-black mb-0">
+                  4 am - 11 pm PT
+                </Text>
+              </Column>
+            </Row>
+          </Section>
+          <Hr className="border-[#E5E5E5] m-0" />
+          <Section className="py-[22px]">
+            <Row>
+              <Text className="text-[32px] leading-[1.3] font-bold text-center -tracking-[1px]">
+                Nike.com
               </Text>
-              <Text style={recomendations.text}>
-                Men's Nike Dri-FIT Short-Sleeve Football Shirt
+            </Row>
+            <Row className="w-[370px] mx-auto pt-3">
+              <Column align="center">
+                <Link
+                  href="https://www.nike.com/"
+                  className="font-medium text-black"
+                >
+                  Men
+                </Link>
+              </Column>
+              <Column align="center">
+                <Link
+                  href="https://www.nike.com/"
+                  className="font-medium text-black"
+                >
+                  Women
+                </Link>
+              </Column>
+              <Column align="center">
+                <Link
+                  href="https://www.nike.com/"
+                  className="font-medium text-black"
+                >
+                  Kids
+                </Link>
+              </Column>
+              <Column align="center">
+                <Link
+                  href="https://www.nike.com/"
+                  className="font-medium text-black"
+                >
+                  Customize
+                </Link>
+              </Column>
+            </Row>
+          </Section>
+          <Hr className="border-[#E5E5E5] m-0 mt-3" />
+          <Section className="py-[22px]">
+            <Row className="w-[166px] mx-auto">
+              <Column>
+                <Text className="m-0 text-[#AFAFAF] text-[13px] text-center">
+                  Web Version
+                </Text>
+              </Column>
+              <Column>
+                <Text className="m-0 text-[#AFAFAF] text-[13px] text-center">
+                  Privacy Policy
+                </Text>
+              </Column>
+            </Row>
+            <Row>
+              <Text className="m-0 text-[#AFAFAF] text-[13px] text-center py-[30px]">
+                Please contact us if you have any questions. (If you reply to
+                this email, we won't be able to see it.)
               </Text>
-            </Column>
-            <Column style={recomendations.product} align="center">
-              <Img
-                src={`${baseUrl}/static/nike-recomendation-4.png`}
-                alt="Brazil 2022/23 Stadium Away Women's Nike Dri-FIT Soccer Jersey"
-                width="100%"
-              />
-              <Text style={recomendations.title}>FFF</Text>
-              <Text style={recomendations.text}>Women's Soccer Jacket</Text>
-            </Column>
-            <Column
-              style={{ ...recomendations.product, paddingRight: '4px' }}
-              align="center"
-            >
-              <Img
-                src={`${baseUrl}/static/nike-recomendation-4.png`}
-                alt="Brazil 2022/23 Stadium Away Women's Nike Dri-FIT Soccer Jersey"
-                width="100%"
-              />
-              <Text style={recomendations.title}>FFF</Text>
-              <Text style={recomendations.text}>
-                Women's Nike Pre-Match Football Top
+            </Row>
+            <Row>
+              <Text className="m-0 text-[#AFAFAF] text-[13px] text-center">
+                © 2022 Nike, Inc. All Rights Reserved.
               </Text>
-            </Column>
-          </Row>
-        </Section>
-        <Hr style={global.hr} />
-        <Section style={menu.container}>
-          <Row>
-            <Text style={menu.title}>Get Help</Text>
-          </Row>
-          <Row style={menu.content}>
-            <Column style={{ width: '33%' }} colSpan={1}>
-              <Link href="https://www.nike.com/" style={menu.text}>
-                Shipping Status
-              </Link>
-            </Column>
-            <Column style={{ width: '33%' }} colSpan={1}>
-              <Link href="https://www.nike.com/" style={menu.text}>
-                Shipping & Delivery
-              </Link>
-            </Column>
-            <Column style={{ width: '33%' }} colSpan={1}>
-              <Link href="https://www.nike.com/" style={menu.text}>
-                Returns & Exchanges
-              </Link>
-            </Column>
-          </Row>
-          <Row style={{ ...menu.content, paddingTop: '0' }}>
-            <Column style={{ width: '33%' }} colSpan={1}>
-              <Link href="https://www.nike.com/" style={menu.text}>
-                How to Return
-              </Link>
-            </Column>
-            <Column style={{ width: '66%' }} colSpan={2}>
-              <Link href="https://www.nike.com/" style={menu.text}>
-                Contact Options
-              </Link>
-            </Column>
-          </Row>
-          <Hr style={global.hr} />
-          <Row style={menu.tel}>
-            <Column>
-              <Row>
-                <Column style={{ width: '16px' }}>
-                  <Img
-                    src={`${baseUrl}/static/nike-phone.png`}
-                    alt="Nike Phone"
-                    width="16px"
-                    height="26px"
-                    style={{ paddingRight: '14px' }}
-                  />
-                </Column>
-                <Column>
-                  <Text style={{ ...menu.text, marginBottom: '0' }}>
-                    1-800-806-6453
-                  </Text>
-                </Column>
-              </Row>
-            </Column>
-            <Column>
-              <Text
-                style={{
-                  ...menu.text,
-                  marginBottom: '0',
-                }}
-              >
-                4 am - 11 pm PT
+            </Row>
+            <Row>
+              <Text className="m-0 text-[#AFAFAF] text-[13px] text-center">
+                NIKE, INC. One Bowerman Drive, Beaverton, Oregon 97005, USA.
               </Text>
-            </Column>
-          </Row>
-        </Section>
-        <Hr style={global.hr} />
-        <Section style={paddingY}>
-          <Row>
-            <Text style={global.heading}>Nike.com</Text>
-          </Row>
-          <Row style={categories.container}>
-            <Column align="center">
-              <Link href="https://www.nike.com/" style={categories.text}>
-                Men
-              </Link>
-            </Column>
-            <Column align="center">
-              <Link href="https://www.nike.com/" style={categories.text}>
-                Women
-              </Link>
-            </Column>
-            <Column align="center">
-              <Link href="https://www.nike.com/" style={categories.text}>
-                Kids
-              </Link>
-            </Column>
-            <Column align="center">
-              <Link href="https://www.nike.com/" style={categories.text}>
-                Customize
-              </Link>
-            </Column>
-          </Row>
-        </Section>
-        <Hr style={{ ...global.hr, marginTop: '12px' }} />
-        <Section style={paddingY}>
-          <Row style={footer.policy}>
-            <Column>
-              <Text style={footer.text}>Web Version</Text>
-            </Column>
-            <Column>
-              <Text style={footer.text}>Privacy Policy</Text>
-            </Column>
-          </Row>
-          <Row>
-            <Text style={{ ...footer.text, paddingTop: 30, paddingBottom: 30 }}>
-              Please contact us if you have any questions. (If you reply to this
-              email, we won't be able to see it.)
-            </Text>
-          </Row>
-          <Row>
-            <Text style={footer.text}>
-              © 2022 Nike, Inc. All Rights Reserved.
-            </Text>
-          </Row>
-          <Row>
-            <Text style={footer.text}>
-              NIKE, INC. One Bowerman Drive, Beaverton, Oregon 97005, USA.
-            </Text>
-          </Row>
-        </Section>
-      </Container>
-    </Body>
+            </Row>
+          </Section>
+        </Container>
+      </Body>
+    </Tailwind>
   </Html>
 );
 
 export default NikeReceiptEmail;
-
-const paddingX = {
-  paddingLeft: '40px',
-  paddingRight: '40px',
-};
-
-const paddingY = {
-  paddingTop: '22px',
-  paddingBottom: '22px',
-};
-
-const paragraph = {
-  margin: '0',
-  lineHeight: '2',
-};
-
-const global = {
-  paddingX,
-  paddingY,
-  defaultPadding: {
-    ...paddingX,
-    ...paddingY,
-  },
-  paragraphWithBold: { ...paragraph, fontWeight: 'bold' },
-  heading: {
-    fontSize: '32px',
-    lineHeight: '1.3',
-    fontWeight: '700',
-    textAlign: 'center',
-    letterSpacing: '-1px',
-  } as React.CSSProperties,
-  text: {
-    ...paragraph,
-    color: '#747474',
-    fontWeight: '500',
-  },
-  button: {
-    border: '1px solid #929292',
-    fontSize: '16px',
-    textDecoration: 'none',
-    padding: '10px 0px',
-    width: '220px',
-    display: 'block',
-    textAlign: 'center',
-    fontWeight: 500,
-    color: '#000',
-  } as React.CSSProperties,
-  hr: {
-    borderColor: '#E5E5E5',
-    margin: '0',
-  },
-};
-
-const main = {
-  backgroundColor: '#ffffff',
-  fontFamily:
-    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
-};
-
-const container = {
-  margin: '10px auto',
-  width: '600px',
-  maxWidth: '100%',
-  border: '1px solid #E5E5E5',
-};
-
-const track = {
-  container: {
-    padding: '22px 40px',
-    backgroundColor: '#F7F7F7',
-  },
-  number: {
-    margin: '12px 0 0 0',
-    fontWeight: 500,
-    lineHeight: '1.4',
-    color: '#6F6F6F',
-  },
-};
-
-const message = {
-  padding: '40px 74px',
-  textAlign: 'center',
-} as React.CSSProperties;
-
-const adressTitle = {
-  ...paragraph,
-  fontSize: '15px',
-  fontWeight: 'bold',
-};
-
-const recomendationsText = {
-  margin: '0',
-  fontSize: '15px',
-  lineHeight: '1',
-  paddingLeft: '10px',
-  paddingRight: '10px',
-};
-
-const recomendations = {
-  container: {
-    padding: '20px 0',
-  },
-  product: {
-    verticalAlign: 'top',
-    textAlign: 'left' as const,
-    paddingLeft: '2px',
-    paddingRight: '2px',
-  },
-  title: { ...recomendationsText, paddingTop: '12px', fontWeight: '500' },
-  text: {
-    ...recomendationsText,
-    paddingTop: '4px',
-    color: '#747474',
-  },
-};
-
-const menu = {
-  container: {
-    paddingLeft: '20px',
-    paddingRight: '20px',
-    paddingTop: '20px',
-    backgroundColor: '#F7F7F7',
-  },
-  content: {
-    ...paddingY,
-    paddingLeft: '20px',
-    paddingRight: '20px',
-  },
-  title: {
-    paddingLeft: '20px',
-    paddingRight: '20px',
-    fontWeight: 'bold',
-  },
-  text: {
-    fontSize: '13.5px',
-    marginTop: 0,
-    fontWeight: 500,
-    color: '#000',
-  },
-  tel: {
-    paddingLeft: '20px',
-    paddingRight: '20px',
-    paddingTop: '32px',
-    paddingBottom: '22px',
-  },
-};
-
-const categories = {
-  container: {
-    width: '370px',
-    margin: 'auto',
-    paddingTop: '12px',
-  },
-  text: {
-    fontWeight: '500',
-    color: '#000',
-  },
-};
-
-const footer = {
-  policy: {
-    width: '166px',
-    margin: 'auto',
-  },
-  text: {
-    margin: '0',
-    color: '#AFAFAF',
-    fontSize: '13px',
-    textAlign: 'center',
-  } as React.CSSProperties,
-};
diff --git a/apps/demo/emails/reset-password/dropbox-reset-password.tsx b/apps/demo/emails/reset-password/dropbox-reset-password.tsx
index 91a4ef6d83..907fe6e021 100644
--- a/apps/demo/emails/reset-password/dropbox-reset-password.tsx
+++ b/apps/demo/emails/reset-password/dropbox-reset-password.tsx
@@ -8,8 +8,10 @@ import {
   Link,
   Preview,
   Section,
+  Tailwind,
   Text,
 } from '@react-email/components';
+import tailwindConfig from '../tailwind.config';
 
 interface DropboxResetPasswordEmailProps {
   userFirstname?: string;
@@ -27,39 +29,48 @@ export const DropboxResetPasswordEmail = ({
   return (
     <Html>
       <Head />
-      <Body style={main}>
-        <Preview>Dropbox reset your password</Preview>
-        <Container style={container}>
-          <Img
-            src={`${baseUrl}/static/dropbox-logo.png`}
-            width="40"
-            height="33"
-            alt="Dropbox"
-          />
-          <Section>
-            <Text style={text}>Hi {userFirstname},</Text>
-            <Text style={text}>
-              Someone recently requested a password change for your Dropbox
-              account. If this was you, you can set a new password here:
-            </Text>
-            <Button style={button} href={resetPasswordLink}>
-              Reset password
-            </Button>
-            <Text style={text}>
-              If you don&apos;t want to change your password or didn&apos;t
-              request this, just ignore and delete this message.
-            </Text>
-            <Text style={text}>
-              To keep your account secure, please don&apos;t forward this email
-              to anyone. See our Help Center for{' '}
-              <Link style={anchor} href={resetPasswordLink}>
-                more security tips.
-              </Link>
-            </Text>
-            <Text style={text}>Happy Dropboxing!</Text>
-          </Section>
-        </Container>
-      </Body>
+      <Tailwind config={tailwindConfig}>
+        <Body className="bg-[#f6f9fc] py-2.5">
+          <Preview>Dropbox reset your password</Preview>
+          <Container className="bg-white border border-solid border-[#f0f0f0] p-[45px]">
+            <Img
+              src={`${baseUrl}/static/dropbox-logo.png`}
+              width="40"
+              height="33"
+              alt="Dropbox"
+            />
+            <Section>
+              <Text className="text-base font-dropbox font-light text-[#404040] leading-[26px]">
+                Hi {userFirstname},
+              </Text>
+              <Text className="text-base font-dropbox font-light text-[#404040] leading-[26px]">
+                Someone recently requested a password change for your Dropbox
+                account. If this was you, you can set a new password here:
+              </Text>
+              <Button
+                className="bg-[#007ee6] rounded text-white text-[15px] no-underline text-center font-dropbox-sans block w-[210px] py-[14px] px-[7px]"
+                href={resetPasswordLink}
+              >
+                Reset password
+              </Button>
+              <Text className="text-base font-dropbox font-light text-[#404040] leading-[26px]">
+                If you don&apos;t want to change your password or didn&apos;t
+                request this, just ignore and delete this message.
+              </Text>
+              <Text className="text-base font-dropbox font-light text-[#404040] leading-[26px]">
+                To keep your account secure, please don&apos;t forward this
+                email to anyone. See our Help Center for{' '}
+                <Link className="underline" href={resetPasswordLink}>
+                  more security tips.
+                </Link>
+              </Text>
+              <Text className="text-base font-dropbox font-light text-[#404040] leading-[26px]">
+                Happy Dropboxing!
+              </Text>
+            </Section>
+          </Container>
+        </Body>
+      </Tailwind>
     </Html>
   );
 };
@@ -69,41 +80,6 @@ DropboxResetPasswordEmail.PreviewProps = {
   resetPasswordLink: 'https://www.dropbox.com',
 } as DropboxResetPasswordEmailProps;
 
-export default DropboxResetPasswordEmail;
-
-const main = {
-  backgroundColor: '#f6f9fc',
-  padding: '10px 0',
-};
+DropboxResetPasswordEmail.tailwindConfig = tailwindConfig;
 
-const container = {
-  backgroundColor: '#ffffff',
-  border: '1px solid #f0f0f0',
-  padding: '45px',
-};
-
-const text = {
-  fontSize: '16px',
-  fontFamily:
-    "'Open Sans', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif",
-  fontWeight: '300',
-  color: '#404040',
-  lineHeight: '26px',
-};
-
-const button = {
-  backgroundColor: '#007ee6',
-  borderRadius: '4px',
-  color: '#fff',
-  fontFamily: "'Open Sans', 'Helvetica Neue', Arial",
-  fontSize: '15px',
-  textDecoration: 'none',
-  textAlign: 'center' as const,
-  display: 'block',
-  width: '210px',
-  padding: '14px 7px',
-};
-
-const anchor = {
-  textDecoration: 'underline',
-};
+export default DropboxResetPasswordEmail;
diff --git a/apps/demo/emails/reset-password/twitch-reset-password.tsx b/apps/demo/emails/reset-password/twitch-reset-password.tsx
index 60eb156c32..de99963778 100644
--- a/apps/demo/emails/reset-password/twitch-reset-password.tsx
+++ b/apps/demo/emails/reset-password/twitch-reset-password.tsx
@@ -9,8 +9,10 @@ import {
   Preview,
   Row,
   Section,
+  Tailwind,
   Text,
 } from '@react-email/components';
+import tailwindConfig from '../tailwind.config';
 
 interface TwitchResetPasswordEmailProps {
   username?: string;
@@ -33,83 +35,85 @@ export const TwitchResetPasswordEmail = ({
   return (
     <Html>
       <Head />
-      <Body style={main}>
-        <Preview>You updated the password for your Twitch account</Preview>
-        <Container style={container}>
-          <Section style={logo}>
-            <Img
-              width={114}
-              src={`${baseUrl}/static/twitch-logo.png`}
-              alt="Twitch"
-              style={logoImg}
-            />
-          </Section>
-          <Section style={sectionsBorders}>
+      <Tailwind config={tailwindConfig}>
+        <Body className="bg-[#efeef1] font-twitch">
+          <Preview>You updated the password for your Twitch account</Preview>
+          <Container className="max-w-[580px] my-[30px] mx-auto bg-white">
+            <Section className="p-[30px]">
+              <Img
+                width={114}
+                src={`${baseUrl}/static/twitch-logo.png`}
+                alt="Twitch"
+                className="mx-auto"
+              />
+            </Section>
+            <Section className="w-full">
+              <Row>
+                <Column className="[border-bottom:1px_solid_rgb(238,238,238)] w-[249px]" />
+                <Column className="[border-bottom:1px_solid_rgb(145,71,255)] w-[102px]" />
+                <Column className="[border-bottom:1px_solid_rgb(238,238,238)] w-[249px]" />
+              </Row>
+            </Section>
+            <Section className="pt-[5px] px-5 pb-[10px]">
+              <Text className="text-[14px] leading-[1.5]">Hi {username},</Text>
+              <Text className="text-[14px] leading-[1.5]">
+                You updated the password for your Twitch account on{' '}
+                {formattedDate}. If this was you, then no further action is
+                required.
+              </Text>
+              <Text className="text-[14px] leading-[1.5]">
+                However if you did NOT perform this password change, please{' '}
+                <Link href="https://www.twitch.tv" className="underline">
+                  reset your account password
+                </Link>{' '}
+                immediately.
+              </Text>
+              <Text className="text-[14px] leading-[1.5]">
+                Remember to use a password that is both strong and unique to
+                your Twitch account. To learn more about how to create a strong
+                and unique password,{' '}
+                <Link href="https://www.twitch.tv" className="underline">
+                  click here.
+                </Link>
+              </Text>
+              <Text className="text-[14px] leading-[1.5]">
+                Still have questions? Please contact{' '}
+                <Link href="https://www.twitch.tv" className="underline">
+                  Twitch Support
+                </Link>
+              </Text>
+              <Text className="text-[14px] leading-[1.5]">
+                Thanks,
+                <br />
+                Twitch Support Team
+              </Text>
+            </Section>
+          </Container>
+
+          <Section className="max-w-[580px] mx-auto">
             <Row>
-              <Column style={sectionBorder} />
-              <Column style={sectionCenter} />
-              <Column style={sectionBorder} />
+              <Column align="right" className="w-1/2 pr-2">
+                <Img
+                  src={`${baseUrl}/static/twitch-icon-twitter.png`}
+                  alt="Twitter"
+                />
+              </Column>
+              <Column align="left" className="w-1/2 pl-2">
+                <Img
+                  src={`${baseUrl}/static/twitch-icon-facebook.png`}
+                  alt="Facebook"
+                />
+              </Column>
+            </Row>
+            <Row>
+              <Text className="text-center text-[#706a7b]">
+                © 2022 Twitch, All Rights Reserved <br />
+                350 Bush Street, 2nd Floor, San Francisco, CA, 94104 - USA
+              </Text>
             </Row>
           </Section>
-          <Section style={content}>
-            <Text style={paragraph}>Hi {username},</Text>
-            <Text style={paragraph}>
-              You updated the password for your Twitch account on{' '}
-              {formattedDate}. If this was you, then no further action is
-              required.
-            </Text>
-            <Text style={paragraph}>
-              However if you did NOT perform this password change, please{' '}
-              <Link href="https://www.twitch.tv" style={link}>
-                reset your account password
-              </Link>{' '}
-              immediately.
-            </Text>
-            <Text style={paragraph}>
-              Remember to use a password that is both strong and unique to your
-              Twitch account. To learn more about how to create a strong and
-              unique password,{' '}
-              <Link href="https://www.twitch.tv" style={link}>
-                click here.
-              </Link>
-            </Text>
-            <Text style={paragraph}>
-              Still have questions? Please contact{' '}
-              <Link href="https://www.twitch.tv" style={link}>
-                Twitch Support
-              </Link>
-            </Text>
-            <Text style={paragraph}>
-              Thanks,
-              <br />
-              Twitch Support Team
-            </Text>
-          </Section>
-        </Container>
-
-        <Section style={footer}>
-          <Row>
-            <Column align="right" style={{ width: '50%', paddingRight: '8px' }}>
-              <Img
-                src={`${baseUrl}/static/twitch-icon-twitter.png`}
-                alt="Twitter"
-              />
-            </Column>
-            <Column align="left" style={{ width: '50%', paddingLeft: '8px' }}>
-              <Img
-                src={`${baseUrl}/static/twitch-icon-facebook.png`}
-                alt="Facebook"
-              />
-            </Column>
-          </Row>
-          <Row>
-            <Text style={{ textAlign: 'center', color: '#706a7b' }}>
-              © 2022 Twitch, All Rights Reserved <br />
-              350 Bush Street, 2nd Floor, San Francisco, CA, 94104 - USA
-            </Text>
-          </Row>
-        </Section>
-      </Body>
+        </Body>
+      </Tailwind>
     </Html>
   );
 };
@@ -120,56 +124,3 @@ TwitchResetPasswordEmail.PreviewProps = {
 } as TwitchResetPasswordEmailProps;
 
 export default TwitchResetPasswordEmail;
-
-const fontFamily = 'HelveticaNeue,Helvetica,Arial,sans-serif';
-
-const main = {
-  backgroundColor: '#efeef1',
-  fontFamily,
-};
-
-const paragraph = {
-  lineHeight: 1.5,
-  fontSize: 14,
-};
-
-const container = {
-  maxWidth: '580px',
-  margin: '30px auto',
-  backgroundColor: '#ffffff',
-};
-
-const footer = {
-  maxWidth: '580px',
-  margin: '0 auto',
-};
-
-const content = {
-  padding: '5px 20px 10px 20px',
-};
-
-const logo = {
-  padding: 30,
-};
-
-const logoImg = {
-  margin: '0 auto',
-};
-
-const sectionsBorders = {
-  width: '100%',
-};
-
-const sectionBorder = {
-  borderBottom: '1px solid rgb(238,238,238)',
-  width: '249px',
-};
-
-const sectionCenter = {
-  borderBottom: '1px solid rgb(145,71,255)',
-  width: '102px',
-};
-
-const link = {
-  textDecoration: 'underline',
-};
diff --git a/apps/demo/emails/reviews/airbnb-review.tsx b/apps/demo/emails/reviews/airbnb-review.tsx
index 52381120bd..d345f8d646 100644
--- a/apps/demo/emails/reviews/airbnb-review.tsx
+++ b/apps/demo/emails/reviews/airbnb-review.tsx
@@ -10,8 +10,10 @@ import {
   Preview,
   Row,
   Section,
+  Tailwind,
   Text,
 } from '@react-email/components';
+import tailwindConfig from '../tailwind.config';
 
 interface AirbnbReviewEmailProps {
   authorName?: string;
@@ -34,78 +36,100 @@ export const AirbnbReviewEmail = ({
     <Html>
       <Head />
 
-      <Body style={main}>
-        <Preview>{previewText}</Preview>
-        <Container style={container}>
-          <Section>
-            <Img
-              src={`${baseUrl}/static/airbnb-logo.png`}
-              width="96"
-              height="30"
-              alt="Airbnb"
-            />
-          </Section>
-          <Section>
-            <Img
-              src={authorImage}
-              width="96"
-              height="96"
-              alt={authorName}
-              style={userImage}
-            />
-          </Section>
-          <Section style={{ paddingBottom: '20px' }}>
-            <Row>
-              <Text style={heading}>Here's what {authorName} wrote</Text>
-              <Text style={review}>{reviewText}</Text>
-              <Text style={paragraph}>
-                Now that the review period is over, we’ve posted {authorName}
-                ’s review to your Airbnb profile.
-              </Text>
-              <Text style={{ ...paragraph, paddingBottom: '16px' }}>
-                While it’s too late to write a review of your own, you can send
-                your feedback to {authorName} using your Airbnb message thread.
-              </Text>
-
-              <Button style={button} href="https://www.airbnb.com">
-                Send My Feedback
-              </Button>
-            </Row>
-          </Section>
-
-          <Hr style={hr} />
-
-          <Section>
-            <Row>
-              <Text style={{ ...paragraph, fontWeight: '700' }}>
-                Common questions
-              </Text>
-              <Text>
-                <Link href="https://www.airbnb.com" style={link}>
-                  How do reviews work?
-                </Link>
-              </Text>
-              <Text>
-                <Link href="https://www.airbnb.com" style={link}>
-                  How do star ratings work?
+      <Tailwind config={tailwindConfig}>
+        <Body className="bg-white font-airbnb">
+          <Preview>{previewText}</Preview>
+          <Container className="mx-auto py-5 pb-12 w-[580px] max-w-full">
+            <Section>
+              <Img
+                src={`${baseUrl}/static/airbnb-logo.png`}
+                width="96"
+                height="30"
+                alt="Airbnb"
+              />
+            </Section>
+            <Section>
+              <Img
+                src={authorImage}
+                width="96"
+                height="96"
+                alt={authorName}
+                className="mx-auto mb-4 rounded-full"
+              />
+            </Section>
+            <Section className="pb-5">
+              <Row>
+                <Text className="text-[32px] leading-[1.3] font-bold text-[#484848]">
+                  Here's what {authorName} wrote
+                </Text>
+                <Text className="text-lg leading-[1.4] text-[#484848] p-6 bg-[#f2f3f3] rounded">
+                  {reviewText}
+                </Text>
+                <Text className="text-lg leading-[1.4] text-[#484848]">
+                  Now that the review period is over, we've posted {authorName}
+                  's review to your Airbnb profile.
+                </Text>
+                <Text className="text-lg leading-[1.4] text-[#484848] pb-4">
+                  While it's too late to write a review of your own, you can
+                  send your feedback to {authorName} using your Airbnb message
+                  thread.
+                </Text>
+
+                <Button
+                  className="bg-[#ff5a5f] rounded-sm text-white text-[18px] py-[19px] px-[30px] no-underline text-center block"
+                  href="https://www.airbnb.com"
+                >
+                  Send My Feedback
+                </Button>
+              </Row>
+            </Section>
+
+            <Hr className="border-[#cccccc] my-5" />
+
+            <Section>
+              <Row>
+                <Text className="text-lg leading-[1.4] text-[#484848] font-bold">
+                  Common questions
+                </Text>
+                <Text>
+                  <Link
+                    href="https://www.airbnb.com"
+                    className="text-lg leading-[1.4] text-[#ff5a5f] block"
+                  >
+                    How do reviews work?
+                  </Link>
+                </Text>
+                <Text>
+                  <Link
+                    href="https://www.airbnb.com"
+                    className="text-lg leading-[1.4] text-[#ff5a5f] block"
+                  >
+                    How do star ratings work?
+                  </Link>
+                </Text>
+                <Text>
+                  <Link
+                    href="https://www.airbnb.com"
+                    className="text-lg leading-[1.4] text-[#ff5a5f] block"
+                  >
+                    Can I leave a review after 14 days?
+                  </Link>
+                </Text>
+                <Hr className="border-[#cccccc] my-5" />
+                <Text className="text-[#9ca299] text-[14px] leading-[24px] mb-2.5">
+                  Airbnb, Inc., 888 Brannan St, San Francisco, CA 94103
+                </Text>
+                <Link
+                  href="https://www.airbnb.com"
+                  className="text-[14px] text-[#9ca299] underline"
+                >
+                  Report unsafe behavior
                 </Link>
-              </Text>
-              <Text>
-                <Link href="https://www.airbnb.com" style={link}>
-                  Can I leave a review after 14 days?
-                </Link>
-              </Text>
-              <Hr style={hr} />
-              <Text style={footer}>
-                Airbnb, Inc., 888 Brannan St, San Francisco, CA 94103
-              </Text>
-              <Link href="https://www.airbnb.com" style={reportLink}>
-                Report unsafe behavior
-              </Link>
-            </Row>
-          </Section>
-        </Container>
-      </Body>
+              </Row>
+            </Section>
+          </Container>
+        </Body>
+      </Tailwind>
     </Html>
   );
 };
@@ -119,77 +143,6 @@ AirbnbReviewEmail.PreviewProps = {
     host!”`,
 } as AirbnbReviewEmailProps;
 
-export default AirbnbReviewEmail;
-
-const main = {
-  backgroundColor: '#ffffff',
-  fontFamily:
-    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
-};
-
-const container = {
-  margin: '0 auto',
-  padding: '20px 0 48px',
-  width: '580px',
-  maxWidth: '100%',
-};
-
-const userImage = {
-  margin: '0 auto',
-  marginBottom: '16px',
-  borderRadius: '50%',
-};
-
-const heading = {
-  fontSize: '32px',
-  lineHeight: '1.3',
-  fontWeight: '700',
-  color: '#484848',
-};
-
-const paragraph = {
-  fontSize: '18px',
-  lineHeight: '1.4',
-  color: '#484848',
-};
-
-const review = {
-  ...paragraph,
-  padding: '24px',
-  backgroundColor: '#f2f3f3',
-  borderRadius: '4px',
-};
-
-const button = {
-  backgroundColor: '#ff5a5f',
-  borderRadius: '3px',
-  color: '#fff',
-  fontSize: '18px',
-  padding: '19px 30px',
-  textDecoration: 'none',
-  textAlign: 'center' as const,
-  display: 'block',
-};
-
-const link = {
-  ...paragraph,
-  color: '#ff5a5f',
-  display: 'block',
-};
-
-const reportLink = {
-  fontSize: '14px',
-  color: '#9ca299',
-  textDecoration: 'underline',
-};
+AirbnbReviewEmail.tailwindConfig = tailwindConfig;
 
-const hr = {
-  borderColor: '#cccccc',
-  margin: '20px 0',
-};
-
-const footer = {
-  color: '#9ca299',
-  fontSize: '14px',
-  marginBottom: '10px',
-};
+export default AirbnbReviewEmail;
diff --git a/apps/demo/emails/reviews/amazon-review.tsx b/apps/demo/emails/reviews/amazon-review.tsx
index 08fb4a2ffb..02da9acef4 100644
--- a/apps/demo/emails/reviews/amazon-review.tsx
+++ b/apps/demo/emails/reviews/amazon-review.tsx
@@ -10,8 +10,10 @@ import {
   Preview,
   Row,
   Section,
+  Tailwind,
   Text,
 } from '@react-email/components';
+import tailwindConfig from '../tailwind.config';
 
 interface AmazonReviewEmailProps {
   titleText?: string;
@@ -38,204 +40,158 @@ export const AmazonReviewEmail = ({
     <Html>
       <Head />
 
-      <Body style={main}>
-        <Preview>Amazon Review</Preview>
-        <Container style={container}>
-          <Section>
-            <Row>
-              <Column align="center">
-                <Link href="https://www.amazon.com">
+      <Tailwind config={tailwindConfig}>
+        <Body className="font-amazon bg-white">
+          <Preview>Amazon Review</Preview>
+          <Container className="border-t-4 border-solid border-[#FF9900] mx-auto p-5 w-[640px]">
+            <Section>
+              <Row>
+                <Column align="center">
+                  <Link href="https://www.amazon.com">
+                    <Img
+                      src={`${baseUrl}/static/amazon-prime-logo.png`}
+                      width="109"
+                      height="48"
+                      alt="Amazon Prime Logo"
+                    />
+                  </Link>
+                </Column>
+              </Row>
+            </Section>
+
+            <Section>
+              <Row>
+                <Column align="center">
+                  <Text className="text-[#232f3e] text-4xl leading-[38px] font-normal my-5">
+                    {titleText}
+                  </Text>
+                  <Text>{reviewText}</Text>
+                </Column>
+              </Row>
+            </Section>
+
+            <Section>
+              <Row>
+                <Column>
                   <Img
-                    src={`${baseUrl}/static/amazon-prime-logo.png`}
-                    width="109"
-                    height="48"
-                    alt="Amazon Prime Logo"
+                    src={`${baseUrl}/static/amazon-book.jpg`}
+                    alt="Amazon Book"
+                    width="274"
+                    height="350"
                   />
-                </Link>
-              </Column>
-            </Row>
-          </Section>
-
-          <Section>
-            <Row>
-              <Column align="center">
-                <Text style={title}>{titleText}</Text>
-                <Text>{reviewText}</Text>
-              </Column>
-            </Row>
-          </Section>
-
-          <Section>
-            <Row>
-              <Column>
-                <Img
-                  src={`${baseUrl}/static/amazon-book.jpg`}
-                  alt="Amazon Book"
-                  width="274"
-                  height="350"
-                />
-              </Column>
-
-              <Column style={ratingContent}>
-                <Text>
-                  14 Habits of Highly Productive Developers (English Edition)
-                </Text>
-                <Text>Start with rating this product</Text>
-
-                {reviwStars.map((star, index) => (
+                </Column>
+
+                <Column className="pl-[30px]">
+                  <Text>
+                    14 Habits of Highly Productive Developers (English Edition)
+                  </Text>
+                  <Text>Start with rating this product</Text>
+
+                  {reviwStars.map((star, index) => (
+                    <Img
+                      key={index}
+                      src={star}
+                      alt="Amazon Rating"
+                      className="inline-block"
+                    />
+                  ))}
+
+                  <Text>
+                    Your reviews will be posted on Amazon using your public
+                    name.
+                    <Link>Check your public name.</Link>
+                  </Text>
+                </Column>
+              </Row>
+            </Section>
+
+            <Section>
+              <Row>
+                <Column align="center">
+                  <Text className="bg-[#008296] text-white py-2 px-0">
+                    How about evaluating a previous purchase?{' '}
+                    <Link className="text-white underline cursor-pointer">
+                      View more
+                    </Link>
+                  </Text>
+                </Column>
+              </Row>
+            </Section>
+
+            <Hr className="border-[#cccccc]" />
+
+            <Section>
+              <Row>
+                <Column>
                   <Img
-                    key={index}
-                    src={star}
-                    alt="Amazon Rating"
-                    style={rating}
+                    src={`${baseUrl}/static/amazon-logo.png`}
+                    alt="Amazon Logo"
+                    width="93"
+                    height="23"
                   />
-                ))}
-
-                <Text>
-                  Your reviews will be posted on Amazon using your public name.
-                  <Link>Check your public name.</Link>
+                </Column>
+
+                <Column align="right">
+                  {socialMediaIcons.map((src, index) => (
+                    <Img
+                      key={index}
+                      src={src}
+                      alt="Amazon Social Midia"
+                      width="30"
+                      height="30"
+                      className="inline-block ml-2.5"
+                    />
+                  ))}
+                </Column>
+              </Row>
+            </Section>
+
+            <Section>
+              <Row>
+                <Text className="text-[10px] text-[#666666] my-2">
+                  Customer reviews must adhere to the{' '}
+                  <Link className="text-[#666666] underline cursor-pointer">
+                    Community Guidelines
+                  </Link>{' '}
+                  .
                 </Text>
-              </Column>
-            </Row>
-          </Section>
-
-          <Section>
-            <Row>
-              <Column align="center">
-                <Text style={previewPurchase}>
-                  How about evaluating a previous purchase?{' '}
-                  <Link style={previewPurchaseLink}>View more</Link>
+                <Text className="text-[10px] text-[#666666] my-2">
+                  We hope this message was helpful to you. However, if you
+                  prefer not to receive this type of communication from{' '}
+                  <Link className="text-[#1155cc] underline cursor-pointer">
+                    Amazon.com
+                  </Link>{' '}
+                  at{' '}
+                  <Link className="text-[#1155cc] underline cursor-pointer">
+                    alanturing@gmail.com{' '}
+                  </Link>
+                  ,{' '}
+                  <Link className="text-[#999999] underline cursor-pointer">
+                    click here
+                  </Link>{' '}
+                  .
                 </Text>
-              </Column>
-            </Row>
-          </Section>
-
-          <Hr style={{ borderColor: '#cccccc' }} />
-
-          <Section>
-            <Row>
-              <Column>
-                <Img
-                  src={`${baseUrl}/static/amazon-logo.png`}
-                  alt="Amazon Logo"
-                  width="93"
-                  height="23"
-                />
-              </Column>
-
-              <Column align="right">
-                {socialMediaIcons.map((src, index) => (
-                  <Img
-                    key={index}
-                    src={src}
-                    alt="Amazon Social Midia"
-                    width="30"
-                    height="30"
-                    style={socialMedia}
-                  />
-                ))}
-              </Column>
-            </Row>
-          </Section>
-
-          <Section>
-            <Row>
-              <Text style={footerText}>
-                Customer reviews must adhere to the{' '}
-                <Link style={communityLink}>Community Guidelines</Link> .
-              </Text>
-              <Text style={footerText}>
-                We hope this message was helpful to you. However, if you prefer
-                not to receive this type of communication from{' '}
-                <Link style={urlLink}>Amazon.com</Link> at{' '}
-                <Link style={urlLink}>alanturing@gmail.com </Link>,{' '}
-                <Link style={clickHereLink}>click here</Link> .
-              </Text>
-              <Text style={footerText}>
-                Please note that product prices and availability are subject to
-                change.
-              </Text>
-              <Text style={footerText}>
-                © 2023 Amazon.com, Inc. or its affiliates. Amazon and all
-                associated marks are trademarks of Amazon.com, Inc. or its
-                affiliates.
-              </Text>
-              <Text style={footerText}>Reference: 706784740</Text>
-            </Row>
-          </Section>
-        </Container>
-      </Body>
+                <Text className="text-[10px] text-[#666666] my-2">
+                  Please note that product prices and availability are subject
+                  to change.
+                </Text>
+                <Text className="text-[10px] text-[#666666] my-2">
+                  © 2023 Amazon.com, Inc. or its affiliates. Amazon and all
+                  associated marks are trademarks of Amazon.com, Inc. or its
+                  affiliates.
+                </Text>
+                <Text className="text-[10px] text-[#666666] my-2">
+                  Reference: 706784740
+                </Text>
+              </Row>
+            </Section>
+          </Container>
+        </Body>
+      </Tailwind>
     </Html>
   );
 };
 
-export default AmazonReviewEmail;
-
-const main = {
-  fontFamily: 'Ember,Helvetica,Arial,sans-seri',
-  backgroundColor: '#ffffff',
-};
-
-const container = {
-  borderTop: '4px solid #FF9900',
-  margin: '0 auto',
-  padding: '20px',
-  width: '640px',
-};
-
-const title = {
-  color: '#232f3e',
-  fontSize: '36px',
-  lineHeight: '38px',
-  fontWeight: '400',
-  margin: '20px 0',
-};
-
-const ratingContent = {
-  paddingLeft: '30px',
-};
+AmazonReviewEmail.tailwindConfig = tailwindConfig;
 
-const rating = {
-  display: 'inline-block',
-};
-
-const previewPurchase = {
-  background: '#008296',
-  color: '#ffffff',
-  padding: '8px 0',
-};
-
-const previewPurchaseLink = {
-  color: '#ffffff',
-  textDecoration: 'underline',
-  cursor: 'pointer',
-};
-
-const socialMedia = {
-  display: 'inline-block',
-  marginLeft: '10px',
-};
-
-const communityLink = {
-  color: '#666666',
-  textDecoration: 'underline',
-  cursor: 'pointer',
-};
-
-const clickHereLink = {
-  color: '#999999',
-  textDecoration: 'underline',
-  cursor: 'pointer',
-};
-
-const urlLink = {
-  color: '#1155cc',
-  textDecoration: 'underline',
-  cursor: 'pointer',
-};
-
-const footerText = {
-  fontSize: '10px',
-  color: '#666666',
-  margin: '8px 0',
-};
+export default AmazonReviewEmail;
diff --git a/apps/demo/emails/tailwind.config.ts b/apps/demo/emails/tailwind.config.ts
new file mode 100644
index 0000000000..6568f85368
--- /dev/null
+++ b/apps/demo/emails/tailwind.config.ts
@@ -0,0 +1,93 @@
+import { pixelBasedPreset, type TailwindConfig } from '@react-email/components';
+
+export default {
+  presets: [pixelBasedPreset],
+  theme: {
+    fontFamily: {
+      amazon: ['Ember', 'Helvetica', 'Arial', 'sans-serif'],
+      koala: [
+        '-apple-system',
+        'BlinkMacSystemFont',
+        'Segoe UI',
+        'Roboto',
+        'Oxygen-Sans',
+        'Ubuntu',
+        'Cantarell',
+        'Helvetica Neue',
+        'sans-serif',
+      ],
+      raycast:
+        '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
+      slack:
+        "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
+      twitch: ['HelveticaNeue', 'Helvetica', 'Arial', 'sans-serif'],
+      'stack-overflow': ['Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'],
+      'stack-overflow-mono': 'Consolas,monospace',
+      github:
+        '-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"',
+      yelp: [
+        '-apple-system',
+        'BlinkMacSystemFont',
+        '"Segoe UI"',
+        'Roboto',
+        'Oxygen-Sans',
+        'Ubuntu',
+        'Cantarell',
+        '"Helvetica Neue"',
+        'sans-serif',
+      ],
+      nike: [
+        '-apple-system',
+        'BlinkMacSystemFont',
+        '"Segoe UI"',
+        'Roboto',
+        'Oxygen-Sans',
+        'Ubuntu',
+        'Cantarell',
+        '"Helvetica Neue"',
+        'sans-serif',
+      ],
+      linear:
+        '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
+      stripe: [
+        '-apple-system',
+        'BlinkMacSystemFont',
+        '"Segoe UI"',
+        'Roboto',
+        '"Helvetica Neue"',
+        'Ubuntu',
+        'sans-serif',
+      ],
+      notion:
+        "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
+      aws: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
+      airbnb: [
+        '-apple-system',
+        'BlinkMacSystemFont',
+        '"Segoe UI"',
+        'Roboto',
+        'Oxygen-Sans',
+        'Ubuntu',
+        'Cantarell',
+        '"Helvetica Neue"',
+        'sans-serif',
+      ],
+      apple: ['"Helvetica Neue"', 'Helvetica', 'Arial', 'sans-serif'],
+      dropbox: [
+        'Open Sans',
+        'HelveticaNeue-Light',
+        'Helvetica Neue Light',
+        'Helvetica Neue',
+        'Helvetica',
+        'Arial',
+        'Lucida Grande',
+        'sans-serif',
+      ],
+      'dropbox-sans': ['Open Sans', 'Helvetica Neue', 'Arial'],
+      codepen: '"Google Sans",Roboto,RobotoDraft,Helvetica,Arial,sans-serif',
+      plaid: 'HelveticaNeue,Helvetica,Arial,sans-serif',
+      google:
+        '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
+    },
+  },
+} satisfies TailwindConfig;
diff --git a/apps/demo/emails/welcome/koala-welcome.tsx b/apps/demo/emails/welcome/koala-welcome.tsx
index 5ec1ebe0bc..1267a887ae 100644
--- a/apps/demo/emails/welcome/koala-welcome.tsx
+++ b/apps/demo/emails/welcome/koala-welcome.tsx
@@ -8,8 +8,10 @@ import {
   Img,
   Preview,
   Section,
+  Tailwind,
   Text,
 } from '@react-email/components';
+import tailwindConfig from '../tailwind.config';
 
 interface KoalaWelcomeEmailProps {
   userFirstname: string;
@@ -24,39 +26,47 @@ export const KoalaWelcomeEmail = ({
 }: KoalaWelcomeEmailProps) => (
   <Html>
     <Head />
-    <Body style={main}>
-      <Preview>
-        The sales intelligence platform that helps you uncover qualified leads.
-      </Preview>
-      <Container style={container}>
-        <Img
-          src={`${baseUrl}/static/koala-logo.png`}
-          width="170"
-          height="50"
-          alt="Koala"
-          style={logo}
-        />
-        <Text style={paragraph}>Hi {userFirstname},</Text>
-        <Text style={paragraph}>
-          Welcome to Koala, the sales intelligence platform that helps you
-          uncover qualified leads and close deals faster.
-        </Text>
-        <Section style={btnContainer}>
-          <Button style={button} href="https://getkoala.com">
-            Get started
-          </Button>
-        </Section>
-        <Text style={paragraph}>
-          Best,
-          <br />
-          The Koala team
-        </Text>
-        <Hr style={hr} />
-        <Text style={footer}>
-          470 Noor Ave STE B #1148, South San Francisco, CA 94080
-        </Text>
-      </Container>
-    </Body>
+    <Tailwind config={tailwindConfig}>
+      <Body className="bg-white font-koala">
+        <Preview>
+          The sales intelligence platform that helps you uncover qualified
+          leads.
+        </Preview>
+        <Container className="mx-auto py-5 pb-12">
+          <Img
+            src={`${baseUrl}/static/koala-logo.png`}
+            width="170"
+            height="50"
+            alt="Koala"
+            className="mx-auto"
+          />
+          <Text className="text-[16px] leading-[26px]">
+            Hi {userFirstname},
+          </Text>
+          <Text className="text-[16px] leading-[26px]">
+            Welcome to Koala, the sales intelligence platform that helps you
+            uncover qualified leads and close deals faster.
+          </Text>
+          <Section className="text-center">
+            <Button
+              className="bg-[#5F51E8] rounded-[3px] text-white text-[16px] no-underline text-center block p-3"
+              href="https://getkoala.com"
+            >
+              Get started
+            </Button>
+          </Section>
+          <Text className="text-[16px] leading-[26px]">
+            Best,
+            <br />
+            The Koala team
+          </Text>
+          <Hr className="border-[#cccccc] my-5" />
+          <Text className="text-[#8898aa] text-[12px]">
+            470 Noor Ave STE B #1148, South San Francisco, CA 94080
+          </Text>
+        </Container>
+      </Body>
+    </Tailwind>
   </Html>
 );
 
@@ -65,48 +75,3 @@ KoalaWelcomeEmail.PreviewProps = {
 } as KoalaWelcomeEmailProps;
 
 export default KoalaWelcomeEmail;
-
-const main = {
-  backgroundColor: '#ffffff',
-  fontFamily:
-    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
-};
-
-const container = {
-  margin: '0 auto',
-  padding: '20px 0 48px',
-};
-
-const logo = {
-  margin: '0 auto',
-};
-
-const paragraph = {
-  fontSize: '16px',
-  lineHeight: '26px',
-};
-
-const btnContainer = {
-  textAlign: 'center' as const,
-};
-
-const button = {
-  backgroundColor: '#5F51E8',
-  borderRadius: '3px',
-  color: '#fff',
-  fontSize: '16px',
-  textDecoration: 'none',
-  textAlign: 'center' as const,
-  display: 'block',
-  padding: '12px',
-};
-
-const hr = {
-  borderColor: '#cccccc',
-  margin: '20px 0',
-};
-
-const footer = {
-  color: '#8898aa',
-  fontSize: '12px',
-};
diff --git a/apps/demo/emails/welcome/stripe-welcome.tsx b/apps/demo/emails/welcome/stripe-welcome.tsx
index 9422531e01..1ceac00d5d 100644
--- a/apps/demo/emails/welcome/stripe-welcome.tsx
+++ b/apps/demo/emails/welcome/stripe-welcome.tsx
@@ -9,8 +9,10 @@ import {
   Link,
   Preview,
   Section,
+  Tailwind,
   Text,
 } from '@react-email/components';
+import tailwindConfig from '../tailwind.config';
 
 const baseUrl = process.env.VERCEL_URL
   ? `https://${process.env.VERCEL_URL}`
@@ -19,138 +21,98 @@ const baseUrl = process.env.VERCEL_URL
 export const StripeWelcomeEmail = () => (
   <Html>
     <Head />
-    <Body style={main}>
-      <Preview>You're now ready to make live transactions with Stripe!</Preview>
-      <Container style={container}>
-        <Section style={box}>
-          <Img
-            src={`${baseUrl}/static/stripe-logo.png`}
-            width="49"
-            height="21"
-            alt="Stripe"
-          />
-          <Hr style={hr} />
-          <Text style={paragraph}>
-            Thanks for submitting your account information. You're now ready to
-            make live transactions with Stripe!
-          </Text>
-          <Text style={paragraph}>
-            You can view your payments and a variety of other information about
-            your account right from your dashboard.
-          </Text>
-          <Button style={button} href="https://dashboard.stripe.com/login">
-            View your Stripe Dashboard
-          </Button>
-          <Hr style={hr} />
-          <Text style={paragraph}>
-            If you haven't finished your integration, you might find our{' '}
-            <Link
-              style={anchor}
-              href="https://docs.stripe.com/dashboard/basics"
+    <Tailwind config={tailwindConfig}>
+      <Body className="bg-[#f6f9fc] font-stripe">
+        <Preview>
+          You're now ready to make live transactions with Stripe!
+        </Preview>
+        <Container className="bg-white mx-auto py-5 pb-12 mb-16">
+          <Section className="px-12">
+            <Img
+              src={`${baseUrl}/static/stripe-logo.png`}
+              width="49"
+              height="21"
+              alt="Stripe"
+            />
+            <Hr className="border-[#e6ebf1] my-5" />
+            <Text className="text-[#525f7f] text-base leading-6 text-left">
+              Thanks for submitting your account information. You're now ready
+              to make live transactions with Stripe!
+            </Text>
+            <Text className="text-[#525f7f] text-base leading-6 text-left">
+              You can view your payments and a variety of other information
+              about your account right from your dashboard.
+            </Text>
+            <Button
+              className="bg-[#656ee8] rounded-[3px] text-white text-[16px] font-bold no-underline text-center block p-[10px]"
+              href="https://dashboard.stripe.com/login"
             >
-              docs
-            </Link>{' '}
-            handy.
-          </Text>
-          <Text style={paragraph}>
-            Once you're ready to start accepting payments, you'll just need to
-            use your live{' '}
-            <Link
-              style={anchor}
-              href="https://dashboard.stripe.com/login?redirect=%2Fapikeys"
-            >
-              API keys
-            </Link>{' '}
-            instead of your test API keys. Your account can simultaneously be
-            used for both test and live requests, so you can continue testing
-            while accepting live payments. Check out our{' '}
-            <Link
-              style={anchor}
-              href="https://docs.stripe.com/dashboard/basics"
-            >
-              tutorial about account basics
-            </Link>
-            .
-          </Text>
-          <Text style={paragraph}>
-            Finally, we've put together a{' '}
-            <Link
-              style={anchor}
-              href="https://docs.stripe.com/get-started/checklist/website"
-            >
-              quick checklist
-            </Link>{' '}
-            to ensure your website conforms to card network standards.
-          </Text>
-          <Text style={paragraph}>
-            We'll be here to help you with any step along the way. You can find
-            answers to most questions and get in touch with us on our{' '}
-            <Link style={anchor} href="https://support.stripe.com">
-              support site
-            </Link>
-            .
-          </Text>
-          <Text style={paragraph}>— The Stripe team</Text>
-          <Hr style={hr} />
-          <Text style={footer}>
-            Stripe, 354 Oyster Point Blvd, South San Francisco, CA 94080
-          </Text>
-        </Section>
-      </Container>
-    </Body>
+              View your Stripe Dashboard
+            </Button>
+            <Hr className="border-[#e6ebf1] my-5" />
+            <Text className="text-[#525f7f] text-base leading-6 text-left">
+              If you haven't finished your integration, you might find our{' '}
+              <Link
+                className="text-[#556cd6]"
+                href="https://docs.stripe.com/dashboard/basics"
+              >
+                docs
+              </Link>{' '}
+              handy.
+            </Text>
+            <Text className="text-[#525f7f] text-base leading-6 text-left">
+              Once you're ready to start accepting payments, you'll just need to
+              use your live{' '}
+              <Link
+                className="text-[#556cd6]"
+                href="https://dashboard.stripe.com/login?redirect=%2Fapikeys"
+              >
+                API keys
+              </Link>{' '}
+              instead of your test API keys. Your account can simultaneously be
+              used for both test and live requests, so you can continue testing
+              while accepting live payments. Check out our{' '}
+              <Link
+                className="text-[#556cd6]"
+                href="https://docs.stripe.com/dashboard/basics"
+              >
+                tutorial about account basics
+              </Link>
+              .
+            </Text>
+            <Text className="text-[#525f7f] text-base leading-6 text-left">
+              Finally, we've put together a{' '}
+              <Link
+                className="text-[#556cd6]"
+                href="https://docs.stripe.com/get-started/checklist/website"
+              >
+                quick checklist
+              </Link>{' '}
+              to ensure your website conforms to card network standards.
+            </Text>
+            <Text className="text-[#525f7f] text-base leading-6 text-left">
+              We'll be here to help you with any step along the way. You can
+              find answers to most questions and get in touch with us on our{' '}
+              <Link
+                className="text-[#556cd6]"
+                href="https://support.stripe.com"
+              >
+                support site
+              </Link>
+              .
+            </Text>
+            <Text className="text-[#525f7f] text-base leading-6 text-left">
+              — The Stripe team
+            </Text>
+            <Hr className="border-[#e6ebf1] my-5" />
+            <Text className="text-[#8898aa] text-xs leading-4">
+              Stripe, 354 Oyster Point Blvd, South San Francisco, CA 94080
+            </Text>
+          </Section>
+        </Container>
+      </Body>
+    </Tailwind>
   </Html>
 );
 
 export default StripeWelcomeEmail;
-
-const main = {
-  backgroundColor: '#f6f9fc',
-  fontFamily:
-    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif',
-};
-
-const container = {
-  backgroundColor: '#ffffff',
-  margin: '0 auto',
-  padding: '20px 0 48px',
-  marginBottom: '64px',
-};
-
-const box = {
-  padding: '0 48px',
-};
-
-const hr = {
-  borderColor: '#e6ebf1',
-  margin: '20px 0',
-};
-
-const paragraph = {
-  color: '#525f7f',
-
-  fontSize: '16px',
-  lineHeight: '24px',
-  textAlign: 'left' as const,
-};
-
-const anchor = {
-  color: '#556cd6',
-};
-
-const button = {
-  backgroundColor: '#656ee8',
-  borderRadius: '5px',
-  color: '#fff',
-  fontSize: '16px',
-  fontWeight: 'bold',
-  textDecoration: 'none',
-  textAlign: 'center' as const,
-  display: 'block',
-  padding: '10px',
-};
-
-const footer = {
-  color: '#8898aa',
-  fontSize: '12px',
-  lineHeight: '16px',
-};
diff --git a/apps/demo/package.json b/apps/demo/package.json
index 79ff536b09..c5e35d446c 100644
--- a/apps/demo/package.json
+++ b/apps/demo/package.json
@@ -9,15 +9,15 @@
     "export": "email-dev export"
   },
   "dependencies": {
-    "@react-email/components": "workspace:*",
+    "@react-email/components": "npm:@react-email/components@1.0.0-tailwindv4.5",
+    "email-dev": "workspace:*",
     "react": "^19",
-    "react-dom": "^19",
-    "email-dev": "workspace:*"
+    "react-dom": "^19"
   },
   "devDependencies": {
     "@react-email/preview-server": "workspace:*",
-    "next": "^15.3.2",
     "@types/react": "^19",
-    "@types/react-dom": "^19"
+    "@types/react-dom": "^19",
+    "next": "^15.3.2"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2894260d0f..ac3c67efc0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -57,8 +57,8 @@ importers:
   apps/demo:
     dependencies:
       '@react-email/components':
-        specifier: workspace:*
-        version: link:../../packages/components
+        specifier: npm:@react-email/components@1.0.0-tailwindv4.5
+        version: 1.0.0-tailwindv4.5(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       email-dev:
         specifier: workspace:*
         version: link:../../packages/react-email/dev
@@ -168,7 +168,7 @@ importers:
         version: 1.2.3(@types/react@19.0.1)(react@19.0.0)
       '@radix-ui/react-tabs':
         specifier: ^1.1.0
-        version: 1.1.13(@types/react-dom@19.0.1)(@types/react@19.0.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+        version: 1.1.2(@types/react-dom@19.0.1)(@types/react@19.0.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@radix-ui/react-tooltip':
         specifier: 1.2.8
         version: 1.2.8(@types/react-dom@19.0.1)(@types/react@19.0.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
@@ -456,10 +456,10 @@ importers:
         version: 13.1.0
       fs-extra:
         specifier: ^11.1.1
-        version: 11.3.2
+        version: 11.3.0
       log-symbols:
         specifier: ^7.0.0
-        version: 7.0.1
+        version: 7.0.0
       ora:
         specifier: ^8.0.0
         version: 8.2.0
@@ -788,16 +788,16 @@ importers:
         version: 2.0.0
       esbuild:
         specifier: ^0.25.0
-        version: 0.25.10
+        version: 0.25.0
       glob:
         specifier: ^11.0.0
-        version: 11.0.3
+        version: 11.0.1
       jiti:
         specifier: 2.4.2
         version: 2.4.2
       log-symbols:
         specifier: ^7.0.0
-        version: 7.0.1
+        version: 7.0.0
       mime-types:
         specifier: ^3.0.0
         version: 3.0.1
@@ -1478,6 +1478,12 @@ packages:
     cpu: [ppc64]
     os: [aix]
 
+  '@esbuild/aix-ppc64@0.25.0':
+    resolution: {integrity: sha512-O7vun9Sf8DFjH2UtqK8Ku3LkquL9SZL8OLY1T5NZkA34+wG3OQF7cl4Ql8vdNzM6fzBbYfLaiRLIOZ+2FOCgBQ==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [aix]
+
   '@esbuild/aix-ppc64@0.25.10':
     resolution: {integrity: sha512-0NFWnA+7l41irNuaSVlLfgNT12caWJVLzp5eAVhZ0z1qpxbockccEt3s+149rE64VUI3Ml2zt8Nv5JVc4QXTsw==}
     engines: {node: '>=18'}
@@ -1490,6 +1496,12 @@ packages:
     cpu: [arm64]
     os: [android]
 
+  '@esbuild/android-arm64@0.25.0':
+    resolution: {integrity: sha512-grvv8WncGjDSyUBjN9yHXNt+cq0snxXbDxy5pJtzMKGmmpPxeAmAhWxXI+01lU5rwZomDgD3kJwulEnhTRUd6g==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [android]
+
   '@esbuild/android-arm64@0.25.10':
     resolution: {integrity: sha512-LSQa7eDahypv/VO6WKohZGPSJDq5OVOo3UoFR1E4t4Gj1W7zEQMUhI+lo81H+DtB+kP+tDgBp+M4oNCwp6kffg==}
     engines: {node: '>=18'}
@@ -1502,6 +1514,12 @@ packages:
     cpu: [arm]
     os: [android]
 
+  '@esbuild/android-arm@0.25.0':
+    resolution: {integrity: sha512-PTyWCYYiU0+1eJKmw21lWtC+d08JDZPQ5g+kFyxP0V+es6VPPSUhM6zk8iImp2jbV6GwjX4pap0JFbUQN65X1g==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [android]
+
   '@esbuild/android-arm@0.25.10':
     resolution: {integrity: sha512-dQAxF1dW1C3zpeCDc5KqIYuZ1tgAdRXNoZP7vkBIRtKZPYe2xVr/d3SkirklCHudW1B45tGiUlz2pUWDfbDD4w==}
     engines: {node: '>=18'}
@@ -1514,6 +1532,12 @@ packages:
     cpu: [x64]
     os: [android]
 
+  '@esbuild/android-x64@0.25.0':
+    resolution: {integrity: sha512-m/ix7SfKG5buCnxasr52+LI78SQ+wgdENi9CqyCXwjVR2X4Jkz+BpC3le3AoBPYTC9NHklwngVXvbJ9/Akhrfg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [android]
+
   '@esbuild/android-x64@0.25.10':
     resolution: {integrity: sha512-MiC9CWdPrfhibcXwr39p9ha1x0lZJ9KaVfvzA0Wxwz9ETX4v5CHfF09bx935nHlhi+MxhA63dKRRQLiVgSUtEg==}
     engines: {node: '>=18'}
@@ -1526,6 +1550,12 @@ packages:
     cpu: [arm64]
     os: [darwin]
 
+  '@esbuild/darwin-arm64@0.25.0':
+    resolution: {integrity: sha512-mVwdUb5SRkPayVadIOI78K7aAnPamoeFR2bT5nszFUZ9P8UpK4ratOdYbZZXYSqPKMHfS1wdHCJk1P1EZpRdvw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [darwin]
+
   '@esbuild/darwin-arm64@0.25.10':
     resolution: {integrity: sha512-JC74bdXcQEpW9KkV326WpZZjLguSZ3DfS8wrrvPMHgQOIEIG/sPXEN/V8IssoJhbefLRcRqw6RQH2NnpdprtMA==}
     engines: {node: '>=18'}
@@ -1538,6 +1568,12 @@ packages:
     cpu: [x64]
     os: [darwin]
 
+  '@esbuild/darwin-x64@0.25.0':
+    resolution: {integrity: sha512-DgDaYsPWFTS4S3nWpFcMn/33ZZwAAeAFKNHNa1QN0rI4pUjgqf0f7ONmXf6d22tqTY+H9FNdgeaAa+YIFUn2Rg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [darwin]
+
   '@esbuild/darwin-x64@0.25.10':
     resolution: {integrity: sha512-tguWg1olF6DGqzws97pKZ8G2L7Ig1vjDmGTwcTuYHbuU6TTjJe5FXbgs5C1BBzHbJ2bo1m3WkQDbWO2PvamRcg==}
     engines: {node: '>=18'}
@@ -1550,6 +1586,12 @@ packages:
     cpu: [arm64]
     os: [freebsd]
 
+  '@esbuild/freebsd-arm64@0.25.0':
+    resolution: {integrity: sha512-VN4ocxy6dxefN1MepBx/iD1dH5K8qNtNe227I0mnTRjry8tj5MRk4zprLEdG8WPyAPb93/e4pSgi1SoHdgOa4w==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [freebsd]
+
   '@esbuild/freebsd-arm64@0.25.10':
     resolution: {integrity: sha512-3ZioSQSg1HT2N05YxeJWYR+Libe3bREVSdWhEEgExWaDtyFbbXWb49QgPvFH8u03vUPX10JhJPcz7s9t9+boWg==}
     engines: {node: '>=18'}
@@ -1562,6 +1604,12 @@ packages:
     cpu: [x64]
     os: [freebsd]
 
+  '@esbuild/freebsd-x64@0.25.0':
+    resolution: {integrity: sha512-mrSgt7lCh07FY+hDD1TxiTyIHyttn6vnjesnPoVDNmDfOmggTLXRv8Id5fNZey1gl/V2dyVK1VXXqVsQIiAk+A==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [freebsd]
+
   '@esbuild/freebsd-x64@0.25.10':
     resolution: {integrity: sha512-LLgJfHJk014Aa4anGDbh8bmI5Lk+QidDmGzuC2D+vP7mv/GeSN+H39zOf7pN5N8p059FcOfs2bVlrRr4SK9WxA==}
     engines: {node: '>=18'}
@@ -1574,6 +1622,12 @@ packages:
     cpu: [arm64]
     os: [linux]
 
+  '@esbuild/linux-arm64@0.25.0':
+    resolution: {integrity: sha512-9QAQjTWNDM/Vk2bgBl17yWuZxZNQIF0OUUuPZRKoDtqF2k4EtYbpyiG5/Dk7nqeK6kIJWPYldkOcBqjXjrUlmg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [linux]
+
   '@esbuild/linux-arm64@0.25.10':
     resolution: {integrity: sha512-5luJWN6YKBsawd5f9i4+c+geYiVEw20FVW5x0v1kEMWNq8UctFjDiMATBxLvmmHA4bf7F6hTRaJgtghFr9iziQ==}
     engines: {node: '>=18'}
@@ -1586,6 +1640,12 @@ packages:
     cpu: [arm]
     os: [linux]
 
+  '@esbuild/linux-arm@0.25.0':
+    resolution: {integrity: sha512-vkB3IYj2IDo3g9xX7HqhPYxVkNQe8qTK55fraQyTzTX/fxaDtXiEnavv9geOsonh2Fd2RMB+i5cbhu2zMNWJwg==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [linux]
+
   '@esbuild/linux-arm@0.25.10':
     resolution: {integrity: sha512-oR31GtBTFYCqEBALI9r6WxoU/ZofZl962pouZRTEYECvNF/dtXKku8YXcJkhgK/beU+zedXfIzHijSRapJY3vg==}
     engines: {node: '>=18'}
@@ -1598,6 +1658,12 @@ packages:
     cpu: [ia32]
     os: [linux]
 
+  '@esbuild/linux-ia32@0.25.0':
+    resolution: {integrity: sha512-43ET5bHbphBegyeqLb7I1eYn2P/JYGNmzzdidq/w0T8E2SsYL1U6un2NFROFRg1JZLTzdCoRomg8Rvf9M6W6Gg==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [linux]
+
   '@esbuild/linux-ia32@0.25.10':
     resolution: {integrity: sha512-NrSCx2Kim3EnnWgS4Txn0QGt0Xipoumb6z6sUtl5bOEZIVKhzfyp/Lyw4C1DIYvzeW/5mWYPBFJU3a/8Yr75DQ==}
     engines: {node: '>=18'}
@@ -1610,6 +1676,12 @@ packages:
     cpu: [loong64]
     os: [linux]
 
+  '@esbuild/linux-loong64@0.25.0':
+    resolution: {integrity: sha512-fC95c/xyNFueMhClxJmeRIj2yrSMdDfmqJnyOY4ZqsALkDrrKJfIg5NTMSzVBr5YW1jf+l7/cndBfP3MSDpoHw==}
+    engines: {node: '>=18'}
+    cpu: [loong64]
+    os: [linux]
+
   '@esbuild/linux-loong64@0.25.10':
     resolution: {integrity: sha512-xoSphrd4AZda8+rUDDfD9J6FUMjrkTz8itpTITM4/xgerAZZcFW7Dv+sun7333IfKxGG8gAq+3NbfEMJfiY+Eg==}
     engines: {node: '>=18'}
@@ -1622,6 +1694,12 @@ packages:
     cpu: [mips64el]
     os: [linux]
 
+  '@esbuild/linux-mips64el@0.25.0':
+    resolution: {integrity: sha512-nkAMFju7KDW73T1DdH7glcyIptm95a7Le8irTQNO/qtkoyypZAnjchQgooFUDQhNAy4iu08N79W4T4pMBwhPwQ==}
+    engines: {node: '>=18'}
+    cpu: [mips64el]
+    os: [linux]
+
   '@esbuild/linux-mips64el@0.25.10':
     resolution: {integrity: sha512-ab6eiuCwoMmYDyTnyptoKkVS3k8fy/1Uvq7Dj5czXI6DF2GqD2ToInBI0SHOp5/X1BdZ26RKc5+qjQNGRBelRA==}
     engines: {node: '>=18'}
@@ -1634,6 +1712,12 @@ packages:
     cpu: [ppc64]
     os: [linux]
 
+  '@esbuild/linux-ppc64@0.25.0':
+    resolution: {integrity: sha512-NhyOejdhRGS8Iwv+KKR2zTq2PpysF9XqY+Zk77vQHqNbo/PwZCzB5/h7VGuREZm1fixhs4Q/qWRSi5zmAiO4Fw==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [linux]
+
   '@esbuild/linux-ppc64@0.25.10':
     resolution: {integrity: sha512-NLinzzOgZQsGpsTkEbdJTCanwA5/wozN9dSgEl12haXJBzMTpssebuXR42bthOF3z7zXFWH1AmvWunUCkBE4EA==}
     engines: {node: '>=18'}
@@ -1646,6 +1730,12 @@ packages:
     cpu: [riscv64]
     os: [linux]
 
+  '@esbuild/linux-riscv64@0.25.0':
+    resolution: {integrity: sha512-5S/rbP5OY+GHLC5qXp1y/Mx//e92L1YDqkiBbO9TQOvuFXM+iDqUNG5XopAnXoRH3FjIUDkeGcY1cgNvnXp/kA==}
+    engines: {node: '>=18'}
+    cpu: [riscv64]
+    os: [linux]
+
   '@esbuild/linux-riscv64@0.25.10':
     resolution: {integrity: sha512-FE557XdZDrtX8NMIeA8LBJX3dC2M8VGXwfrQWU7LB5SLOajfJIxmSdyL/gU1m64Zs9CBKvm4UAuBp5aJ8OgnrA==}
     engines: {node: '>=18'}
@@ -1658,6 +1748,12 @@ packages:
     cpu: [s390x]
     os: [linux]
 
+  '@esbuild/linux-s390x@0.25.0':
+    resolution: {integrity: sha512-XM2BFsEBz0Fw37V0zU4CXfcfuACMrppsMFKdYY2WuTS3yi8O1nFOhil/xhKTmE1nPmVyvQJjJivgDT+xh8pXJA==}
+    engines: {node: '>=18'}
+    cpu: [s390x]
+    os: [linux]
+
   '@esbuild/linux-s390x@0.25.10':
     resolution: {integrity: sha512-3BBSbgzuB9ajLoVZk0mGu+EHlBwkusRmeNYdqmznmMc9zGASFjSsxgkNsqmXugpPk00gJ0JNKh/97nxmjctdew==}
     engines: {node: '>=18'}
@@ -1670,12 +1766,24 @@ packages:
     cpu: [x64]
     os: [linux]
 
+  '@esbuild/linux-x64@0.25.0':
+    resolution: {integrity: sha512-9yl91rHw/cpwMCNytUDxwj2XjFpxML0y9HAOH9pNVQDpQrBxHy01Dx+vaMu0N1CKa/RzBD2hB4u//nfc+Sd3Cw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [linux]
+
   '@esbuild/linux-x64@0.25.10':
     resolution: {integrity: sha512-QSX81KhFoZGwenVyPoberggdW1nrQZSvfVDAIUXr3WqLRZGZqWk/P4T8p2SP+de2Sr5HPcvjhcJzEiulKgnxtA==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [linux]
 
+  '@esbuild/netbsd-arm64@0.25.0':
+    resolution: {integrity: sha512-RuG4PSMPFfrkH6UwCAqBzauBWTygTvb1nxWasEJooGSJ/NwRw7b2HOwyRTQIU97Hq37l3npXoZGYMy3b3xYvPw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [netbsd]
+
   '@esbuild/netbsd-arm64@0.25.10':
     resolution: {integrity: sha512-AKQM3gfYfSW8XRk8DdMCzaLUFB15dTrZfnX8WXQoOUpUBQ+NaAFCP1kPS/ykbbGYz7rxn0WS48/81l9hFl3u4A==}
     engines: {node: '>=18'}
@@ -1688,12 +1796,24 @@ packages:
     cpu: [x64]
     os: [netbsd]
 
+  '@esbuild/netbsd-x64@0.25.0':
+    resolution: {integrity: sha512-jl+qisSB5jk01N5f7sPCsBENCOlPiS/xptD5yxOx2oqQfyourJwIKLRA2yqWdifj3owQZCL2sn6o08dBzZGQzA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [netbsd]
+
   '@esbuild/netbsd-x64@0.25.10':
     resolution: {integrity: sha512-7RTytDPGU6fek/hWuN9qQpeGPBZFfB4zZgcz2VK2Z5VpdUxEI8JKYsg3JfO0n/Z1E/6l05n0unDCNc4HnhQGig==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [netbsd]
 
+  '@esbuild/openbsd-arm64@0.25.0':
+    resolution: {integrity: sha512-21sUNbq2r84YE+SJDfaQRvdgznTD8Xc0oc3p3iW/a1EVWeNj/SdUCbm5U0itZPQYRuRTW20fPMWMpcrciH2EJw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openbsd]
+
   '@esbuild/openbsd-arm64@0.25.10':
     resolution: {integrity: sha512-5Se0VM9Wtq797YFn+dLimf2Zx6McttsH2olUBsDml+lm0GOCRVebRWUvDtkY4BWYv/3NgzS8b/UM3jQNh5hYyw==}
     engines: {node: '>=18'}
@@ -1706,6 +1826,12 @@ packages:
     cpu: [x64]
     os: [openbsd]
 
+  '@esbuild/openbsd-x64@0.25.0':
+    resolution: {integrity: sha512-2gwwriSMPcCFRlPlKx3zLQhfN/2WjJ2NSlg5TKLQOJdV0mSxIcYNTMhk3H3ulL/cak+Xj0lY1Ym9ysDV1igceg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [openbsd]
+
   '@esbuild/openbsd-x64@0.25.10':
     resolution: {integrity: sha512-XkA4frq1TLj4bEMB+2HnI0+4RnjbuGZfet2gs/LNs5Hc7D89ZQBHQ0gL2ND6Lzu1+QVkjp3x1gIcPKzRNP8bXw==}
     engines: {node: '>=18'}
@@ -1724,6 +1850,12 @@ packages:
     cpu: [x64]
     os: [sunos]
 
+  '@esbuild/sunos-x64@0.25.0':
+    resolution: {integrity: sha512-bxI7ThgLzPrPz484/S9jLlvUAHYMzy6I0XiU1ZMeAEOBcS0VePBFxh1JjTQt3Xiat5b6Oh4x7UC7IwKQKIJRIg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [sunos]
+
   '@esbuild/sunos-x64@0.25.10':
     resolution: {integrity: sha512-fswk3XT0Uf2pGJmOpDB7yknqhVkJQkAQOcW/ccVOtfx05LkbWOaRAtn5SaqXypeKQra1QaEa841PgrSL9ubSPQ==}
     engines: {node: '>=18'}
@@ -1736,6 +1868,12 @@ packages:
     cpu: [arm64]
     os: [win32]
 
+  '@esbuild/win32-arm64@0.25.0':
+    resolution: {integrity: sha512-ZUAc2YK6JW89xTbXvftxdnYy3m4iHIkDtK3CLce8wg8M2L+YZhIvO1DKpxrd0Yr59AeNNkTiic9YLf6FTtXWMw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [win32]
+
   '@esbuild/win32-arm64@0.25.10':
     resolution: {integrity: sha512-ah+9b59KDTSfpaCg6VdJoOQvKjI33nTaQr4UluQwW7aEwZQsbMCfTmfEO4VyewOxx4RaDT/xCy9ra2GPWmO7Kw==}
     engines: {node: '>=18'}
@@ -1748,6 +1886,12 @@ packages:
     cpu: [ia32]
     os: [win32]
 
+  '@esbuild/win32-ia32@0.25.0':
+    resolution: {integrity: sha512-eSNxISBu8XweVEWG31/JzjkIGbGIJN/TrRoiSVZwZ6pkC6VX4Im/WV2cz559/TXLcYbcrDN8JtKgd9DJVIo8GA==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [win32]
+
   '@esbuild/win32-ia32@0.25.10':
     resolution: {integrity: sha512-QHPDbKkrGO8/cz9LKVnJU22HOi4pxZnZhhA2HYHez5Pz4JeffhDjf85E57Oyco163GnzNCVkZK0b/n4Y0UHcSw==}
     engines: {node: '>=18'}
@@ -1760,6 +1904,12 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@esbuild/win32-x64@0.25.0':
+    resolution: {integrity: sha512-ZENoHJBxA20C2zFzh6AI4fT6RraMzjYw4xKWemRTRmRVtN9c5DcH9r/f2ihEkMjOW5eGgrwCslG/+Y/3bL+DHQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [win32]
+
   '@esbuild/win32-x64@0.25.10':
     resolution: {integrity: sha512-9KpxSVFCu0iK1owoez6aC/s/EdUQLDN3adTxGCqxMVhrPDj6bt5dbrHDXUuq+Bs2vATFBBrQS5vdQ/Ed2P+nbw==}
     engines: {node: '>=18'}
@@ -2295,14 +2445,6 @@ packages:
       '@types/node':
         optional: true
 
-  '@isaacs/balanced-match@4.0.1':
-    resolution: {integrity: sha512-yzMTt9lEb8Gv7zRioUilSglI0c0smZ9k5D65677DLWLtWJaXIS3CqcGyUFByYKlnUj6TkjLVs54fBl6+TiGQDQ==}
-    engines: {node: 20 || >=22}
-
-  '@isaacs/brace-expansion@5.0.0':
-    resolution: {integrity: sha512-ZT55BDLV0yv0RBm2czMiZ+SqCGO7AvmOM3G/w2xhVPH+te0aKgFjmBvGlL1dH+ql2tgGO3MVrbb3jCKyvpgnxA==}
-    engines: {node: 20 || >=22}
-
   '@isaacs/cliui@8.0.2':
     resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
     engines: {node: '>=12'}
@@ -2781,6 +2923,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-collection@1.1.1':
+    resolution: {integrity: sha512-LwT3pSho9Dljg+wY2KN2mrrh6y3qELfftINERIzBUO9e0N+t0oMTyn3k9iv+ZqgrwGkRnLpNJrsMv9BZlt2yuA==}
+    peerDependencies:
+      '@types/react': ^19.0.1
+      '@types/react-dom': ^19.0.1
+      react: ^19.0.0
+      react-dom: ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-collection@1.1.7':
     resolution: {integrity: sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==}
     peerDependencies:
@@ -3210,6 +3365,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-roving-focus@1.1.1':
+    resolution: {integrity: sha512-QE1RoxPGJ/Nm8Qmk0PxP8ojmoaS67i0s7hVssS7KuI2FQoc/uzVlZsqKfQvxPE6D8hICCPHJ4D88zNhT3OOmkw==}
+    peerDependencies:
+      '@types/react': ^19.0.1
+      '@types/react-dom': ^19.0.1
+      react: ^19.0.0
+      react-dom: ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-roving-focus@1.1.11':
     resolution: {integrity: sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==}
     peerDependencies:
@@ -3276,6 +3444,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-tabs@1.1.2':
+    resolution: {integrity: sha512-9u/tQJMcC2aGq7KXpGivMm1mgq7oRJKXphDwdypPd/j21j/2znamPU8WkXgnhUaTrSFNIt8XhOyCAupg8/GbwQ==}
+    peerDependencies:
+      '@types/react': ^19.0.1
+      '@types/react-dom': ^19.0.1
+      react: ^19.0.0
+      react-dom: ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-toggle-group@1.1.0':
     resolution: {integrity: sha512-PpTJV68dZU2oqqgq75Uzto5o/XfOVgkrJ9rulVmfTKxWp3HfUjHE6CP/WLRR4AzPX9HWxw7vFow2me85Yu+Naw==}
     peerDependencies:
@@ -3512,6 +3693,100 @@ packages:
   '@radix-ui/rect@1.1.1':
     resolution: {integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==}
 
+  '@react-email/body@0.1.1-tailwindv4.0':
+    resolution: {integrity: sha512-9yWjQmQw6/XLeus6vnr4rB09hVlJUW0+MwCT8aqngfIfDNcxF0muzmGG4wyUwhtFtoxnECEaivVhjvuJDCEnuw==}
+    peerDependencies:
+      react: ^19.0.0
+
+  '@react-email/button@0.2.1-tailwindv4.0':
+    resolution: {integrity: sha512-Dl8JfMsYApz+Jd3z4TTHeeLVak0dxu8Ms7gWy8fwT9/tu49ULGYWf7t1AEYtHG1OH4HN2UrGIDErJn1ACMR8TQ==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      react: ^19.0.0
+
+  '@react-email/code-block@0.1.1-tailwindv4.0':
+    resolution: {integrity: sha512-X9NV4lKKmGQobRU5t4B+OVe+RUtsOQ9Ej5HorFWFA0a3M0kaD8bbAvWgSD58S7mA2pFlwqhg7ti2ifMmQD+3Pw==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      react: ^19.0.0
+
+  '@react-email/code-inline@0.0.6-tailwindv4.0':
+    resolution: {integrity: sha512-2cZ1tzmVfKe4O3Xom/yEgBfNGrGS763xDLnhCter8R2GYUNBUEjJjAz/pXLiFjpqvSWPPH3elwowqURIB3orjQ==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      react: ^19.0.0
+
+  '@react-email/column@0.0.13':
+    resolution: {integrity: sha512-Lqq17l7ShzJG/d3b1w/+lVO+gp2FM05ZUo/nW0rjxB8xBICXOVv6PqjDnn3FXKssvhO5qAV20lHM6S+spRhEwQ==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      react: ^19.0.0
+
+  '@react-email/components@1.0.0-tailwindv4.5':
+    resolution: {integrity: sha512-q12JqHQk0r1ET4g5TS9pETKz38NrNCzdQlUp4rilpdfO8D5Ivjd5ly6ft7jRN+op7H+bmBl+bDkSJq8qfncmzQ==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      react: ^19.0.0
+
+  '@react-email/container@0.0.16-tailwindv4.0':
+    resolution: {integrity: sha512-RUgvF17EDOgjxwvPejNRf3j9w4PplHfBecRa/5vpL3QdTWrETIBIXDJCprStTNkjo81y+sD49iDwDcKuohMjWw==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      react: ^19.0.0
+
+  '@react-email/font@0.0.9':
+    resolution: {integrity: sha512-4zjq23oT9APXkerqeslPH3OZWuh5X4crHK6nx82mVHV2SrLba8+8dPEnWbaACWTNjOCbcLIzaC9unk7Wq2MIXw==}
+    peerDependencies:
+      react: ^19.0.0
+
+  '@react-email/head@0.0.12':
+    resolution: {integrity: sha512-X2Ii6dDFMF+D4niNwMAHbTkeCjlYYnMsd7edXOsi0JByxt9wNyZ9EnhFiBoQdqkE+SMDcu8TlNNttMrf5sJeMA==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      react: ^19.0.0
+
+  '@react-email/heading@0.0.16-tailwindv4.0':
+    resolution: {integrity: sha512-WbcKUHcCkyoaQZceNf/RmhSe/qqnRJnWrg13IFwCM3/7i7zFqMZz7XiLsyraOeqKPafb3K9/OZW3iM7oYy0TiA==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      react: ^19.0.0
+
+  '@react-email/hr@0.0.12-tailwindv4.0':
+    resolution: {integrity: sha512-N4cmqCuNt/35WjwiTsAl2YjMn/0JEF5BIkgdW5NbT3bypJq9uD6IuDrZuoQdhQF/U6nXKoAnDDM0olOJI5Fvfg==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      react: ^19.0.0
+
+  '@react-email/html@0.0.11':
+    resolution: {integrity: sha512-qJhbOQy5VW5qzU74AimjAR9FRFQfrMa7dn4gkEXKMB/S9xZN8e1yC1uA9C15jkXI/PzmJ0muDIWmFwatm5/+VA==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      react: ^19.0.0
+
+  '@react-email/img@0.0.12-tailwindv4.0':
+    resolution: {integrity: sha512-fyux6rY919CvYyQ3naIwIFEFwWsLVhwOdUDOrVkpjypB/5f4E39niM74xaMr/u1CNcWsxINwxlryp44tjAHGhw==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      react: ^19.0.0
+
+  '@react-email/link@0.0.13-tailwindv4.0':
+    resolution: {integrity: sha512-undFRiSltzPPdMmk/9OhAitDMqPxASiKo3ee9MSPUHyMz8VsaJmy8TPgOH/j6D30TObfcmH0fCQTrWH28qqbJw==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      react: ^19.0.0
+
+  '@react-email/markdown@0.0.15':
+    resolution: {integrity: sha512-UQA9pVm5sbflgtg3EX3FquUP4aMBzmLReLbGJ6DZQZnAskBF36aI56cRykDq1o+1jT+CKIK1CducPYziaXliag==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      react: ^19.0.0
+
+  '@react-email/preview@0.0.14-tailwindv4.0':
+    resolution: {integrity: sha512-20IIqdGeSGGWAy0hKvAS2XoQX1muE1K8wLYVyJBFNpX/ghuKUeSDno72Xb8egUFHGlDVwM5q735j7bXpH1/bgg==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      react: ^19.0.0
+
   '@react-email/render@1.0.6':
     resolution: {integrity: sha512-zNueW5Wn/4jNC1c5LFgXzbUdv5Lhms+FWjOvWAhal7gx5YVf0q6dPJ0dnR70+ifo59gcMLwCZEaTS9EEuUhKvQ==}
     engines: {node: '>=18.0.0'}
@@ -3519,12 +3794,31 @@ packages:
       react: ^19.0.0
       react-dom: ^19.0.0
 
+  '@react-email/render@1.3.2':
+    resolution: {integrity: sha512-oq8/BD/I/YspeuBjjdLJG6xaf9tsPYk+VWu8/mX9xWbRN0t0ExKSVm9sEBL6RsCpndQA2jbY2VgPEreIrzUgqw==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      react: ^19.0.0
+      react-dom: ^19.0.0
+
+  '@react-email/row@0.0.12':
+    resolution: {integrity: sha512-HkCdnEjvK3o+n0y0tZKXYhIXUNPDx+2vq1dJTmqappVHXS5tXS6W5JOPZr5j+eoZ8gY3PShI2LWj5rWF7ZEtIQ==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      react: ^19.0.0
+
   '@react-email/section@0.0.14':
     resolution: {integrity: sha512-+fYWLb4tPU1A/+GE5J1+SEMA7/wR3V30lQ+OR9t2kAJqNrARDbMx0bLnYnR1QL5TiFRz0pCF05SQUobk6gHEDQ==}
     engines: {node: '>=18.0.0'}
     peerDependencies:
       react: ^19.0.0
 
+  '@react-email/section@0.0.16':
+    resolution: {integrity: sha512-FjqF9xQ8FoeUZYKSdt8sMIKvoT9XF8BrzhT3xiFKdEMwYNbsDflcjfErJe3jb7Wj/es/lKTbV5QR1dnLzGpL3w==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      react: ^19.0.0
+
   '@react-email/tailwind@0.0.12':
     resolution: {integrity: sha512-s8Ch7GL30qRKScn9NWwItMqxjtzbyUtCnXfC6sL2YTVtulbfvZZ06W+aA0S6f7fdrVlOOlQzZuK/sVaQCHhcSw==}
     engines: {node: '>=18.0.0'}
@@ -3537,6 +3831,18 @@ packages:
     peerDependencies:
       react: ^19.0.0
 
+  '@react-email/tailwind@2.0.0-tailwindv4.3':
+    resolution: {integrity: sha512-uuTYJY+UZdq6mtq/wh2CANjsYv79DpcgVLFg5yBlME0DNHO+nQ5IHVNckVvWlvs2maS6IP8sUYWxuFgYqUvf6w==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      react: ^19.0.0
+
+  '@react-email/text@0.1.6-tailwindv4.0':
+    resolution: {integrity: sha512-IVoq2zqCzokjbeEtpFw0VgfL2z7O2K+BTG8nWMZKofUf8UX66X3JwdOGRw/K6U3XS6IahE9gy3yycX7rqn3gKw==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      react: ^19.0.0
+
   '@react-spring/animated@9.7.5':
     resolution: {integrity: sha512-Tqrwz7pIlsSDITzxoLS3n/v/YCUHQdOIKtOJf4yL6kYVSDTSmVK1LI1Q3M/uu2Sx4X3pIWF3xLUhlsA6SPNTNg==}
     peerDependencies:
@@ -4488,16 +4794,12 @@ packages:
     resolution: {integrity: sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==}
     engines: {node: '>=12'}
 
-  ansi-regex@6.2.2:
-    resolution: {integrity: sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==}
-    engines: {node: '>=12'}
-
   ansi-styles@4.3.0:
     resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
     engines: {node: '>=8'}
 
-  ansi-styles@6.2.3:
-    resolution: {integrity: sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==}
+  ansi-styles@6.2.1:
+    resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
     engines: {node: '>=12'}
 
   ansis@4.1.0:
@@ -5364,6 +5666,11 @@ packages:
     engines: {node: '>=12'}
     hasBin: true
 
+  esbuild@0.25.0:
+    resolution: {integrity: sha512-BXq5mqc8ltbaN34cDqWuYKyNhX8D/Z0J1xdtdQ8UcIIIyJyz+ZMKUt58tF3SrZ85jcfN/PZYhjR5uDQAYNVbuw==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   esbuild@0.25.10:
     resolution: {integrity: sha512-9RiGKvCwaqxO2owP61uQ4BgNborAQskMR6QusfWzQqv7AZOg5oGehdY2pRJMTKuwxd1IDBP4rSbI5lHzU7SMsQ==}
     engines: {node: '>=18'}
@@ -5686,8 +5993,8 @@ packages:
     resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==}
     engines: {node: '>= 0.6'}
 
-  fs-extra@11.3.2:
-    resolution: {integrity: sha512-Xr9F6z6up6Ws+NjzMCZc6WXg2YFRlrLP9NQDO3VQrWrfiojdhS56TzueT88ze0uBdCTwEIhQ3ptnmKeWGFAe0A==}
+  fs-extra@11.3.0:
+    resolution: {integrity: sha512-Z4XaCL6dUDHfP/jT25jJKMmtxvuwbkrD1vNSMFlo9lNLY2c5FHYSQgHPRZUjAB26TpDEoW9HCOgplrdbaPV/ew==}
     engines: {node: '>=14.14'}
 
   fs-extra@7.0.1:
@@ -5793,8 +6100,8 @@ packages:
     resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==}
     hasBin: true
 
-  glob@11.0.3:
-    resolution: {integrity: sha512-2Nim7dha1KVkaiF4q6Dj+ngPPMdfvLJEOpZk/jKiUAkqKebpGAWQXAq9z1xu9HKu5lWfqw/FASuccEjyznjPaA==}
+  glob@11.0.1:
+    resolution: {integrity: sha512-zrQDm8XPnYEKawJScsnM0QzobJxlT/kHOOlRTio8IH/GrmxRE5fjllkzdaHclIuNjUQTJYH2xHNIGfdpJkDJUw==}
     engines: {node: 20 || >=22}
     hasBin: true
 
@@ -6287,8 +6594,8 @@ packages:
   jackspeak@3.4.3:
     resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
 
-  jackspeak@4.1.1:
-    resolution: {integrity: sha512-zptv57P3GpL+O0I7VdMJNBZCu+BPHVQUk55Ft8/QCJjTVxrnJHuVuX/0Bl2A6/+2oyR/ZMEuFKwmzqqZ/U5nPQ==}
+  jackspeak@4.1.0:
+    resolution: {integrity: sha512-9DDdhb5j6cpeitCbvLO7n7J4IxnbM6hoF6O1g4HQ5TfhvvKN8ywDM7668ZhMHRqVmxqhps/F6syWK2KcPxYlkw==}
     engines: {node: 20 || >=22}
 
   jest-worker@27.5.1:
@@ -6371,8 +6678,8 @@ packages:
   jsonfile@4.0.0:
     resolution: {integrity: sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==}
 
-  jsonfile@6.2.0:
-    resolution: {integrity: sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==}
+  jsonfile@6.1.0:
+    resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
 
   jsonpath-plus@10.3.0:
     resolution: {integrity: sha512-8TNmfeTCk2Le33A3vRRwtuworG/L5RrgMvdjhKZxvyShO+mBu2fP50OWUjRLNtvw344DdDarFh9buFAZs5ujeA==}
@@ -6473,8 +6780,8 @@ packages:
     resolution: {integrity: sha512-i24m8rpwhmPIS4zscNzK6MSEhk0DUWa/8iYQWxhffV8jkI4Phvs3F+quL5xvS0gdQR0FyTCMMH33Y78dDTzzIw==}
     engines: {node: '>=18'}
 
-  log-symbols@7.0.1:
-    resolution: {integrity: sha512-ja1E3yCr9i/0hmBVaM0bfwDjnGy8I/s6PP4DFp+yP+a+mrHO4Rm7DtmnqROTUkHIkqffC84YY7AeqX6oFk0WFg==}
+  log-symbols@7.0.0:
+    resolution: {integrity: sha512-zrc91EDk2M+2AXo/9BTvK91pqb7qrPg2nX/Hy+u8a5qQlbaOflCKO+6SqgZ+M+xUFxGdKTgwnGiL96b1W3ikRA==}
     engines: {node: '>=18'}
 
   longest-streak@3.1.0:
@@ -6497,8 +6804,8 @@ packages:
   lru-cache@10.4.3:
     resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
 
-  lru-cache@11.2.2:
-    resolution: {integrity: sha512-F9ODfyqML2coTIsQpSkRHnLSZMtkU8Q+mSfcaIyKwy58u+8k5nvAYeiNhsyMARvzNcXJ9QfWVrcPsC9e9rAxtg==}
+  lru-cache@11.1.0:
+    resolution: {integrity: sha512-QIXZUBJUx+2zHUdQujWejBkcD9+cs94tLn0+YL8UrCh+D5sCXZ4c7LaEH48pNwRY3MLDgqUFyhlCyjJPf1WP0A==}
     engines: {node: 20 || >=22}
 
   lru-cache@5.1.1:
@@ -6781,8 +7088,8 @@ packages:
     resolution: {integrity: sha512-e5ISH9xMYU0DzrT+jl8q2ze9D6eWBto+I8CNpe+VI+K2J/F/k3PdkdTdz4wvGVH4NTpo+NRYTVIuMQEMMcsLqg==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
-  minimatch@10.0.3:
-    resolution: {integrity: sha512-IPZ167aShDZZUMdRk66cyQAW3qr0WzbHkPdMYa8bzZhlHhO3jALbKdxcaak7W9FfT2rZNpQuUu4Od7ILEpXSaw==}
+  minimatch@10.0.1:
+    resolution: {integrity: sha512-ethXTt3SGGR+95gudmqJ1eNhRO7eGEGIgYA9vnPatK4/etz2MEVDno5GMCibdMTuBMyElzIlgxMna3K94XDIDQ==}
     engines: {node: 20 || >=22}
 
   minimatch@3.0.8:
@@ -7518,6 +7825,16 @@ packages:
       '@types/react':
         optional: true
 
+  react-remove-scroll@2.6.2:
+    resolution: {integrity: sha512-KmONPx5fnlXYJQqC62Q+lwIeAk64ws/cUw6omIumRzMRPqgnYqhSSti99nbj0Ry13bv7dF+BKn7NB+OqkdZGTw==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': ^19.0.1
+      react: ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   react-remove-scroll@2.6.3:
     resolution: {integrity: sha512-pnAi91oOk8g8ABQKGF5/M9qxmmOPxaAnopyTHYfqYEwJhyFrbbBtHuSgtKEoH0jpcxx5o3hXqH1mNd9/Oi+8iQ==}
     engines: {node: '>=10'}
@@ -8098,10 +8415,6 @@ packages:
     resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==}
     engines: {node: '>=12'}
 
-  strip-ansi@7.1.2:
-    resolution: {integrity: sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==}
-    engines: {node: '>=12'}
-
   strip-bom-string@1.0.0:
     resolution: {integrity: sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==}
     engines: {node: '>=0.10.0'}
@@ -8201,6 +8514,9 @@ packages:
     engines: {node: '>=14.0.0'}
     hasBin: true
 
+  tailwindcss@4.1.12:
+    resolution: {integrity: sha512-DzFtxOi+7NsFf7DBtI3BJsynR+0Yp6etH+nRPTbpWnS2pZBaSksv/JGctNwSWzbFjp0vxSqknaUylseZqMDGrA==}
+
   tapable@2.2.1:
     resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
     engines: {node: '>=6'}
@@ -8962,8 +9278,8 @@ packages:
     resolution: {integrity: sha512-cYVsTjKl8b+FrnidjibDWskAv7UKOfcwaVZdp/it9n1s9fU3IkgDbhdIRKCW4JDsAlECJY0ytoVPT3sK6kideA==}
     engines: {node: '>=18'}
 
-  yoctocolors@2.1.2:
-    resolution: {integrity: sha512-CzhO+pFNo8ajLM2d2IW/R93ipy99LWjtwblvC1RsoSUMZgyLbYFr221TnSNT7GjGdYui6P459mw9JH/g/zW2ug==}
+  yoctocolors@2.1.1:
+    resolution: {integrity: sha512-GQHQqAopRhwU8Kt1DDM8NjibDXHC8eoh1erhGAJPEyveY9qqVeXvVikNKrDz69sHowPMorbPUrH/mx8c50eiBQ==}
     engines: {node: '>=18'}
 
   zod-package-json@1.1.0:
@@ -9619,120 +9935,183 @@ snapshots:
   '@esbuild/aix-ppc64@0.19.11':
     optional: true
 
+  '@esbuild/aix-ppc64@0.25.0':
+    optional: true
+
   '@esbuild/aix-ppc64@0.25.10':
     optional: true
 
   '@esbuild/android-arm64@0.19.11':
     optional: true
 
+  '@esbuild/android-arm64@0.25.0':
+    optional: true
+
   '@esbuild/android-arm64@0.25.10':
     optional: true
 
   '@esbuild/android-arm@0.19.11':
     optional: true
 
+  '@esbuild/android-arm@0.25.0':
+    optional: true
+
   '@esbuild/android-arm@0.25.10':
     optional: true
 
   '@esbuild/android-x64@0.19.11':
     optional: true
 
+  '@esbuild/android-x64@0.25.0':
+    optional: true
+
   '@esbuild/android-x64@0.25.10':
     optional: true
 
   '@esbuild/darwin-arm64@0.19.11':
     optional: true
 
+  '@esbuild/darwin-arm64@0.25.0':
+    optional: true
+
   '@esbuild/darwin-arm64@0.25.10':
     optional: true
 
   '@esbuild/darwin-x64@0.19.11':
     optional: true
 
+  '@esbuild/darwin-x64@0.25.0':
+    optional: true
+
   '@esbuild/darwin-x64@0.25.10':
     optional: true
 
   '@esbuild/freebsd-arm64@0.19.11':
     optional: true
 
+  '@esbuild/freebsd-arm64@0.25.0':
+    optional: true
+
   '@esbuild/freebsd-arm64@0.25.10':
     optional: true
 
   '@esbuild/freebsd-x64@0.19.11':
     optional: true
 
+  '@esbuild/freebsd-x64@0.25.0':
+    optional: true
+
   '@esbuild/freebsd-x64@0.25.10':
     optional: true
 
   '@esbuild/linux-arm64@0.19.11':
     optional: true
 
+  '@esbuild/linux-arm64@0.25.0':
+    optional: true
+
   '@esbuild/linux-arm64@0.25.10':
     optional: true
 
   '@esbuild/linux-arm@0.19.11':
     optional: true
 
+  '@esbuild/linux-arm@0.25.0':
+    optional: true
+
   '@esbuild/linux-arm@0.25.10':
     optional: true
 
   '@esbuild/linux-ia32@0.19.11':
     optional: true
 
+  '@esbuild/linux-ia32@0.25.0':
+    optional: true
+
   '@esbuild/linux-ia32@0.25.10':
     optional: true
 
   '@esbuild/linux-loong64@0.19.11':
     optional: true
 
+  '@esbuild/linux-loong64@0.25.0':
+    optional: true
+
   '@esbuild/linux-loong64@0.25.10':
     optional: true
 
   '@esbuild/linux-mips64el@0.19.11':
     optional: true
 
+  '@esbuild/linux-mips64el@0.25.0':
+    optional: true
+
   '@esbuild/linux-mips64el@0.25.10':
     optional: true
 
   '@esbuild/linux-ppc64@0.19.11':
     optional: true
 
+  '@esbuild/linux-ppc64@0.25.0':
+    optional: true
+
   '@esbuild/linux-ppc64@0.25.10':
     optional: true
 
   '@esbuild/linux-riscv64@0.19.11':
     optional: true
 
+  '@esbuild/linux-riscv64@0.25.0':
+    optional: true
+
   '@esbuild/linux-riscv64@0.25.10':
     optional: true
 
   '@esbuild/linux-s390x@0.19.11':
     optional: true
 
+  '@esbuild/linux-s390x@0.25.0':
+    optional: true
+
   '@esbuild/linux-s390x@0.25.10':
     optional: true
 
   '@esbuild/linux-x64@0.19.11':
     optional: true
 
+  '@esbuild/linux-x64@0.25.0':
+    optional: true
+
   '@esbuild/linux-x64@0.25.10':
     optional: true
 
+  '@esbuild/netbsd-arm64@0.25.0':
+    optional: true
+
   '@esbuild/netbsd-arm64@0.25.10':
     optional: true
 
   '@esbuild/netbsd-x64@0.19.11':
     optional: true
 
+  '@esbuild/netbsd-x64@0.25.0':
+    optional: true
+
   '@esbuild/netbsd-x64@0.25.10':
     optional: true
 
+  '@esbuild/openbsd-arm64@0.25.0':
+    optional: true
+
   '@esbuild/openbsd-arm64@0.25.10':
     optional: true
 
   '@esbuild/openbsd-x64@0.19.11':
     optional: true
 
+  '@esbuild/openbsd-x64@0.25.0':
+    optional: true
+
   '@esbuild/openbsd-x64@0.25.10':
     optional: true
 
@@ -9742,24 +10121,36 @@ snapshots:
   '@esbuild/sunos-x64@0.19.11':
     optional: true
 
+  '@esbuild/sunos-x64@0.25.0':
+    optional: true
+
   '@esbuild/sunos-x64@0.25.10':
     optional: true
 
   '@esbuild/win32-arm64@0.19.11':
     optional: true
 
+  '@esbuild/win32-arm64@0.25.0':
+    optional: true
+
   '@esbuild/win32-arm64@0.25.10':
     optional: true
 
   '@esbuild/win32-ia32@0.19.11':
     optional: true
 
+  '@esbuild/win32-ia32@0.25.0':
+    optional: true
+
   '@esbuild/win32-ia32@0.25.10':
     optional: true
 
   '@esbuild/win32-x64@0.19.11':
     optional: true
 
+  '@esbuild/win32-x64@0.25.0':
+    optional: true
+
   '@esbuild/win32-x64@0.25.10':
     optional: true
 
@@ -10187,17 +10578,11 @@ snapshots:
     optionalDependencies:
       '@types/node': 22.14.1
 
-  '@isaacs/balanced-match@4.0.1': {}
-
-  '@isaacs/brace-expansion@5.0.0':
-    dependencies:
-      '@isaacs/balanced-match': 4.0.1
-
   '@isaacs/cliui@8.0.2':
     dependencies:
       string-width: 5.1.2
       string-width-cjs: string-width@4.2.3
-      strip-ansi: 7.1.2
+      strip-ansi: 7.1.0
       strip-ansi-cjs: strip-ansi@6.0.1
       wrap-ansi: 8.1.0
       wrap-ansi-cjs: wrap-ansi@7.0.0
@@ -10363,7 +10748,7 @@ snapshots:
       '@mintlify/validation': 0.1.398
       chalk: 5.4.0
       detect-port: 1.6.1
-      fs-extra: 11.3.2
+      fs-extra: 11.3.0
       inquirer: 12.4.2(@types/node@22.14.1)
       js-yaml: 4.1.0
       ora: 6.1.2
@@ -10432,7 +10817,7 @@ snapshots:
     dependencies:
       '@mintlify/common': 1.0.428(@types/react@19.0.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@mintlify/prebuild': 1.0.543(@types/react@19.0.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.8.3)
-      fs-extra: 11.3.2
+      fs-extra: 11.3.0
       unist-util-visit: 4.1.2
     transitivePeerDependencies:
       - '@types/react'
@@ -10491,7 +10876,7 @@ snapshots:
       axios: 1.7.9
       chalk: 5.4.0
       favicons: 7.2.0
-      fs-extra: 11.3.2
+      fs-extra: 11.3.0
       gray-matter: 4.0.3
       js-yaml: 4.1.0
       mdast: 3.0.0
@@ -10518,7 +10903,7 @@ snapshots:
       chalk: 5.4.0
       chokidar: 3.6.0
       express: 4.21.2
-      fs-extra: 11.3.2
+      fs-extra: 11.3.0
       got: 13.0.0
       gray-matter: 4.0.3
       is-online: 10.0.0
@@ -10546,7 +10931,7 @@ snapshots:
     dependencies:
       '@mintlify/common': 1.0.428(@types/react@19.0.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@mintlify/openapi-parser': 0.0.7
-      fs-extra: 11.3.2
+      fs-extra: 11.3.0
       hast-util-to-mdast: 10.1.2
       js-yaml: 4.1.0
       mdast-util-mdx-jsx: 3.2.0
@@ -10864,6 +11249,18 @@ snapshots:
       '@types/react': 19.0.1
       '@types/react-dom': 19.0.1
 
+  '@radix-ui/react-collection@1.1.1(@types/react-dom@19.0.1)(@types/react@19.0.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.0.1)(react@19.0.0)
+      '@radix-ui/react-context': 1.1.1(@types/react@19.0.1)(react@19.0.0)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.0.1)(@types/react@19.0.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@radix-ui/react-slot': 1.1.1(@types/react@19.0.1)(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+    optionalDependencies:
+      '@types/react': 19.0.1
+      '@types/react-dom': 19.0.1
+
   '@radix-ui/react-collection@1.1.7(@types/react-dom@19.0.1)(@types/react@19.0.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.0.1)(react@19.0.0)
@@ -10929,7 +11326,7 @@ snapshots:
       aria-hidden: 1.2.4
       react: 19.0.0
       react-dom: 19.0.0(react@19.0.0)
-      react-remove-scroll: 2.6.3(@types/react@19.0.1)(react@19.0.0)
+      react-remove-scroll: 2.6.2(@types/react@19.0.1)(react@19.0.0)
     optionalDependencies:
       '@types/react': 19.0.1
       '@types/react-dom': 19.0.1
@@ -11277,6 +11674,23 @@ snapshots:
       '@types/react': 19.0.1
       '@types/react-dom': 19.0.1
 
+  '@radix-ui/react-roving-focus@1.1.1(@types/react-dom@19.0.1)(@types/react@19.0.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-collection': 1.1.1(@types/react-dom@19.0.1)(@types/react@19.0.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.0.1)(react@19.0.0)
+      '@radix-ui/react-context': 1.1.1(@types/react@19.0.1)(react@19.0.0)
+      '@radix-ui/react-direction': 1.1.0(@types/react@19.0.1)(react@19.0.0)
+      '@radix-ui/react-id': 1.1.0(@types/react@19.0.1)(react@19.0.0)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.0.1)(@types/react@19.0.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.0.1)(react@19.0.0)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@19.0.1)(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+    optionalDependencies:
+      '@types/react': 19.0.1
+      '@types/react-dom': 19.0.1
+
   '@radix-ui/react-roving-focus@1.1.11(@types/react-dom@19.0.1)(@types/react@19.0.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -11360,6 +11774,22 @@ snapshots:
       '@types/react': 19.0.1
       '@types/react-dom': 19.0.1
 
+  '@radix-ui/react-tabs@1.1.2(@types/react-dom@19.0.1)(@types/react@19.0.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-context': 1.1.1(@types/react@19.0.1)(react@19.0.0)
+      '@radix-ui/react-direction': 1.1.0(@types/react@19.0.1)(react@19.0.0)
+      '@radix-ui/react-id': 1.1.0(@types/react@19.0.1)(react@19.0.0)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@19.0.1)(@types/react@19.0.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.0.1)(@types/react@19.0.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@radix-ui/react-roving-focus': 1.1.1(@types/react-dom@19.0.1)(@types/react@19.0.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@19.0.1)(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+    optionalDependencies:
+      '@types/react': 19.0.1
+      '@types/react-dom': 19.0.1
+
   '@radix-ui/react-toggle-group@1.1.0(@types/react-dom@19.0.1)(@types/react@19.0.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.0
@@ -11568,6 +11998,94 @@ snapshots:
 
   '@radix-ui/rect@1.1.1': {}
 
+  '@react-email/body@0.1.1-tailwindv4.0(react@19.0.0)':
+    dependencies:
+      react: 19.0.0
+
+  '@react-email/button@0.2.1-tailwindv4.0(react@19.0.0)':
+    dependencies:
+      react: 19.0.0
+
+  '@react-email/code-block@0.1.1-tailwindv4.0(react@19.0.0)':
+    dependencies:
+      prismjs: 1.30.0
+      react: 19.0.0
+
+  '@react-email/code-inline@0.0.6-tailwindv4.0(react@19.0.0)':
+    dependencies:
+      react: 19.0.0
+
+  '@react-email/column@0.0.13(react@19.0.0)':
+    dependencies:
+      react: 19.0.0
+
+  '@react-email/components@1.0.0-tailwindv4.5(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
+    dependencies:
+      '@react-email/body': 0.1.1-tailwindv4.0(react@19.0.0)
+      '@react-email/button': 0.2.1-tailwindv4.0(react@19.0.0)
+      '@react-email/code-block': 0.1.1-tailwindv4.0(react@19.0.0)
+      '@react-email/code-inline': 0.0.6-tailwindv4.0(react@19.0.0)
+      '@react-email/column': 0.0.13(react@19.0.0)
+      '@react-email/container': 0.0.16-tailwindv4.0(react@19.0.0)
+      '@react-email/font': 0.0.9(react@19.0.0)
+      '@react-email/head': 0.0.12(react@19.0.0)
+      '@react-email/heading': 0.0.16-tailwindv4.0(react@19.0.0)
+      '@react-email/hr': 0.0.12-tailwindv4.0(react@19.0.0)
+      '@react-email/html': 0.0.11(react@19.0.0)
+      '@react-email/img': 0.0.12-tailwindv4.0(react@19.0.0)
+      '@react-email/link': 0.0.13-tailwindv4.0(react@19.0.0)
+      '@react-email/markdown': 0.0.15(react@19.0.0)
+      '@react-email/preview': 0.0.14-tailwindv4.0(react@19.0.0)
+      '@react-email/render': 1.3.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@react-email/row': 0.0.12(react@19.0.0)
+      '@react-email/section': 0.0.16(react@19.0.0)
+      '@react-email/tailwind': 2.0.0-tailwindv4.3(react@19.0.0)
+      '@react-email/text': 0.1.6-tailwindv4.0(react@19.0.0)
+      react: 19.0.0
+    transitivePeerDependencies:
+      - react-dom
+
+  '@react-email/container@0.0.16-tailwindv4.0(react@19.0.0)':
+    dependencies:
+      react: 19.0.0
+
+  '@react-email/font@0.0.9(react@19.0.0)':
+    dependencies:
+      react: 19.0.0
+
+  '@react-email/head@0.0.12(react@19.0.0)':
+    dependencies:
+      react: 19.0.0
+
+  '@react-email/heading@0.0.16-tailwindv4.0(react@19.0.0)':
+    dependencies:
+      react: 19.0.0
+
+  '@react-email/hr@0.0.12-tailwindv4.0(react@19.0.0)':
+    dependencies:
+      react: 19.0.0
+
+  '@react-email/html@0.0.11(react@19.0.0)':
+    dependencies:
+      react: 19.0.0
+
+  '@react-email/img@0.0.12-tailwindv4.0(react@19.0.0)':
+    dependencies:
+      react: 19.0.0
+
+  '@react-email/link@0.0.13-tailwindv4.0(react@19.0.0)':
+    dependencies:
+      react: 19.0.0
+
+  '@react-email/markdown@0.0.15(react@19.0.0)':
+    dependencies:
+      md-to-react-email: 5.0.5(react@19.0.0)
+      react: 19.0.0
+
+  '@react-email/preview@0.0.14-tailwindv4.0(react@19.0.0)':
+    dependencies:
+      react: 19.0.0
+
   '@react-email/render@1.0.6(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
     dependencies:
       html-to-text: 9.0.5
@@ -11576,10 +12094,26 @@ snapshots:
       react-dom: 19.0.0(react@19.0.0)
       react-promise-suspense: 0.3.4
 
+  '@react-email/render@1.3.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
+    dependencies:
+      html-to-text: 9.0.5
+      prettier: 3.5.3
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+      react-promise-suspense: 0.3.4
+
+  '@react-email/row@0.0.12(react@19.0.0)':
+    dependencies:
+      react: 19.0.0
+
   '@react-email/section@0.0.14(react@19.0.0)':
     dependencies:
       react: 19.0.0
 
+  '@react-email/section@0.0.16(react@19.0.0)':
+    dependencies:
+      react: 19.0.0
+
   '@react-email/tailwind@0.0.12(react@19.0.0)':
     dependencies:
       react: 19.0.0
@@ -11592,6 +12126,15 @@ snapshots:
     dependencies:
       react: 19.0.0
 
+  '@react-email/tailwind@2.0.0-tailwindv4.3(react@19.0.0)':
+    dependencies:
+      react: 19.0.0
+      tailwindcss: 4.1.12
+
+  '@react-email/text@0.1.6-tailwindv4.0(react@19.0.0)':
+    dependencies:
+      react: 19.0.0
+
   '@react-spring/animated@9.7.5(react@19.0.0)':
     dependencies:
       '@react-spring/shared': 9.7.5(react@19.0.0)
@@ -11812,7 +12355,7 @@ snapshots:
       ajv: 8.13.0
       ajv-draft-04: 1.0.0(ajv@8.13.0)
       ajv-formats: 3.0.1(ajv@8.13.0)
-      fs-extra: 11.3.2
+      fs-extra: 11.3.0
       import-lazy: 4.0.0
       jju: 1.4.0
       resolve: 1.22.9
@@ -12660,13 +13203,11 @@ snapshots:
 
   ansi-regex@6.1.0: {}
 
-  ansi-regex@6.2.2: {}
-
   ansi-styles@4.3.0:
     dependencies:
       color-convert: 2.0.1
 
-  ansi-styles@6.2.3: {}
+  ansi-styles@6.2.1: {}
 
   ansis@4.1.0: {}
 
@@ -13595,6 +14136,34 @@ snapshots:
       '@esbuild/win32-ia32': 0.19.11
       '@esbuild/win32-x64': 0.19.11
 
+  esbuild@0.25.0:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.25.0
+      '@esbuild/android-arm': 0.25.0
+      '@esbuild/android-arm64': 0.25.0
+      '@esbuild/android-x64': 0.25.0
+      '@esbuild/darwin-arm64': 0.25.0
+      '@esbuild/darwin-x64': 0.25.0
+      '@esbuild/freebsd-arm64': 0.25.0
+      '@esbuild/freebsd-x64': 0.25.0
+      '@esbuild/linux-arm': 0.25.0
+      '@esbuild/linux-arm64': 0.25.0
+      '@esbuild/linux-ia32': 0.25.0
+      '@esbuild/linux-loong64': 0.25.0
+      '@esbuild/linux-mips64el': 0.25.0
+      '@esbuild/linux-ppc64': 0.25.0
+      '@esbuild/linux-riscv64': 0.25.0
+      '@esbuild/linux-s390x': 0.25.0
+      '@esbuild/linux-x64': 0.25.0
+      '@esbuild/netbsd-arm64': 0.25.0
+      '@esbuild/netbsd-x64': 0.25.0
+      '@esbuild/openbsd-arm64': 0.25.0
+      '@esbuild/openbsd-x64': 0.25.0
+      '@esbuild/sunos-x64': 0.25.0
+      '@esbuild/win32-arm64': 0.25.0
+      '@esbuild/win32-ia32': 0.25.0
+      '@esbuild/win32-x64': 0.25.0
+
   esbuild@0.25.10:
     optionalDependencies:
       '@esbuild/aix-ppc64': 0.25.10
@@ -13988,10 +14557,10 @@ snapshots:
 
   fresh@0.5.2: {}
 
-  fs-extra@11.3.2:
+  fs-extra@11.3.0:
     dependencies:
       graceful-fs: 4.2.11
-      jsonfile: 6.2.0
+      jsonfile: 6.1.0
       universalify: 2.0.1
 
   fs-extra@7.0.1:
@@ -14115,11 +14684,11 @@ snapshots:
       package-json-from-dist: 1.0.1
       path-scurry: 1.11.1
 
-  glob@11.0.3:
+  glob@11.0.1:
     dependencies:
       foreground-child: 3.3.1
-      jackspeak: 4.1.1
-      minimatch: 10.0.3
+      jackspeak: 4.1.0
+      minimatch: 10.0.1
       minipass: 7.1.2
       package-json-from-dist: 1.0.1
       path-scurry: 2.0.0
@@ -14717,7 +15286,7 @@ snapshots:
     optionalDependencies:
       '@pkgjs/parseargs': 0.11.0
 
-  jackspeak@4.1.1:
+  jackspeak@4.1.0:
     dependencies:
       '@isaacs/cliui': 8.0.2
 
@@ -14799,7 +15368,7 @@ snapshots:
     optionalDependencies:
       graceful-fs: 4.2.11
 
-  jsonfile@6.2.0:
+  jsonfile@6.1.0:
     dependencies:
       universalify: 2.0.1
     optionalDependencies:
@@ -14891,10 +15460,10 @@ snapshots:
       chalk: 5.4.0
       is-unicode-supported: 1.3.0
 
-  log-symbols@7.0.1:
+  log-symbols@7.0.0:
     dependencies:
       is-unicode-supported: 2.1.0
-      yoctocolors: 2.1.2
+      yoctocolors: 2.1.1
 
   longest-streak@3.1.0: {}
 
@@ -14910,7 +15479,7 @@ snapshots:
 
   lru-cache@10.4.3: {}
 
-  lru-cache@11.2.2: {}
+  lru-cache@11.1.0: {}
 
   lru-cache@5.1.1:
     dependencies:
@@ -15461,9 +16030,9 @@ snapshots:
 
   mimic-response@4.0.0: {}
 
-  minimatch@10.0.3:
+  minimatch@10.0.1:
     dependencies:
-      '@isaacs/brace-expansion': 5.0.0
+      brace-expansion: 2.0.1
 
   minimatch@3.0.8:
     dependencies:
@@ -15938,7 +16507,7 @@ snapshots:
 
   path-scurry@2.0.0:
     dependencies:
-      lru-cache: 11.2.2
+      lru-cache: 11.1.0
       minipass: 7.1.2
 
   path-to-regexp@0.1.12: {}
@@ -16305,6 +16874,17 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.0.1
 
+  react-remove-scroll@2.6.2(@types/react@19.0.1)(react@19.0.0):
+    dependencies:
+      react: 19.0.0
+      react-remove-scroll-bar: 2.3.8(@types/react@19.0.1)(react@19.0.0)
+      react-style-singleton: 2.2.3(@types/react@19.0.1)(react@19.0.0)
+      tslib: 2.8.1
+      use-callback-ref: 1.3.3(@types/react@19.0.1)(react@19.0.0)
+      use-sidecar: 1.1.3(@types/react@19.0.1)(react@19.0.0)
+    optionalDependencies:
+      '@types/react': 19.0.1
+
   react-remove-scroll@2.6.3(@types/react@19.0.1)(react@19.0.0):
     dependencies:
       react: 19.0.0
@@ -17139,7 +17719,7 @@ snapshots:
     dependencies:
       eastasianwidth: 0.2.0
       emoji-regex: 9.2.2
-      strip-ansi: 7.1.2
+      strip-ansi: 7.1.0
 
   string-width@7.2.0:
     dependencies:
@@ -17191,10 +17771,6 @@ snapshots:
     dependencies:
       ansi-regex: 6.1.0
 
-  strip-ansi@7.1.2:
-    dependencies:
-      ansi-regex: 6.2.2
-
   strip-bom-string@1.0.0: {}
 
   strip-bom@3.0.0: {}
@@ -17366,6 +17942,8 @@ snapshots:
     transitivePeerDependencies:
       - ts-node
 
+  tailwindcss@4.1.12: {}
+
   tapable@2.2.1: {}
 
   tar-fs@3.0.8:
@@ -18186,9 +18764,9 @@ snapshots:
 
   wrap-ansi@8.1.0:
     dependencies:
-      ansi-styles: 6.2.3
+      ansi-styles: 6.2.1
       string-width: 5.1.2
-      strip-ansi: 7.1.2
+      strip-ansi: 7.1.0
 
   wrappy@1.0.2: {}
 
@@ -18263,7 +18841,7 @@ snapshots:
 
   yoctocolors-cjs@2.1.2: {}
 
-  yoctocolors@2.1.2: {}
+  yoctocolors@2.1.1: {}
 
   zod-package-json@1.1.0:
     dependencies:

From 0a7d210419d8d4c5509d8002f8c936f8cd1281eb Mon Sep 17 00:00:00 2001
From: gabriel miranda <gabrielmfern@outlook.com>
Date: Fri, 17 Oct 2025 10:02:07 -0300
Subject: [PATCH 04/33] fix: lockfile

---
 pnpm-lock.yaml | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ac3c67efc0..9069e457a6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -6848,10 +6848,20 @@ packages:
     engines: {node: '>= 18'}
     hasBin: true
 
+  marked@7.0.4:
+    resolution: {integrity: sha512-t8eP0dXRJMtMvBojtkcsA7n48BkauktUKzfkPSCq85ZMTJ0v76Rke4DYz01omYpPTUh4p/f7HePgRo3ebG8+QQ==}
+    engines: {node: '>= 16'}
+    hasBin: true
+
   math-intrinsics@1.1.0:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
 
+  md-to-react-email@5.0.5:
+    resolution: {integrity: sha512-OvAXqwq57uOk+WZqFFNCMZz8yDp8BD3WazW1wAKHUrPbbdr89K9DWS6JXY09vd9xNdPNeurI8DU/X4flcfaD8A==}
+    peerDependencies:
+      react: ^19.0.0
+
   mdast-util-find-and-replace@3.0.2:
     resolution: {integrity: sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==}
 
@@ -15514,8 +15524,15 @@ snapshots:
 
   marked@15.0.12: {}
 
+  marked@7.0.4: {}
+
   math-intrinsics@1.1.0: {}
 
+  md-to-react-email@5.0.5(react@19.0.0):
+    dependencies:
+      marked: 7.0.4
+      react: 19.0.0
+
   mdast-util-find-and-replace@3.0.2:
     dependencies:
       '@types/mdast': 4.0.4

From ddd37a44e44422733c447b1af85dc4ad88e91a0e Mon Sep 17 00:00:00 2001
From: Gabriel Miranda <gabrielmfern@outlook.com>
Date: Fri, 17 Oct 2025 17:08:19 -0300
Subject: [PATCH 05/33] feat(tailwind): update to tailwind v4 (#2425)

Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>
Co-authored-by: Bu Kinoshita <6929565+bukinoshita@users.noreply.github.com>
---
 packages/components/package.json              |   4 +-
 .../get-email-component.spec.ts.snap          |  31 +-
 .../testing/__snapshots__/export.spec.ts.snap |  31 +-
 packages/tailwind/copy-tailwind-types.mjs     |  13 -
 packages/tailwind/package.json                |  60 +-
 .../src/__snapshots__/tailwind.spec.tsx.snap  | 286 ++++--
 .../__snapshots__/use-tailwind.spec.ts.snap   |  16 -
 ...ed-promise.ts => use-suspended-promise.ts} |   0
 .../src/hooks/use-suspensed-promise.spec.ts   |   2 +-
 packages/tailwind/src/tailwind.spec.tsx       | 586 ++++++------
 packages/tailwind/src/tailwind.tsx            | 250 ++---
 .../utils/compatibility/escape-class-name.ts  |   4 +-
 ...eact-property.ts => get-react-property.ts} |   4 +-
 .../compatibility/sanitize-class-name.ts      |   4 +-
 ...xtract-rules-matching-classes.spec.ts.snap |  23 +
 .../extract-rules-per-class.spec.ts.snap      |  32 +
 .../make-inline-styles-for.spec.ts.snap       |  17 +
 ...ove-rule-duplicates-from-root.spec.ts.snap |   3 +
 .../resolve-all-css-variables.spec.ts.snap    |  21 +
 .../resolve-calc-expressions.spec.ts.snap     |   7 +
 .../sanitize-declarations.spec.ts.snap        |  91 ++
 ...anitize-non-inlinable-classes.spec.ts.snap |   7 +
 .../sanitize-non-inlinable-rules.spec.ts.snap |   7 +
 .../utils/css/extract-rules-per-class.spec.ts |  61 ++
 .../src/utils/css/extract-rules-per-class.ts  |  38 +
 .../src/utils/css/get-custom-properties.ts    |  49 +
 .../src/utils/css/is-rule-inlinable.ts        |  15 +
 .../utils/css/make-inline-styles-for.spec.ts  |  35 +-
 .../src/utils/css/make-inline-styles-for.ts   | 104 +-
 packages/tailwind/src/utils/css/minify-css.ts |  21 -
 .../utils/css/remove-if-empty-recursively.ts  |  11 -
 .../css/remove-rule-duplicates-from-root.ts   |  16 -
 .../css/resolve-all-css-variables.spec.ts     | 233 ++++-
 .../utils/css/resolve-all-css-variables.ts    | 287 ++++--
 .../css/resolve-calc-expressions.spec.ts      |  30 +
 .../src/utils/css/resolve-calc-expressions.ts | 147 +++
 .../utils/css/sanitize-declarations.spec.ts   | 311 ++++++
 .../src/utils/css/sanitize-declarations.ts    | 434 ++++++++-
 .../sanitize-non-inlinable-classes.spec.ts    | 130 ---
 .../css/sanitize-non-inlinable-classes.ts     |  92 --
 .../css/sanitize-non-inlinable-rules.spec.ts  |  45 +
 .../utils/css/sanitize-non-inlinable-rules.ts |  35 +
 .../tailwind/src/utils/css/unwrap-value.ts    |   9 +
 .../tailwind/src/utils/react/is-component.ts  |  33 +-
 .../src/utils/react/map-react-tree.ts         |   4 +-
 .../__snapshots__/setup-tailwind.spec.ts.snap |  17 +-
 .../clone-element-with-inlined-styles.ts      |  85 +-
 .../tailwindcss/setup-tailwind-context.ts     |  15 -
 .../utils/tailwindcss/setup-tailwind.spec.ts  |  23 +-
 .../src/utils/tailwindcss/setup-tailwind.ts   | 128 ++-
 .../utils/tailwindcss/tailwind-internals.d.ts | 127 ---
 .../tailwindcss/tailwind-stylesheets/index.ts | 900 ++++++++++++++++++
 .../tailwind-stylesheets/preflight.ts         | 397 ++++++++
 .../tailwindcss/tailwind-stylesheets/theme.ts | 466 +++++++++
 .../tailwind-stylesheets/utilities.ts         |   5 +
 packages/tailwind/tsconfig.json               |   2 +
 packages/tailwind/tsdown.config.ts            |  40 +
 packages/tailwind/vite.config.ts              |  33 -
 pnpm-lock.yaml                                | 121 +--
 59 files changed, 4554 insertions(+), 1444 deletions(-)
 delete mode 100644 packages/tailwind/copy-tailwind-types.mjs
 delete mode 100644 packages/tailwind/src/hooks/__snapshots__/use-tailwind.spec.ts.snap
 rename packages/tailwind/src/hooks/{use-suspensed-promise.ts => use-suspended-promise.ts} (100%)
 rename packages/tailwind/src/utils/compatibility/{convert-css-property-to-react-property.ts => get-react-property.ts} (82%)
 create mode 100644 packages/tailwind/src/utils/css/__snapshots__/extract-rules-matching-classes.spec.ts.snap
 create mode 100644 packages/tailwind/src/utils/css/__snapshots__/extract-rules-per-class.spec.ts.snap
 create mode 100644 packages/tailwind/src/utils/css/__snapshots__/make-inline-styles-for.spec.ts.snap
 create mode 100644 packages/tailwind/src/utils/css/__snapshots__/remove-rule-duplicates-from-root.spec.ts.snap
 create mode 100644 packages/tailwind/src/utils/css/__snapshots__/resolve-all-css-variables.spec.ts.snap
 create mode 100644 packages/tailwind/src/utils/css/__snapshots__/resolve-calc-expressions.spec.ts.snap
 create mode 100644 packages/tailwind/src/utils/css/__snapshots__/sanitize-declarations.spec.ts.snap
 create mode 100644 packages/tailwind/src/utils/css/__snapshots__/sanitize-non-inlinable-classes.spec.ts.snap
 create mode 100644 packages/tailwind/src/utils/css/__snapshots__/sanitize-non-inlinable-rules.spec.ts.snap
 create mode 100644 packages/tailwind/src/utils/css/extract-rules-per-class.spec.ts
 create mode 100644 packages/tailwind/src/utils/css/extract-rules-per-class.ts
 create mode 100644 packages/tailwind/src/utils/css/get-custom-properties.ts
 create mode 100644 packages/tailwind/src/utils/css/is-rule-inlinable.ts
 delete mode 100644 packages/tailwind/src/utils/css/minify-css.ts
 delete mode 100644 packages/tailwind/src/utils/css/remove-if-empty-recursively.ts
 delete mode 100644 packages/tailwind/src/utils/css/remove-rule-duplicates-from-root.ts
 create mode 100644 packages/tailwind/src/utils/css/resolve-calc-expressions.spec.ts
 create mode 100644 packages/tailwind/src/utils/css/resolve-calc-expressions.ts
 create mode 100644 packages/tailwind/src/utils/css/sanitize-declarations.spec.ts
 delete mode 100644 packages/tailwind/src/utils/css/sanitize-non-inlinable-classes.spec.ts
 delete mode 100644 packages/tailwind/src/utils/css/sanitize-non-inlinable-classes.ts
 create mode 100644 packages/tailwind/src/utils/css/sanitize-non-inlinable-rules.spec.ts
 create mode 100644 packages/tailwind/src/utils/css/sanitize-non-inlinable-rules.ts
 create mode 100644 packages/tailwind/src/utils/css/unwrap-value.ts
 delete mode 100644 packages/tailwind/src/utils/tailwindcss/setup-tailwind-context.ts
 delete mode 100644 packages/tailwind/src/utils/tailwindcss/tailwind-internals.d.ts
 create mode 100644 packages/tailwind/src/utils/tailwindcss/tailwind-stylesheets/index.ts
 create mode 100644 packages/tailwind/src/utils/tailwindcss/tailwind-stylesheets/preflight.ts
 create mode 100644 packages/tailwind/src/utils/tailwindcss/tailwind-stylesheets/theme.ts
 create mode 100644 packages/tailwind/src/utils/tailwindcss/tailwind-stylesheets/utilities.ts
 create mode 100644 packages/tailwind/tsdown.config.ts
 delete mode 100644 packages/tailwind/vite.config.ts

diff --git a/packages/components/package.json b/packages/components/package.json
index 059c8d9742..e626d21ebd 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@react-email/components",
-  "version": "0.5.7",
+  "version": "1.0.0-tailwindv4.6",
   "description": "A collection of all components React Email.",
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -58,7 +58,7 @@
     "@react-email/render": "workspace:1.4.0",
     "@react-email/row": "workspace:0.0.12",
     "@react-email/section": "workspace:0.0.16",
-    "@react-email/tailwind": "workspace:1.2.2",
+    "@react-email/tailwind": "workspace:2.0.0-tailwindv4.4",
     "@react-email/text": "workspace:0.1.5"
   },
   "peerDependencies": {
diff --git a/packages/preview-server/src/utils/__snapshots__/get-email-component.spec.ts.snap b/packages/preview-server/src/utils/__snapshots__/get-email-component.spec.ts.snap
index a6e818a9d9..3886d5c63b 100644
--- a/packages/preview-server/src/utils/__snapshots__/get-email-component.spec.ts.snap
+++ b/packages/preview-server/src/utils/__snapshots__/get-email-component.spec.ts.snap
@@ -12,8 +12,7 @@ exports[`getEmailComponent() > with a demo email template 1`] = `
     <meta name="x-apple-disable-message-reformatting" />
     <!--$-->
   </head>
-  <body
-    style='margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;background-color:rgb(255,255,255);padding-left:8px;padding-right:8px;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'>
+  <body style="background-color:rgb(255,255,255)">
     <table
       border="0"
       width="100%"
@@ -24,7 +23,7 @@ exports[`getEmailComponent() > with a demo email template 1`] = `
       <tbody>
         <tr>
           <td
-            style='margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;background-color:rgb(255,255,255);padding-left:8px;padding-right:8px;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'>
+            style='margin-right:auto;margin-left:auto;margin-bottom:auto;margin-top:auto;background-color:rgb(255,255,255);padding-right:8px;padding-left:8px;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"'>
             <div
               style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0"
               data-skip-in-text="true">
@@ -40,7 +39,7 @@ exports[`getEmailComponent() > with a demo email template 1`] = `
               cellpadding="0"
               cellspacing="0"
               role="presentation"
-              style="margin-left:auto;margin-right:auto;margin-top:40px;margin-bottom:40px;max-width:465px;border-radius:0.25rem;border-width:1px;border-color:rgb(234,234,234);border-style:solid;padding:20px">
+              style="max-width:465px;margin-right:auto;margin-left:auto;margin-bottom:40px;margin-top:40px;border-radius:0.25rem;border-style:solid;border-width:1px;border-color:rgb(234,234,234);padding:20px">
               <tbody>
                 <tr style="width:100%">
                   <td>
@@ -59,26 +58,26 @@ exports[`getEmailComponent() > with a demo email template 1`] = `
                               alt="Vercel Logo"
                               height="37"
                               src="/static/vercel-logo.png"
-                              style="margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;display:block;outline:none;border:none;text-decoration:none"
+                              style="display:block;outline:none;border:none;text-decoration:none;margin-right:auto;margin-left:auto;margin-bottom:0;margin-top:0"
                               width="40" />
                           </td>
                         </tr>
                       </tbody>
                     </table>
                     <h1
-                      style="margin-left:0;margin-right:0;margin-top:30px;margin-bottom:30px;padding:0;text-align:center;font-weight:400;font-size:24px;color:rgb(0,0,0)">
+                      style="margin-right:0;margin-left:0;margin-bottom:30px;margin-top:30px;padding:0;text-align:center;font-weight:400;font-size:24px;color:rgb(0,0,0)">
                       Join <strong>Enigma</strong> on <strong>Vercel</strong>
                     </h1>
                     <p
-                      style="font-size:14px;color:rgb(0,0,0);line-height:24px;margin-top:16px;margin-bottom:16px">
+                      style="font-size:14px;line-height:24px;color:rgb(0,0,0);margin-top:16px;margin-bottom:16px">
                       Hello
                       <!-- -->alanturing<!-- -->,
                     </p>
                     <p
-                      style="font-size:14px;color:rgb(0,0,0);line-height:24px;margin-top:16px;margin-bottom:16px">
+                      style="font-size:14px;line-height:24px;color:rgb(0,0,0);margin-top:16px;margin-bottom:16px">
                       <strong>Alan</strong> (<a
                         href="mailto:alan.turing@example.com"
-                        style="color:rgb(37,99,235);text-decoration-line:none"
+                        style="color:rgb(21,93,252);text-decoration-line:none"
                         target="_blank"
                         >alan.turing@example.com</a
                       >) has invited you to the <strong>Enigma</strong> team on<!-- -->
@@ -110,7 +109,7 @@ exports[`getEmailComponent() > with a demo email template 1`] = `
                                       alt="alanturing&#x27;s profile picture"
                                       height="64"
                                       src="/static/vercel-user.png"
-                                      style="border-radius:9999px;display:block;outline:none;border:none;text-decoration:none"
+                                      style="display:block;outline:none;border:none;text-decoration:none;border-radius:9999px"
                                       width="64" />
                                   </td>
                                   <td
@@ -130,7 +129,7 @@ exports[`getEmailComponent() > with a demo email template 1`] = `
                                       alt="Enigma team logo"
                                       height="64"
                                       src="/static/vercel-team.png"
-                                      style="border-radius:9999px;display:block;outline:none;border:none;text-decoration:none"
+                                      style="display:block;outline:none;border:none;text-decoration:none;border-radius:9999px"
                                       width="64" />
                                   </td>
                                 </tr>
@@ -153,7 +152,7 @@ exports[`getEmailComponent() > with a demo email template 1`] = `
                           <td>
                             <a
                               href="https://vercel.com"
-                              style="border-radius:0.25rem;background-color:rgb(0,0,0);padding-left:20px;padding-right:20px;padding-top:12px;padding-bottom:12px;text-align:center;font-weight:600;font-size:12px;color:rgb(255,255,255);text-decoration-line:none;line-height:100%;text-decoration:none;display:inline-block;max-width:100%;mso-padding-alt:0px"
+                              style="line-height:100%;text-decoration:none;display:inline-block;max-width:100%;mso-padding-alt:0px;border-radius:0.25rem;background-color:rgb(0,0,0);padding-right:20px;padding-left:20px;padding-bottom:12px;padding-top:12px;text-align:center;font-weight:600;font-size:12px;color:rgb(255,255,255);text-decoration-line:none"
                               target="_blank"
                               ><span
                                 ><!--[if mso]><i style="mso-font-width:500%;mso-text-raise:18" hidden>&#8202;&#8202;</i><![endif]--></span
@@ -169,19 +168,19 @@ exports[`getEmailComponent() > with a demo email template 1`] = `
                       </tbody>
                     </table>
                     <p
-                      style="font-size:14px;color:rgb(0,0,0);line-height:24px;margin-top:16px;margin-bottom:16px">
+                      style="font-size:14px;line-height:24px;color:rgb(0,0,0);margin-top:16px;margin-bottom:16px">
                       or copy and paste this URL into your browser:<!-- -->
                       <a
                         href="https://vercel.com"
-                        style="color:rgb(37,99,235);text-decoration-line:none"
+                        style="color:rgb(21,93,252);text-decoration-line:none"
                         target="_blank"
                         >https://vercel.com</a
                       >
                     </p>
                     <hr
-                      style="margin-left:0;margin-right:0;margin-top:26px;margin-bottom:26px;width:100%;border-width:1px;border-color:rgb(234,234,234);border-style:solid;border:none;border-top:1px solid #eaeaea" />
+                      style="width:100%;border:none;border-top:1px solid #eaeaea;margin-right:0;margin-left:0;margin-bottom:26px;margin-top:26px;border-style:solid;border-width:1px;border-color:rgb(234,234,234)" />
                     <p
-                      style="color:rgb(102,102,102);font-size:12px;line-height:24px;margin-top:16px;margin-bottom:16px">
+                      style="font-size:12px;line-height:24px;color:rgb(102,102,102);margin-top:16px;margin-bottom:16px">
                       This invitation was intended for<!-- -->
                       <span style="color:rgb(0,0,0)">alanturing</span>. This
                       invite was sent from
diff --git a/packages/react-email/src/commands/testing/__snapshots__/export.spec.ts.snap b/packages/react-email/src/commands/testing/__snapshots__/export.spec.ts.snap
index 615acfb5ad..7e4c1a61e7 100644
--- a/packages/react-email/src/commands/testing/__snapshots__/export.spec.ts.snap
+++ b/packages/react-email/src/commands/testing/__snapshots__/export.spec.ts.snap
@@ -10,8 +10,7 @@ exports[`email export 1`] = `
     <meta name="x-apple-disable-message-reformatting" />
     <!--$-->
   </head>
-  <body
-    style='margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;background-color:rgb(255,255,255);padding-left:8px;padding-right:8px;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'>
+  <body style="background-color:rgb(255,255,255)">
     <table
       border="0"
       width="100%"
@@ -22,7 +21,7 @@ exports[`email export 1`] = `
       <tbody>
         <tr>
           <td
-            style='margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;background-color:rgb(255,255,255);padding-left:8px;padding-right:8px;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'>
+            style='margin-right:auto;margin-left:auto;margin-bottom:auto;margin-top:auto;background-color:rgb(255,255,255);padding-right:8px;padding-left:8px;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"'>
             <div
               style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0"
               data-skip-in-text="true">
@@ -38,7 +37,7 @@ exports[`email export 1`] = `
               cellpadding="0"
               cellspacing="0"
               role="presentation"
-              style="margin-left:auto;margin-right:auto;margin-top:40px;margin-bottom:40px;max-width:465px;border-radius:0.25rem;border-width:1px;border-color:rgb(234,234,234);border-style:solid;padding:20px">
+              style="max-width:465px;margin-right:auto;margin-left:auto;margin-bottom:40px;margin-top:40px;border-radius:0.25rem;border-style:solid;border-width:1px;border-color:rgb(234,234,234);padding:20px">
               <tbody>
                 <tr style="width:100%">
                   <td>
@@ -57,26 +56,26 @@ exports[`email export 1`] = `
                               alt="Vercel Logo"
                               height="37"
                               src="/static/vercel-logo.png"
-                              style="margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;display:block;outline:none;border:none;text-decoration:none"
+                              style="display:block;outline:none;border:none;text-decoration:none;margin-right:auto;margin-left:auto;margin-bottom:0;margin-top:0"
                               width="40" />
                           </td>
                         </tr>
                       </tbody>
                     </table>
                     <h1
-                      style="margin-left:0;margin-right:0;margin-top:30px;margin-bottom:30px;padding:0;text-align:center;font-weight:400;font-size:24px;color:rgb(0,0,0)">
+                      style="margin-right:0;margin-left:0;margin-bottom:30px;margin-top:30px;padding:0;text-align:center;font-weight:400;font-size:24px;color:rgb(0,0,0)">
                       Join <strong></strong> on <strong>Vercel</strong>
                     </h1>
                     <p
-                      style="font-size:14px;color:rgb(0,0,0);line-height:24px;margin-top:16px;margin-bottom:16px">
+                      style="font-size:14px;line-height:24px;color:rgb(0,0,0);margin-top:16px;margin-bottom:16px">
                       Hello
                       <!-- -->,
                     </p>
                     <p
-                      style="font-size:14px;color:rgb(0,0,0);line-height:24px;margin-top:16px;margin-bottom:16px">
+                      style="font-size:14px;line-height:24px;color:rgb(0,0,0);margin-top:16px;margin-bottom:16px">
                       <strong></strong> (<a
                         href="mailto:undefined"
-                        style="color:rgb(37,99,235);text-decoration-line:none"
+                        style="color:rgb(21,93,252);text-decoration-line:none"
                         target="_blank"></a
                       >) has invited you to the <strong></strong> team on<!-- -->
                       <strong>Vercel</strong>.
@@ -106,7 +105,7 @@ exports[`email export 1`] = `
                                     <img
                                       alt="undefined&#x27;s profile picture"
                                       height="64"
-                                      style="border-radius:9999px;display:block;outline:none;border:none;text-decoration:none"
+                                      style="display:block;outline:none;border:none;text-decoration:none;border-radius:9999px"
                                       width="64" />
                                   </td>
                                   <td
@@ -125,7 +124,7 @@ exports[`email export 1`] = `
                                     <img
                                       alt="undefined team logo"
                                       height="64"
-                                      style="border-radius:9999px;display:block;outline:none;border:none;text-decoration:none"
+                                      style="display:block;outline:none;border:none;text-decoration:none;border-radius:9999px"
                                       width="64" />
                                   </td>
                                 </tr>
@@ -147,7 +146,7 @@ exports[`email export 1`] = `
                         <tr>
                           <td>
                             <a
-                              style="border-radius:0.25rem;background-color:rgb(0,0,0);padding-left:20px;padding-right:20px;padding-top:12px;padding-bottom:12px;text-align:center;font-weight:600;font-size:12px;color:rgb(255,255,255);text-decoration-line:none;line-height:100%;text-decoration:none;display:inline-block;max-width:100%;mso-padding-alt:0px"
+                              style="line-height:100%;text-decoration:none;display:inline-block;max-width:100%;mso-padding-alt:0px;border-radius:0.25rem;background-color:rgb(0,0,0);padding-right:20px;padding-left:20px;padding-bottom:12px;padding-top:12px;text-align:center;font-weight:600;font-size:12px;color:rgb(255,255,255);text-decoration-line:none"
                               target="_blank"
                               ><span
                                 ><!--[if mso]><i style="mso-font-width:500%;mso-text-raise:18" hidden>&#8202;&#8202;</i><![endif]--></span
@@ -163,16 +162,16 @@ exports[`email export 1`] = `
                       </tbody>
                     </table>
                     <p
-                      style="font-size:14px;color:rgb(0,0,0);line-height:24px;margin-top:16px;margin-bottom:16px">
+                      style="font-size:14px;line-height:24px;color:rgb(0,0,0);margin-top:16px;margin-bottom:16px">
                       or copy and paste this URL into your browser:<!-- -->
                       <a
-                        style="color:rgb(37,99,235);text-decoration-line:none"
+                        style="color:rgb(21,93,252);text-decoration-line:none"
                         target="_blank"></a>
                     </p>
                     <hr
-                      style="margin-left:0;margin-right:0;margin-top:26px;margin-bottom:26px;width:100%;border-width:1px;border-color:rgb(234,234,234);border-style:solid;border:none;border-top:1px solid #eaeaea" />
+                      style="width:100%;border:none;border-top:1px solid #eaeaea;margin-right:0;margin-left:0;margin-bottom:26px;margin-top:26px;border-style:solid;border-width:1px;border-color:rgb(234,234,234)" />
                     <p
-                      style="color:rgb(102,102,102);font-size:12px;line-height:24px;margin-top:16px;margin-bottom:16px">
+                      style="font-size:12px;line-height:24px;color:rgb(102,102,102);margin-top:16px;margin-bottom:16px">
                       This invitation was intended for<!-- -->
                       <span style="color:rgb(0,0,0)"></span>. This invite was
                       sent from <span style="color:rgb(0,0,0)"></span>
diff --git a/packages/tailwind/copy-tailwind-types.mjs b/packages/tailwind/copy-tailwind-types.mjs
deleted file mode 100644
index 6fe7008614..0000000000
--- a/packages/tailwind/copy-tailwind-types.mjs
+++ /dev/null
@@ -1,13 +0,0 @@
-import { promises as fs } from 'node:fs';
-import path from 'node:path';
-import url from 'node:url';
-
-const __dirname = path.dirname(url.fileURLToPath(import.meta.url));
-
-await fs.cp(
-  path.resolve(__dirname, './node_modules/tailwindcss/types'),
-  path.resolve(__dirname, './dist/tailwindcss'),
-  {
-    recursive: true,
-  },
-);
diff --git a/packages/tailwind/package.json b/packages/tailwind/package.json
index 43ed1c5e28..7838e65955 100644
--- a/packages/tailwind/package.json
+++ b/packages/tailwind/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@react-email/tailwind",
-  "version": "1.2.2",
+  "version": "2.0.0-tailwindv4.4",
   "description": "A React component to wrap emails with Tailwind CSS",
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -23,8 +23,8 @@
   },
   "license": "MIT",
   "scripts": {
-    "build": "tsc && cross-env NODE_ENV=production vite build --mode production && node ./copy-tailwind-types.mjs",
-    "build:watch": "vite build --watch",
+    "build": "tsdown",
+    "build:watch": "tsdown --watch",
     "clean": "rm -rf dist",
     "test": "vitest run",
     "test:watch": "vitest"
@@ -43,7 +43,50 @@
     "node": ">=18.0.0"
   },
   "peerDependencies": {
-    "react": "^18.0 || ^19.0 || ^19.0.0-rc"
+    "react": "^18.0 || ^19.0 || ^19.0.0-rc",
+    "@react-email/body": "workspace:*",
+    "@react-email/button": "workspace:*",
+    "@react-email/code-block": "workspace:*",
+    "@react-email/code-inline": "workspace:*",
+    "@react-email/container": "workspace:*",
+    "@react-email/heading": "workspace:*",
+    "@react-email/hr": "workspace:*",
+    "@react-email/img": "workspace:*",
+    "@react-email/link": "workspace:*",
+    "@react-email/preview": "workspace:*",
+    "@react-email/text": "workspace:*"
+  },
+  "peerDependenciesMeta": {
+    "@react-email/button": {
+      "optional": true
+    },
+    "@react-email/body": {
+      "optional": true
+    },
+    "@react-email/code-block": {
+      "optional": true
+    },
+    "@react-email/code-inline": {
+      "optional": true
+    },
+    "@react-email/container": {
+      "optional": true
+    },
+    "@react-email/heading": {
+      "optional": true
+    },
+    "@react-email/hr": {
+      "optional": true
+    },
+    "@react-email/img": {
+      "optional": true
+    },
+    "@react-email/link": {
+      "optional": true
+    },
+    "@react-email/preview": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@react-email/button": "workspace:^",
@@ -54,14 +97,12 @@
     "@react-email/link": "workspace:*",
     "@react-email/render": "workspace:*",
     "@responsive-email/react-email": "0.0.4",
+    "@types/css-tree": "2.3.10",
     "@types/shelljs": "0.8.15",
     "@vitejs/plugin-react": "4.4.1",
-    "cross-env": "10.0.0",
-    "postcss": "8.5.3",
-    "postcss-selector-parser": "7.1.0",
+    "css-tree": "3.1.0",
     "react-dom": "^19",
     "shelljs": "0.9.2",
-    "tailwindcss": "3.4.10",
     "tsconfig": "workspace:*",
     "typescript": "5.8.3",
     "vite": "6.3.6",
@@ -70,5 +111,8 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "dependencies": {
+    "tailwindcss": "4.1.12"
   }
 }
diff --git a/packages/tailwind/src/__snapshots__/tailwind.spec.tsx.snap b/packages/tailwind/src/__snapshots__/tailwind.spec.tsx.snap
index 0bdcd1b93d..c6edea3134 100644
--- a/packages/tailwind/src/__snapshots__/tailwind.spec.tsx.snap
+++ b/packages/tailwind/src/__snapshots__/tailwind.spec.tsx.snap
@@ -1,52 +1,225 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Custom plugins config > uses 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[`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="line-height:1.4285714285714286;text-decoration:none;display:inline-block;max-width:100%;mso-padding-alt:0px;margin-top:2rem;border-radius:0.375rem;background-color:rgb(21,93,252);padding-right:12px;padding-left:12px;padding-bottom:8px;padding-top:8px;color:rgb(229,231,235);font-size:0.875rem" 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<!--/$-->"`;
 
-exports[`Custom plugins config > uses 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[`Tailwind component > allows for complex children manipulation 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="text-align:center;font-size:0"><tbody><tr><td style="padding:0px 0px 0px 0px"><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="max-width:300px;display:inline-block;vertical-align:top;font-size:16px;box-sizing:border-box"><tbody><tr><td>This is the first column</td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="max-width:300px;display:inline-block;vertical-align:top;font-size:16px;box-sizing:border-box"><tbody><tr><td>This is the second column</td></tr></tbody></table></td></tr></tbody></table><!--/$-->"`;
 
-exports[`Custom theme config > uses 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><!--/$-->"`;
+exports[`Tailwind component > does 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[`Custom theme config > uses custom colors 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:rgb(31,182,255);color:rgb(31,182,255)"></div><!--/$-->"`;
+exports[`Tailwind component > doesn't generate styles from text 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$-->container bg-red-500 bg-blue-300<!--/$-->"`;
 
-exports[`Custom theme config > uses custom fonts 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><div style="font-family:Graphik, sans-serif"></div><div style="font-family:Merriweather, serif"></div><!--/$-->"`;
+exports[`Tailwind component > overrides component 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"><!--$--><hr style="width:3rem;border:none;border-top:1px solid #eaeaea"/><!--/$-->"`;
 
-exports[`Custom theme config > uses custom spacing 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><div style="margin:96rem"></div><!--/$-->"`;
+exports[`Tailwind component > preserves 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>
+      .sm_bg-red-50{@media (width>=40rem){background-color:rgb(254,242,242)!important}}.sm_text-sm{@media (width>=40rem){font-size:0.875rem!important;line-height:1.4285714285714286!important}}.md_text-lg{@media (width>=48rem){font-size:1.125rem!important;line-height:1.5555555555555556!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[`Custom theme config > uses 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[`Tailwind component > recognizes 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>
+      .xl_bg-green-500{@media (width>=1280px){background-color:rgb(0,201,80)!important}}.twoxl_bg-blue-500{@media (width>=1536px){background-color:rgb(43,127,255)!important}}
+    </style>
+  </head>
+  <div class="xl_bg-green-500" style="background-color:rgb(255,226,226)">
+    Test
+  </div>
+  <div class="twoxl_bg-blue-500">Test</div>
+  <!--/$-->
+</html>
+"
+`;
 
-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<!--/$-->"`;
+exports[`Tailwind component > renders children with inline 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:rgb(255,255,255)"></div><!--/$-->"`;
 
-exports[`Tailwind component > allows for complex children manipulation 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="text-align:center;font-size:0"><tbody><tr><td style="padding:0px 0px 0px 0px"><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="max-width:300px;display:inline-block;vertical-align:top;font-size:16px;box-sizing:border-box"><tbody><tr><td>This is the first column</td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="max-width:300px;display:inline-block;vertical-align:top;font-size:16px;box-sizing:border-box"><tbody><tr><td>This is the second column</td></tr></tbody></table></td></tr></tbody></table><!--/$-->"`;
+exports[`Tailwind component > uses background image 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><div style="background-image:url(https://example.com/image.png)"></div><!--/$-->"`;
 
-exports[`Tailwind component > does 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 > with custom plugins config > supports 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[`Tailwind component > it should not generate styles from text 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$-->container bg-red-500 bg-blue-300<!--/$-->"`;
+exports[`Tailwind component > with custom plugins config > supports 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>
+      .sm_border-custom{@media (width>=40rem){border:2px solid!important}}
+    </style>
+  </head>
+  <body>
+    <div class="sm_border-custom" style="border:2px solid"></div>
+    <!--/$-->
+  </body>
+</html>
+"
+`;
 
-exports[`Tailwind component > preserves 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 > with custom theme config > supports 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>
+<!--/$-->
+"
+`;
 
-exports[`Tailwind component > recognizes 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 > with custom theme config > supports custom colors 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:rgb(31,182,255);color:rgb(31,182,255)"></div>
+<!--/$-->
+"
+`;
 
-exports[`Tailwind component > uses background image 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><div style="background-image:url(https://example.com/image.png)"></div><!--/$-->"`;
+exports[`Tailwind component > with custom theme config > supports custom fonts 1`] = `
+"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<!--$-->
+<div style="font-family:Graphik,sans-serif"></div>
+<div style="font-family:Merriweather,serif"></div>
+<!--/$-->
+"
+`;
 
-exports[`Tailwind component > warns about safelist not being supported 1`] = `
+exports[`Tailwind component > with custom theme config > supports custom spacing 1`] = `
+"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<!--$-->
+<div style="margin:96rem"></div>
+<!--/$-->
+"
+`;
+
+exports[`Tailwind component > with custom theme config > supports 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[`Tailwind component > with non-inlinable styles > adds 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>
+      .hover_bg-red-600{&:hover{@media (hover:hover){background-color:rgb(231,0,11)!important}}}.focus_bg-red-700{&:focus{background-color:rgb(193,0,7)!important}}.sm_bg-red-300{@media (width>=40rem){background-color:rgb(255,162,162)!important}}.sm_hover_bg-red-200{@media (width>=40rem){&:hover{@media (hover:hover){background-color:rgb(255,201,201)!important}}}}.md_bg-red-400{@media (width>=48rem){background-color:rgb(255,100,103)!important}}.lg_bg-red-500{@media (width>=64rem){background-color:rgb(251,44,54)!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(255,201,201)"></div>
+    <!--/$-->
+  </body>
+</html>
+"
+`;
+
+exports[`Tailwind component > with non-inlinable styles > persists 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>
+      .sm_bg-red-500{@media (width>=40rem){background-color:rgb(251,44,54)!important}}
+    </style>
+    <style></style>
+    <link />
+  </head>
+  <body>
+    <div class="sm_bg-red-500" style="background-color:rgb(255,201,201)"></div>
+    <!--/$-->
+  </body>
+</html>
+"
+`;
+
+exports[`Tailwind component > with non-inlinable styles > throws 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.
+For the media queries to work properly on rendering, they need to be added into a <style> tag inside of a <head> tag,
+the Tailwind component tried finding a <head> element but just wasn't able to find it.
+
+Make sure that you have a <head> element at some point inside of the <Tailwind> component at any depth. 
+This can also be our <Head> component.
+
+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[`Tailwind component > with non-inlinable styles > throws error when used without the head and with media query class names very deeply nested 1`] = `
+[Error: You are trying to use the following Tailwind classes that cannot be inlined: sm:h-10 sm:w-10.
+For the media queries to work properly on rendering, they need to be added into a <style> tag inside of a <head> tag,
+the Tailwind component tried finding a <head> element but just wasn't able to find it.
+
+Make sure that you have a <head> element at some point inside of the <Tailwind> component at any depth. 
+This can also be our <Head> component.
+
+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[`Tailwind component > with non-inlinable styles > works 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>
+      .sm_bg-red-300{@media (width>=40rem){background-color:rgb(255,162,162)!important}}.md_bg-red-400{@media (width>=48rem){background-color:rgb(255,100,103)!important}}.lg_bg-red-500{@media (width>=64rem){background-color:rgb(251,44,54)!important}}
+    </style>
+  </head>
+  <body>
+    <div
+      class="sm_bg-red-300 md_bg-red-400 lg_bg-red-500"
+      style="background-color:rgb(255,201,201)"></div>
+    <!--/$-->
+  </body>
+</html>
+"
+`;
+
+exports[`Tailwind component > with non-inlinable styles > works 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>.sm_bg-red-300{@media (width>=40rem){background-color:rgb(255,162,162)!important}}.md_bg-red-400{@media (width>=48rem){background-color:rgb(255,100,103)!important}}.lg_bg-red-500{@media (width>=64rem){background-color:rgb(251,44,54)!important}}</style></head><body><div class="sm_bg-red-300 md_bg-red-400 lg_bg-red-500" style="background-color:rgb(255,201,201)"></div><!--/$--></body></html>"`;
+
+exports[`Tailwind component > with non-inlinable styles > works 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(min-width:768px){.md_p-4{padding:1rem !important}}
+    .max-sm_text-red-600{@media (width<40rem){color:rgb(231,0,11)!important}}
   </style>
 </head>
-<body>
-  <button type="button" class="md_p-4" style="background-color:rgb(37,99,235)">
-    Click me</button
-  ><!--/$-->
-</body>
+<p class="max-sm_text-red-600" style="color:rgb(20,71,230)">I am some text</p>
+<!--/$-->
 "
 `;
 
-exports[`Tailwind component > works 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 > works 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(21,93,252);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(21,93,252);text-decoration-line:none" target="_blank">https://react.email</a></p><!--/$--></body></html>"`;
 
 exports[`Tailwind component > works 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<!--/$-->"`;
 
@@ -57,7 +230,7 @@ exports[`Tailwind component > works with blocklist 1`] = `
   <meta name="x-apple-disable-message-reformatting" />
   <!--$-->
   <style>
-    @media(min-width:768px){.md_p-4{padding:1rem !important}}
+    .md_p-4{@media (width>=48rem){padding:1rem!important}}
   </style>
 </head>
 <body>
@@ -67,63 +240,38 @@ exports[`Tailwind component > works with blocklist 1`] = `
 "
 `;
 
-exports[`Tailwind component > works 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 > works 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><!--/$-->"`;
-
-exports[`Tailwind component > works with components that return children 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><div style="margin-top:100px;font-size:50px;line-height:1">Hello world</div><div style="padding:20px"><p style="font-weight:700;font-size:50px">React Email</p></div><!--/$-->"`;
-
-exports[`Tailwind component > works with components that use React.forwardRef 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><div style="margin-top:100px;font-size:50px;line-height:1">Hello world</div><div style="padding:20px"><p style="font-weight:700;font-size:50px">React Email</p></div><!--/$-->"`;
-
-exports[`Tailwind component > works with custom components with fragment at the root 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><div style="margin-top:100px;font-size:50px;line-height:1">Hello world</div><div style="padding:20px"><p style="font-weight:700;font-size:50px">React Email</p></div><div style="padding:20px"><p style="font-weight:700;font-size:50px">React Email</p></div><!--/$-->"`;
-
-exports[`non-inlinable styles > adds css to <head/> and keeps 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 > does not have duplicate media queries 1`] = `
+exports[`Tailwind component > works 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>
-  <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}}
+    .lg_max-h-calc50pxplus5rem{@media (width>=64rem){max-height:calc(50px + 5rem)!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>
+<div
+  class="lg_max-h-calc50pxplus5rem"
+  style="max-height:calc(50px + 3rem);background-color:rgb(255,226,226)">
+  <div style="height:200px">something tall</div>
+</div>
+<!--/$-->
 "
 `;
 
-exports[`non-inlinable styles > persists 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[`non-inlinable styles > throws 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.
-For the media queries to work properly on rendering, they need to be added into a <style> tag inside of a <head> tag,
-the Tailwind component tried finding a <head> element but just wasn't able to find it.
-
-Make sure that you have a <head> element at some point inside of the <Tailwind> component at any depth. 
-This can also be our <Head> component.
+exports[`Tailwind component > works 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(81,162,255);background-color:rgb(251,44,54)"></div><!--/$-->"`;
 
-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[`Tailwind component > works with components that return children 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><div style="margin-top:100px;font-size:50px;line-height:1">Hello world</div><div style="padding:20px"><p style="font-weight:700;font-size:50px">React Email</p></div><!--/$-->"`;
 
-exports[`non-inlinable styles > throws error when used without the head and with media query class names only very deeply nested 1`] = `
-[Error: You are trying to use the following Tailwind classes that cannot be inlined: sm:h-10 sm:w-10.
-For the media queries to work properly on rendering, they need to be added into a <style> tag inside of a <head> tag,
-the Tailwind component tried finding a <head> element but just wasn't able to find it.
+exports[`Tailwind component > works with components that use React.forwardRef 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><div style="margin-top:100px;font-size:50px;line-height:1">Hello world</div><div style="padding:20px"><p style="font-weight:700;font-size:50px">React Email</p></div><!--/$-->"`;
 
-Make sure that you have a <head> element at some point inside of the <Tailwind> component at any depth. 
-This can also be our <Head> component.
+exports[`Tailwind component > works with custom components with fragment at the root 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><div style="margin-top:100px;font-size:50px;line-height:1">Hello world</div><div style="padding:20px"><p style="font-weight:700;font-size:50px">React Email</p></div><div style="padding:20px"><p style="font-weight:700;font-size:50px">React Email</p></div><!--/$-->"`;
 
-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[`Tailwind component > works with shadows 1`] = `
+"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<!--$-->
+<div
+  style="box-shadow:0 0 rgb(0,0,0,0),0 0 rgb(0,0,0,0),0 0 rgb(0,0,0,0),0 0 rgb(0,0,0,0),0 1px 3px 0 rgb(85,85,85,100%),0 1px 2px -1px rgb(85,85,85,100%)">
+  shadow around here
+</div>
+<!--/$-->
+"
 `;
-
-exports[`non-inlinable styles > works 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[`non-inlinable styles > works 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[`non-inlinable styles > works 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><!--/$-->"`;
diff --git a/packages/tailwind/src/hooks/__snapshots__/use-tailwind.spec.ts.snap b/packages/tailwind/src/hooks/__snapshots__/use-tailwind.spec.ts.snap
deleted file mode 100644
index baebff2970..0000000000
--- a/packages/tailwind/src/hooks/__snapshots__/use-tailwind.spec.ts.snap
+++ /dev/null
@@ -1,16 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`useTailwind() 1`] = `
-".text-red-500 {
-    color: rgb(239 68 68 / 1)
-}
-  @media (min-width: 640px) {
-    .sm\\:bg-blue-300 {
-        background-color: rgb(147 197 253 / 1)
-    }
-}
-  .bg-slate-900 {
-    background-color: rgb(15 23 42 / 1)
-}
-"
-`;
diff --git a/packages/tailwind/src/hooks/use-suspensed-promise.ts b/packages/tailwind/src/hooks/use-suspended-promise.ts
similarity index 100%
rename from packages/tailwind/src/hooks/use-suspensed-promise.ts
rename to packages/tailwind/src/hooks/use-suspended-promise.ts
diff --git a/packages/tailwind/src/hooks/use-suspensed-promise.spec.ts b/packages/tailwind/src/hooks/use-suspensed-promise.spec.ts
index a43199c247..2063a1ab49 100644
--- a/packages/tailwind/src/hooks/use-suspensed-promise.spec.ts
+++ b/packages/tailwind/src/hooks/use-suspensed-promise.spec.ts
@@ -1,5 +1,5 @@
 /** biome-ignore-all lint/correctness/useHookAtTopLevel: function is not a React hook */
-import { useSuspensedPromise } from './use-suspensed-promise';
+import { useSuspensedPromise } from './use-suspended-promise';
 
 describe('useSuspensedPromise', () => {
   beforeEach(() => {});
diff --git a/packages/tailwind/src/tailwind.spec.tsx b/packages/tailwind/src/tailwind.spec.tsx
index cc05724cbd..292521e000 100644
--- a/packages/tailwind/src/tailwind.spec.tsx
+++ b/packages/tailwind/src/tailwind.spec.tsx
@@ -4,10 +4,9 @@ import { Heading } from '@react-email/heading';
 import { Hr } from '@react-email/hr';
 import { Html } from '@react-email/html';
 import { Link } from '@react-email/link';
-import { render } from '@react-email/render';
+import { pretty, render } from '@react-email/render';
 import { ResponsiveColumn, ResponsiveRow } from '@responsive-email/react-email';
 import React from 'react';
-import { vi } from 'vitest';
 import type { TailwindConfig } from '.';
 import { Tailwind } from '.';
 
@@ -26,7 +25,11 @@ describe('Tailwind component', () => {
 
   it('works with blocklist', async () => {
     const actualOutput = await render(
-      <Tailwind config={{ blocklist: ['bg-blue-600'] }}>
+      <Tailwind
+        config={{
+          blocklist: ['bg-blue-600'],
+        }}
+      >
         <Head />
         <body>
           <button type="button" className="bg-blue-600 md:p-4">
@@ -40,23 +43,14 @@ describe('Tailwind component', () => {
     expect(actualOutput).toMatchSnapshot();
   });
 
-  it('warns about safelist not being supported', async () => {
-    const spy = vi.spyOn(console, 'warn');
-
-    const actualOutput = await render(
-      <Tailwind config={{ safelist: ['bg-red-500'] }}>
-        <Head />
-        <body>
-          <button type="button" className="bg-blue-600 md:p-4">
-            Click me
-          </button>
-        </body>
-      </Tailwind>,
-      { pretty: true },
-    );
-
-    expect(spy).toHaveBeenCalled();
-    expect(actualOutput).toMatchSnapshot();
+  it('works with shadows', async () => {
+    expect(
+      await render(
+        <Tailwind>
+          <div className="shadow-[#555] shadow">shadow around here</div>
+        </Tailwind>,
+      ).then(pretty),
+    ).toMatchSnapshot();
   });
 
   it('works with class manipulation done on components', async () => {
@@ -66,11 +60,9 @@ describe('Tailwind component', () => {
     }) => {
       expect(
         props.style,
-        'Styles should be generated the same for a component',
-      ).toEqual({
-        color: 'rgb(96,165,250)',
-        padding: '1rem',
-      });
+        'styles should not be generated for a component',
+      ).toBeUndefined();
+      expect(props.className).toBe('p-4 text-blue-400');
       return (
         <div
           className={`${props.className} bg-red-500`}
@@ -118,16 +110,14 @@ describe('Tailwind component', () => {
     expect(actualOutput).toMatchSnapshot();
   });
 
-  describe('Inline styles', () => {
-    it('renders children with inline Tailwind styles', async () => {
-      const actualOutput = await render(
-        <Tailwind>
-          <div className="bg-white" />
-        </Tailwind>,
-      );
+  it('renders children with inline Tailwind styles', async () => {
+    const actualOutput = await render(
+      <Tailwind>
+        <div className="bg-white" />
+      </Tailwind>,
+    );
 
-      expect(actualOutput).not.toBeNull();
-    });
+    expect(actualOutput).toMatchSnapshot();
   });
 
   test('<Button className="px-3 py-2 mt-8 text-sm text-gray-200 bg-blue-600 rounded-md">', async () => {
@@ -175,7 +165,7 @@ describe('Tailwind component', () => {
     expect(actualOutput).toMatchSnapshot();
   });
 
-  test('it should not generate styles from text', async () => {
+  it("doesn't generate styles from text", async () => {
     expect(
       await render(<Tailwind>container bg-red-500 bg-blue-300</Tailwind>),
     ).toMatchSnapshot();
@@ -284,7 +274,7 @@ describe('Tailwind component', () => {
       </Tailwind>,
     );
 
-    expect(actualOutput).toContain('width:3rem');
+    expect(actualOutput).toMatchSnapshot();
   });
 
   it('preserves mso styles', async () => {
@@ -300,32 +290,33 @@ describe('Tailwind component', () => {
           <div className="custom-class bg-white sm:bg-red-50 sm:text-sm md:text-lg" />
         </Tailwind>
       </Html>,
-    );
+    ).then(pretty);
 
     expect(actualOutput).toMatchSnapshot();
   });
 
   it('recognizes custom responsive screen', async () => {
-    const config: TailwindConfig = {
-      theme: {
-        screens: {
-          sm: { min: '640px' },
-          md: { min: '768px' },
-          lg: { min: '1024px' },
-          xl: { min: '1280px' },
-          '2xl': { min: '1536px' },
-        },
-      },
-    };
     const actualOutput = await render(
       <Html>
-        <Tailwind config={config}>
+        <Tailwind
+          config={{
+            theme: {
+              screens: {
+                sm: { min: '640px' },
+                md: { min: '768px' },
+                lg: { min: '1024px' },
+                xl: { min: '1280px' },
+                '2xl': { min: '1536px' },
+              },
+            },
+          }}
+        >
           <Head />
           <div className="bg-red-100 xl:bg-green-500">Test</div>
           <div className="2xl:bg-blue-500">Test</div>
         </Tailwind>
       </Html>,
-    );
+    ).then(pretty);
 
     expect(actualOutput).toMatchSnapshot();
   });
@@ -338,14 +329,13 @@ describe('Tailwind component', () => {
           <div className="h-[200px]">something tall</div>
         </div>
       </Tailwind>,
-    );
+    ).then(pretty);
 
     expect(actualOutput).toMatchSnapshot();
   });
-});
 
-describe('non-inlinable styles', () => {
-  /*
+  describe('with non-inlinable styles', () => {
+    /*
     This test is because of https://github.com/resend/react-email/issues/1112
     which was being caused because we required to, either have our <Head> component,
     or a <head> element directly inside the <Tailwind> component for media queries to be applied
@@ -356,309 +346,277 @@ describe('non-inlinable styles', () => {
     and apply the styles there. This also fixes the issue where it would not be allowed to use
     Tailwind classes on the <html> element as the <head> would be required directly bellow Tailwind.
   */
-  it('works with arbitrarily deep (in the React tree) <head> elements', async () => {
-    expect(
-      await render(
-        <Tailwind>
-          <html lang="en">
-            <head />
-            <body>
-              <div className="bg-red-200 sm:bg-red-300 md:bg-red-400 lg:bg-red-500" />
-            </body>
-          </html>
-        </Tailwind>,
-      ),
-    ).toMatchSnapshot();
+    it('works with arbitrarily deep (in the React tree) <head> elements', async () => {
+      expect(
+        await render(
+          <Tailwind>
+            <html lang="en">
+              <head />
+              <body>
+                <div className="bg-red-200 sm:bg-red-300 md:bg-red-400 lg:bg-red-500" />
+              </body>
+            </html>
+          </Tailwind>,
+        ).then(pretty),
+      ).toMatchSnapshot();
+
+      const MyHead = (props: Record<string, any>) => {
+        return <head {...props} />;
+      };
 
-    const MyHead = (props: Record<string, any>) => {
-      return <head {...props} />;
-    };
+      expect(
+        await render(
+          <Tailwind>
+            <html lang="en">
+              <MyHead />
+              <body>
+                <div className="bg-red-200 sm:bg-red-300 md:bg-red-400 lg:bg-red-500" />
+              </body>
+            </html>
+          </Tailwind>,
+        ),
+      ).toMatchSnapshot();
+    });
 
-    expect(
-      await render(
-        <Tailwind>
-          <html lang="en">
-            <MyHead />
+    it('adds css to <head/> and keep class names', async () => {
+      const actualOutput = await render(
+        <html lang="en">
+          <Tailwind>
+            <head />
             <body>
-              <div className="bg-red-200 sm:bg-red-300 md:bg-red-400 lg:bg-red-500" />
+              <div className="bg-red-200 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" />
             </body>
-          </html>
-        </Tailwind>,
-      ),
-    ).toMatchSnapshot();
-  });
-
-  it('does not have duplicate media queries', async () => {
-    const Body = (props: { className: string; children: React.ReactNode }) => {
-      return <body className={props.className}>{props.children}</body>;
-    };
-    const output = await render(
-      <Tailwind>
-        <Head />
-        <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();
-  });
-
-  it('adds css to <head/> and keeps class names', async () => {
-    const actualOutput = await render(
-      <html lang="en">
-        <Tailwind>
-          <head />
-          <body>
-            <div className="bg-red-200 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" />
-          </body>
-        </Tailwind>
-      </html>,
-    );
-
-    expect(actualOutput).toMatchSnapshot();
-  });
+          </Tailwind>
+        </html>,
+      ).then(pretty);
 
-  it('throws error when used without the head and with media query class names only very deeply nested', async () => {
-    const Component1 = (props: Record<string, any>) => {
-      return (
-        <div {...props} className="h-30 w-40 sm:h-10 sm:w-10">
-          {props.children}
-        </div>
-      );
-    };
-    const Component2 = (props: Record<string, any>) => {
-      return (
-        <div {...props}>
-          <Component1>{props.children}</Component1>
-        </div>
-      );
-    };
-    const Component3 = (props: Record<string, any>) => {
-      return (
-        <div {...props}>
-          <Component2>{props.children}</Component2>
-        </div>
-      );
-    };
+      expect(actualOutput).toMatchSnapshot();
+    });
 
-    function renderComplexEmailWithoutHead() {
-      return render(
-        <Tailwind>
-          <div className="bg-red-300">
-            <Component3 className="random-classname w-full">
-              <div className="w-50">Testing</div>
-            </Component3>
+    it('throws error when used without the head and with media query class names very deeply nested', async () => {
+      const Component1 = (props: Record<string, any>) => {
+        return (
+          <div {...props} className="h-30 w-40 sm:h-10 sm:w-10">
+            {props.children}
           </div>
-        </Tailwind>,
-      );
-    }
+        );
+      };
+      const Component2 = (props: Record<string, any>) => {
+        return (
+          <div {...props}>
+            <Component1>{props.children}</Component1>
+          </div>
+        );
+      };
+      const Component3 = (props: Record<string, any>) => {
+        return (
+          <div {...props}>
+            <Component2>{props.children}</Component2>
+          </div>
+        );
+      };
 
-    await expect(
-      renderComplexEmailWithoutHead,
-    ).rejects.toThrowErrorMatchingSnapshot();
-  });
+      function renderComplexEmailWithoutHead() {
+        return render(
+          <Tailwind>
+            <div className="bg-red-300">
+              <Component3 className="random-classname w-full">
+                <div className="w-50">Testing</div>
+              </Component3>
+            </div>
+          </Tailwind>,
+        );
+      }
+
+      await expect(
+        renderComplexEmailWithoutHead,
+      ).rejects.toThrowErrorMatchingSnapshot();
+    });
 
-  it('works with relatively complex media query utilities', async () => {
-    const Email = () => {
-      return (
-        <Tailwind>
-          <Head />
-          <p className="text-blue-700 max-sm:text-red-600">I am some text</p>
-        </Tailwind>
-      );
-    };
+    it('works with relatively complex media query utilities', async () => {
+      const Email = () => {
+        return (
+          <Tailwind>
+            <Head />
+            <p className="text-blue-700 max-sm:text-red-600">I am some text</p>
+          </Tailwind>
+        );
+      };
 
-    expect(await render(<Email />)).toMatchSnapshot();
-  });
+      expect(await render(<Email />).then(pretty)).toMatchSnapshot();
+    });
 
-  it('throws an error when used without a <head/>', async () => {
-    function noHead() {
-      return render(
-        <Tailwind>
-          <html lang="en">
-            {/* <Head></Head> */}
-            <div className="bg-red-200 sm:bg-red-500" />
-          </html>
-        </Tailwind>,
-      );
-    }
-    await expect(noHead).rejects.toThrowErrorMatchingSnapshot();
-  });
+    it('throws an error when used without a <head/>', async () => {
+      function noHead() {
+        return render(
+          <Tailwind>
+            <html lang="en">
+              {/* <Head></Head> */}
+              <div className="bg-red-200 sm:bg-red-500" />
+            </html>
+          </Tailwind>,
+        ).then(pretty);
+      }
+      await expect(noHead).rejects.toThrowErrorMatchingSnapshot();
+    });
 
-  it('persists existing <head/> elements', async () => {
-    const actualOutput = await render(
-      <html lang="en">
-        <Tailwind>
-          <head>
-            <style />
-            <link />
-          </head>
-          <body>
-            <div className="bg-red-200 sm:bg-red-500" />
-          </body>
-        </Tailwind>
-      </html>,
-    );
+    it('persists existing <head/> elements', async () => {
+      const actualOutput = await render(
+        <html lang="en">
+          <Tailwind>
+            <head>
+              <style />
+              <link />
+            </head>
+            <body>
+              <div className="bg-red-200 sm:bg-red-500" />
+            </body>
+          </Tailwind>
+        </html>,
+      ).then(pretty);
 
-    expect(actualOutput).toMatchSnapshot();
+      expect(actualOutput).toMatchSnapshot();
+    });
   });
-});
 
-describe('Custom theme config', () => {
-  it('uses custom colors', async () => {
-    const config: TailwindConfig = {
-      theme: {
-        extend: {
-          colors: {
-            custom: '#1fb6ff',
+  describe('with custom theme config', () => {
+    it('supports custom colors', async () => {
+      const config: TailwindConfig = {
+        theme: {
+          extend: {
+            colors: {
+              custom: '#1fb6ff',
+            },
           },
         },
-      },
-    };
+      };
 
-    const actualOutput = await render(
-      <Tailwind config={config}>
-        <div className="bg-custom text-custom" />
-      </Tailwind>,
-    );
+      const actualOutput = await render(
+        <Tailwind config={config}>
+          <div className="bg-custom text-custom" />
+        </Tailwind>,
+      ).then(pretty);
 
-    expect(actualOutput).toMatchSnapshot();
-  });
+      expect(actualOutput).toMatchSnapshot();
+    });
 
-  it('uses custom fonts', async () => {
-    const config: TailwindConfig = {
-      theme: {
-        extend: {
-          fontFamily: {
-            sans: ['Graphik', 'sans-serif'],
-            serif: ['Merriweather', 'serif'],
+    it('supports custom fonts', async () => {
+      const config: TailwindConfig = {
+        theme: {
+          extend: {
+            fontFamily: {
+              sans: ['Graphik', 'sans-serif'],
+              serif: ['Merriweather', 'serif'],
+            },
           },
         },
-      },
-    };
+      };
 
-    const actualOutput = await render(
-      <Tailwind config={config}>
-        <div className="font-sans" />
-        <div className="font-serif" />
-      </Tailwind>,
-    );
+      const actualOutput = await render(
+        <Tailwind config={config}>
+          <div className="font-sans" />
+          <div className="font-serif" />
+        </Tailwind>,
+      ).then(pretty);
 
-    expect(actualOutput).toMatchSnapshot();
-  });
+      expect(actualOutput).toMatchSnapshot();
+    });
 
-  it('uses custom spacing', async () => {
-    const config: TailwindConfig = {
-      theme: {
-        extend: {
-          spacing: {
-            '8xl': '96rem',
+    it('supports custom spacing', async () => {
+      const config: TailwindConfig = {
+        theme: {
+          extend: {
+            spacing: {
+              '8xl': '96rem',
+            },
           },
         },
-      },
-    };
-    const actualOutput = await render(
-      <Tailwind config={config}>
-        <div className="m-8xl" />
-      </Tailwind>,
-    );
-    expect(actualOutput).toMatchSnapshot();
-  });
+      };
+      const actualOutput = await render(
+        <Tailwind config={config}>
+          <div className="m-8xl" />
+        </Tailwind>,
+      ).then(pretty);
+      expect(actualOutput).toMatchSnapshot();
+    });
 
-  it('uses custom border radius', async () => {
-    const config: TailwindConfig = {
-      theme: {
-        extend: {
-          borderRadius: {
-            '4xl': '2rem',
+    it('supports custom border radius', async () => {
+      const config: TailwindConfig = {
+        theme: {
+          extend: {
+            borderRadius: {
+              '4xl': '2rem',
+            },
           },
         },
-      },
-    };
-    const actualOutput = await render(
-      <Tailwind config={config}>
-        <div className="rounded-4xl" />
-      </Tailwind>,
-    );
-    expect(actualOutput).toMatchSnapshot();
-  });
+      };
+      const actualOutput = await render(
+        <Tailwind config={config}>
+          <div className="rounded-4xl" />
+        </Tailwind>,
+      ).then(pretty);
+      expect(actualOutput).toMatchSnapshot();
+    });
 
-  it('uses custom text alignment', async () => {
-    const config: TailwindConfig = {
-      theme: {
-        extend: {
-          textAlign: {
-            justify: 'justify',
+    it('supports custom text alignment', async () => {
+      const config: TailwindConfig = {
+        theme: {
+          extend: {
+            textAlign: {
+              justify: 'justify',
+            },
           },
         },
-      },
-    };
+      };
 
-    const actualOutput = await render(
-      <Tailwind config={config}>
-        <div className="text-justify" />
-      </Tailwind>,
-    );
+      const actualOutput = await render(
+        <Tailwind config={config}>
+          <div className="text-justify" />
+        </Tailwind>,
+      ).then(pretty);
 
-    expect(actualOutput).toMatchSnapshot();
+      expect(actualOutput).toMatchSnapshot();
+    });
   });
-});
 
-describe('Custom plugins config', () => {
-  it('uses custom plugins', async () => {
-    const config: TailwindConfig = {
+  describe('with custom plugins config', () => {
+    const config = {
       plugins: [
-        ({ addUtilities }: any) => {
-          const newUtilities = {
-            '.border-custom': {
-              border: '2px solid',
-            },
-          };
-
-          addUtilities(newUtilities);
+        {
+          handler: (api) => {
+            api.addUtilities({
+              '.border-custom': {
+                border: '2px solid',
+              },
+            });
+          },
         },
       ],
-    };
+    } satisfies TailwindConfig;
 
-    const actualOutput = await render(
-      <Tailwind config={config}>
-        <div className="border-custom" />
-      </Tailwind>,
-    );
-
-    expect(actualOutput).toMatchSnapshot();
-  });
-
-  it('uses custom plugins with responsive styles', async () => {
-    const config: TailwindConfig = {
-      plugins: [
-        ({ addUtilities }: any) => {
-          const newUtilities = {
-            '.border-custom': {
-              border: '2px solid',
-            },
-          };
+    it('supports custom plugins', async () => {
+      const actualOutput = await render(
+        <Tailwind config={config}>
+          <div className="border-custom" />
+        </Tailwind>,
+      ).then(pretty);
 
-          addUtilities(newUtilities);
-        },
-      ],
-    };
+      expect(actualOutput).toMatchSnapshot();
+    });
 
-    const actualOutput = await render(
-      <html lang="en">
-        <Tailwind config={config}>
-          <head />
-          <body>
-            <div className="border-custom sm:border-custom" />
-          </body>
-        </Tailwind>
-      </html>,
-    );
+    it('supports custom plugins with responsive styles', async () => {
+      const actualOutput = await render(
+        <html lang="en">
+          <Tailwind config={config}>
+            <head />
+            <body>
+              <div className="border-custom sm:border-custom" />
+            </body>
+          </Tailwind>
+        </html>,
+      ).then(pretty);
 
-    expect(actualOutput).toMatchSnapshot();
+      expect(actualOutput).toMatchSnapshot();
+    });
   });
 });
diff --git a/packages/tailwind/src/tailwind.tsx b/packages/tailwind/src/tailwind.tsx
index f8b100bfb2..45f4751ffc 100644
--- a/packages/tailwind/src/tailwind.tsx
+++ b/packages/tailwind/src/tailwind.tsx
@@ -1,27 +1,18 @@
-import { Root } from 'postcss';
+import { type CssNode, generate, List, type StyleSheet } from 'css-tree';
 import * as React from 'react';
-import type { Config as TailwindOriginalConfig } from 'tailwindcss';
-import { minifyCss } from './utils/css/minify-css';
-import { removeRuleDuplicatesFromRoot } from './utils/css/remove-rule-duplicates-from-root';
+import type { Config } from 'tailwindcss';
+import { useSuspensedPromise } from './hooks/use-suspended-promise';
+import { extractRulesPerClass } from './utils/css/extract-rules-per-class';
+import { getCustomProperties } from './utils/css/get-custom-properties';
+import { resolveAllCssVariables } from './utils/css/resolve-all-css-variables';
+import { resolveCalcExpressions } from './utils/css/resolve-calc-expressions';
+import { sanitizeDeclarations } from './utils/css/sanitize-declarations';
+import { sanitizeNonInlinableRules } from './utils/css/sanitize-non-inlinable-rules';
 import { mapReactTree } from './utils/react/map-react-tree';
 import { cloneElementWithInlinedStyles } from './utils/tailwindcss/clone-element-with-inlined-styles';
 import { setupTailwind } from './utils/tailwindcss/setup-tailwind';
 
-export type TailwindConfig = Pick<
-  TailwindOriginalConfig,
-  | 'important'
-  | 'prefix'
-  | 'separator'
-  | 'safelist'
-  | 'blocklist'
-  | 'presets'
-  | 'future'
-  | 'experimental'
-  | 'darkMode'
-  | 'theme'
-  | 'corePlugins'
-  | 'plugins'
->;
+export type TailwindConfig = Omit<Config, 'content'>;
 
 export interface TailwindProps {
   children: React.ReactNode;
@@ -36,128 +27,138 @@ export interface EmailElementProps {
 
 export const pixelBasedPreset: TailwindConfig = {
   theme: {
-    fontSize: {
-      xs: ['12px', { lineHeight: '16px' }],
-      sm: ['14px', { lineHeight: '20px' }],
-      base: ['16px', { lineHeight: '24px' }],
-      lg: ['18px', { lineHeight: '28px' }],
-      xl: ['20px', { lineHeight: '28px' }],
-      '2xl': ['24px', { lineHeight: '32px' }],
-      '3xl': ['30px', { lineHeight: '36px' }],
-      '4xl': ['36px', { lineHeight: '36px' }],
-      '5xl': ['48px', { lineHeight: '1' }],
-      '6xl': ['60px', { lineHeight: '1' }],
-      '7xl': ['72px', { lineHeight: '1' }],
-      '8xl': ['96px', { lineHeight: '1' }],
-      '9xl': ['144px', { lineHeight: '1' }],
-    },
-    spacing: {
-      px: '1px',
-      0: '0',
-      0.5: '2px',
-      1: '4px',
-      1.5: '6px',
-      2: '8px',
-      2.5: '10px',
-      3: '12px',
-      3.5: '14px',
-      4: '16px',
-      5: '20px',
-      6: '24px',
-      7: '28px',
-      8: '32px',
-      9: '36px',
-      10: '40px',
-      11: '44px',
-      12: '48px',
-      14: '56px',
-      16: '64px',
-      20: '80px',
-      24: '96px',
-      28: '112px',
-      32: '128px',
-      36: '144px',
-      40: '160px',
-      44: '176px',
-      48: '192px',
-      52: '208px',
-      56: '224px',
-      60: '240px',
-      64: '256px',
-      72: '288px',
-      80: '320px',
-      96: '384px',
+    extend: {
+      fontSize: {
+        xs: ['12px', { lineHeight: '16px' }],
+        sm: ['14px', { lineHeight: '20px' }],
+        base: ['16px', { lineHeight: '24px' }],
+        lg: ['18px', { lineHeight: '28px' }],
+        xl: ['20px', { lineHeight: '28px' }],
+        '2xl': ['24px', { lineHeight: '32px' }],
+        '3xl': ['30px', { lineHeight: '36px' }],
+        '4xl': ['36px', { lineHeight: '36px' }],
+        '5xl': ['48px', { lineHeight: '1' }],
+        '6xl': ['60px', { lineHeight: '1' }],
+        '7xl': ['72px', { lineHeight: '1' }],
+        '8xl': ['96px', { lineHeight: '1' }],
+        '9xl': ['144px', { lineHeight: '1' }],
+      },
+      spacing: {
+        px: '1px',
+        0: '0',
+        0.5: '2px',
+        1: '4px',
+        1.5: '6px',
+        2: '8px',
+        2.5: '10px',
+        3: '12px',
+        3.5: '14px',
+        4: '16px',
+        5: '20px',
+        6: '24px',
+        7: '28px',
+        8: '32px',
+        9: '36px',
+        10: '40px',
+        11: '44px',
+        12: '48px',
+        14: '56px',
+        16: '64px',
+        20: '80px',
+        24: '96px',
+        28: '112px',
+        32: '128px',
+        36: '144px',
+        40: '160px',
+        44: '176px',
+        48: '192px',
+        52: '208px',
+        56: '224px',
+        60: '240px',
+        64: '256px',
+        72: '288px',
+        80: '320px',
+        96: '384px',
+      },
     },
   },
 };
 
-export const Tailwind: React.FC<TailwindProps> = ({ children, config }) => {
-  const tailwind = setupTailwind(config ?? {});
-
-  const nonInlineStylesRootToApply = new Root();
-  let mediaQueryClassesForAllElement: string[] = [];
-
-  let hasNonInlineStylesToApply = false as boolean;
+export function Tailwind({ children, config }: TailwindProps) {
+  const tailwindSetup = useSuspensedPromise(
+    () => setupTailwind(config ?? {}),
+    JSON.stringify(config, (_key, value) =>
+      typeof value === 'function' ? value.toString() : value,
+    ),
+  );
+  let classesUsed: string[] = [];
 
   let mappedChildren: React.ReactNode = mapReactTree(children, (node) => {
     if (React.isValidElement<EmailElementProps>(node)) {
-      const {
-        elementWithInlinedStyles,
-        nonInlinableClasses,
-        nonInlineStyleNodes,
-      } = cloneElementWithInlinedStyles(node, tailwind);
-      mediaQueryClassesForAllElement =
-        mediaQueryClassesForAllElement.concat(nonInlinableClasses);
-      nonInlineStylesRootToApply.append(nonInlineStyleNodes);
-
-      if (nonInlinableClasses.length > 0 && !hasNonInlineStylesToApply) {
-        hasNonInlineStylesToApply = true;
+      if (node.props.className) {
+        const classes = node.props.className?.split(/\s+/);
+        classesUsed = [...classesUsed, ...classes];
+        tailwindSetup.addUtilities(classes);
       }
-
-      return elementWithInlinedStyles;
     }
 
     return node;
   });
 
-  removeRuleDuplicatesFromRoot(nonInlineStylesRootToApply);
+  const styleSheet = tailwindSetup.getStyleSheet();
+  resolveAllCssVariables(styleSheet);
+  resolveCalcExpressions(styleSheet);
+  sanitizeDeclarations(styleSheet);
 
-  if (hasNonInlineStylesToApply) {
-    let hasAppliedNonInlineStyles = false as boolean;
+  const { inlinable: inlinableRules, nonInlinable: nonInlinableRules } =
+    extractRulesPerClass(styleSheet, classesUsed);
+  sanitizeNonInlinableRules(styleSheet);
 
-    mappedChildren = mapReactTree(mappedChildren, (node) => {
-      if (hasAppliedNonInlineStyles) {
-        return node;
-      }
+  const customProperties = getCustomProperties(styleSheet);
+
+  const nonInlineStyles: StyleSheet = {
+    type: 'StyleSheet',
+    children: new List<CssNode>().fromArray(
+      Array.from(nonInlinableRules.values()),
+    ),
+  };
+
+  const hasNonInlineStylesToApply = nonInlinableRules.size > 0;
+  let appliedNonInlineStyles = false as boolean;
+
+  mappedChildren = mapReactTree(mappedChildren, (node) => {
+    if (React.isValidElement<EmailElementProps>(node)) {
+      const elementWithInlinedStyles = cloneElementWithInlinedStyles(
+        node,
+        inlinableRules,
+        nonInlinableRules,
+        customProperties,
+      );
 
-      if (React.isValidElement<EmailElementProps>(node)) {
-        if (node.type === 'head') {
-          hasAppliedNonInlineStyles = true;
-
-          /*                   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>
-          );
-
-          return React.cloneElement(
-            node,
-            node.props,
-            node.props.children,
-            styleElement,
-          );
-        }
+      if (elementWithInlinedStyles.type === 'head') {
+        appliedNonInlineStyles = true;
+
+        const styleElement = <style>{generate(nonInlineStyles)}</style>;
+
+        return React.cloneElement(
+          elementWithInlinedStyles,
+          elementWithInlinedStyles.props,
+          styleElement,
+          elementWithInlinedStyles.props.children,
+        );
       }
 
-      return node;
-    });
+      return elementWithInlinedStyles;
+    }
 
-    if (!hasAppliedNonInlineStyles) {
-      throw new Error(
-        `You are trying to use the following Tailwind classes that cannot be inlined: ${mediaQueryClassesForAllElement.join(
-          ' ',
-        )}.
+    return node;
+  });
+
+  if (hasNonInlineStylesToApply && !appliedNonInlineStyles) {
+    throw new Error(
+      `You are trying to use the following Tailwind classes that cannot be inlined: ${Array.from(
+        nonInlinableRules.keys(),
+      ).join(' ')}.
 For the media queries to work properly on rendering, they need to be added into a <style> tag inside of a <head> tag,
 the Tailwind component tried finding a <head> element but just wasn't able to find it.
 
@@ -166,9 +167,8 @@ This can also be our <Head> component.
 
 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.`,
-      );
-    }
+    );
   }
 
   return mappedChildren;
-};
+}
diff --git a/packages/tailwind/src/utils/compatibility/escape-class-name.ts b/packages/tailwind/src/utils/compatibility/escape-class-name.ts
index 8f66c03bb7..6525a50234 100644
--- a/packages/tailwind/src/utils/compatibility/escape-class-name.ts
+++ b/packages/tailwind/src/utils/compatibility/escape-class-name.ts
@@ -5,7 +5,7 @@
  * Also does a bit more trickery to avoid escaping already
  * escaped characters.
  */
-export const escapeClassName = (className: string) => {
+export function escapeClassName(className: string) {
   return className.replace(
     /*      we need this look ahead capturing group to avoid using negative look behinds */
     /([^\\]|^)(?=([^a-zA-Z0-9\-_]))/g,
@@ -15,4 +15,4 @@ export const escapeClassName = (className: string) => {
       return `${prefixCharacter}\\`;
     },
   );
-};
+}
diff --git a/packages/tailwind/src/utils/compatibility/convert-css-property-to-react-property.ts b/packages/tailwind/src/utils/compatibility/get-react-property.ts
similarity index 82%
rename from packages/tailwind/src/utils/compatibility/convert-css-property-to-react-property.ts
rename to packages/tailwind/src/utils/compatibility/get-react-property.ts
index bd8ba5ca49..574b529fc8 100644
--- a/packages/tailwind/src/utils/compatibility/convert-css-property-to-react-property.ts
+++ b/packages/tailwind/src/utils/compatibility/get-react-property.ts
@@ -1,6 +1,6 @@
 import { fromDashCaseToCamelCase } from '../text/from-dash-case-to-camel-case';
 
-export const convertCssPropertyToReactProperty = (prop: string) => {
+export function getReactProperty(prop: string) {
   const modifiedProp = prop.toLowerCase();
 
   if (modifiedProp.startsWith('--')) {
@@ -12,4 +12,4 @@ export const convertCssPropertyToReactProperty = (prop: string) => {
   }
 
   return fromDashCaseToCamelCase(modifiedProp);
-};
+}
diff --git a/packages/tailwind/src/utils/compatibility/sanitize-class-name.ts b/packages/tailwind/src/utils/compatibility/sanitize-class-name.ts
index bbd0204dfd..424c6ad629 100644
--- a/packages/tailwind/src/utils/compatibility/sanitize-class-name.ts
+++ b/packages/tailwind/src/utils/compatibility/sanitize-class-name.ts
@@ -17,7 +17,7 @@ const digitToNameMap = {
  * @param className - This should not come with any escaped charcters, it should come the same
  * as is on the `className` attribute on React elements.
  */
-export const sanitizeClassName = (className: string) => {
+export function sanitizeClassName(className: string) {
   return className
     .replaceAll('+', 'plus')
     .replaceAll('[', '')
@@ -33,4 +33,4 @@ export const sanitizeClassName = (className: string) => {
       return digitToNameMap[digit as keyof typeof digitToNameMap];
     })
     .replace(/[^a-zA-Z0-9\-_]/g, '_');
-};
+}
diff --git a/packages/tailwind/src/utils/css/__snapshots__/extract-rules-matching-classes.spec.ts.snap b/packages/tailwind/src/utils/css/__snapshots__/extract-rules-matching-classes.spec.ts.snap
new file mode 100644
index 0000000000..db442b075e
--- /dev/null
+++ b/packages/tailwind/src/utils/css/__snapshots__/extract-rules-matching-classes.spec.ts.snap
@@ -0,0 +1,23 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`extractRulesMatchingClasses() > should work just inlinable utilities 1`] = `
+{
+  "bg-red-500": ".bg-red-500{background-color:rgb(250.6,43.8,54.3)}",
+  "text-center": ".text-center{text-align:center}",
+}
+`;
+
+exports[`extractRulesMatchingClasses() > should work with a mix of inlinable and non-inlinable utilities 1`] = `
+{
+  "bg-red-500": ".bg-red-500{background-color:rgb(250.6,43.8,54.3)}",
+  "lg:w-1/2": ".lg_w-1_2{@media (width>=64rem){width:calc(0.5*100%)!important}}",
+  "text-center": ".text-center{text-align:center}",
+  "w-full": ".w-full{width:100%}",
+}
+`;
+
+exports[`extractRulesMatchingClasses() > should work with non-inlinable utilities 1`] = `
+{
+  "lg:w-1/2": ".lg_w-1_2{@media (width>=64rem){width:calc(0.5*100%)!important}}",
+}
+`;
diff --git a/packages/tailwind/src/utils/css/__snapshots__/extract-rules-per-class.spec.ts.snap b/packages/tailwind/src/utils/css/__snapshots__/extract-rules-per-class.spec.ts.snap
new file mode 100644
index 0000000000..eb0d8127a4
--- /dev/null
+++ b/packages/tailwind/src/utils/css/__snapshots__/extract-rules-per-class.spec.ts.snap
@@ -0,0 +1,32 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`extractRulesPerClass() > handles a mix of inlinable and non-inlinable utilities 1`] = `
+{
+  "bg-red-500": ".bg-red-500{background-color:var(--color-red-500)}",
+  "text-center": ".text-center{text-align:center}",
+  "w-full": ".w-full{width:100%}",
+}
+`;
+
+exports[`extractRulesPerClass() > handles a mix of inlinable and non-inlinable utilities 2`] = `
+{
+  "lg:w-1/2": ".lg\\:w-1\\/2{@media (width>=64rem){width:calc(1/2*100%)}}",
+}
+`;
+
+exports[`extractRulesPerClass() > handles non-inlinable utilities 1`] = `{}`;
+
+exports[`extractRulesPerClass() > handles non-inlinable utilities 2`] = `
+{
+  "lg:w-1/2": ".lg\\:w-1\\/2{@media (width>=64rem){width:calc(1/2*100%)}}",
+}
+`;
+
+exports[`extractRulesPerClass() > works with just inlinable utilities 1`] = `
+{
+  "bg-red-500": ".bg-red-500{background-color:var(--color-red-500)}",
+  "text-center": ".text-center{text-align:center}",
+}
+`;
+
+exports[`extractRulesPerClass() > works with just inlinable utilities 2`] = `{}`;
diff --git a/packages/tailwind/src/utils/css/__snapshots__/make-inline-styles-for.spec.ts.snap b/packages/tailwind/src/utils/css/__snapshots__/make-inline-styles-for.spec.ts.snap
new file mode 100644
index 0000000000..36cc2a21f9
--- /dev/null
+++ b/packages/tailwind/src/utils/css/__snapshots__/make-inline-styles-for.spec.ts.snap
@@ -0,0 +1,17 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`makeInlineStylesFor() > does basic local variable resolution 1`] = `
+{
+  "backgroundColor": " #3490dc",
+  "borderRadius": "0.25rem",
+  "color": " #fff",
+  "padding": "0.5rem 1rem",
+}
+`;
+
+exports[`makeInlineStylesFor() > works in simple use case 1`] = `
+{
+  "backgroundColor": "#f56565",
+  "width": "100%",
+}
+`;
diff --git a/packages/tailwind/src/utils/css/__snapshots__/remove-rule-duplicates-from-root.spec.ts.snap b/packages/tailwind/src/utils/css/__snapshots__/remove-rule-duplicates-from-root.spec.ts.snap
new file mode 100644
index 0000000000..ead86f0c9f
--- /dev/null
+++ b/packages/tailwind/src/utils/css/__snapshots__/remove-rule-duplicates-from-root.spec.ts.snap
@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`removeRuleDuplicatesFromRoot 1`] = `".a{color:red}.b{color:blue}"`;
diff --git a/packages/tailwind/src/utils/css/__snapshots__/resolve-all-css-variables.spec.ts.snap b/packages/tailwind/src/utils/css/__snapshots__/resolve-all-css-variables.spec.ts.snap
new file mode 100644
index 0000000000..fc83479864
--- /dev/null
+++ b/packages/tailwind/src/utils/css/__snapshots__/resolve-all-css-variables.spec.ts.snap
@@ -0,0 +1,21 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`resolveAllCSSVariables > handles deeply nested var() functions with complex parentheses 1`] = `":root{--primary: blue;--secondary: red;--fallback: green;--size: 20px}.box{color:blue;width:20px;border:1px solid black;--r: 100;--b: 10;background:rgb(100,0,10)}"`;
+
+exports[`resolveAllCSSVariables > handles nested var() functions in fallbacks 1`] = `":root{--fallback-width: 300px}.box{width:300px;height:250px}"`;
+
+exports[`resolveAllCSSVariables > ignores @layer (properties) defined for browser compatibility 1`] = `"/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;@layer theme{:root,:host{--color-red-500: oklch(63.7% 0.237 25.331);--color-blue-400: oklch(70.7% 0.165 254.624);--color-blue-600: oklch(54.6% 0.245 262.881);--color-gray-200: oklch(92.8% 0.006 264.531);--color-black: #000;--color-white: #fff;--spacing: 0.25rem;--text-sm: 0.875rem;--text-sm--line-height: calc(1.25 / 0.875);--radius-md: 0.375rem}}@layer utilities{.mt-8{margin-top:calc(0.25rem*8)}.rounded-md{border-radius:0.375rem}.bg-blue-600{background-color:oklch(54.6%0.245 262.881)}.bg-red-500{background-color:oklch(63.7%0.237 25.331)}.bg-white{background-color:#fff}.p-4{padding:calc(0.25rem*4)}.px-3{padding-inline:calc(0.25rem*3)}.py-2{padding-block:calc(0.25rem*2)}.text-sm{font-size:0.875rem;line-height:calc(1.25/0.875)}.text-[14px]{font-size:14px}.leading-[24px]{--tw-leading: 24px;line-height:24px}.text-black{color:#000}.text-blue-400{color:oklch(70.7%0.165 254.624)}.text-blue-600{color:oklch(54.6%0.245 262.881)}.text-gray-200{color:oklch(92.8%0.006 264.531)}.no-underline{text-decoration-line:none}}@property --tw-leading{syntax:"*";inherits:false}@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::before,::after,::backdrop{--tw-leading: initial}}}"`;
+
+exports[`resolveAllCSSVariables > keeps variable usages if it cant find their declaration 1`] = `".box{width:var(--width)}"`;
+
+exports[`resolveAllCSSVariables > uses fallback values when variable definition is not found 1`] = `".box{width:150px;height:200px;margin:10px 20px}"`;
+
+exports[`resolveAllCSSVariables > works for variables across different CSS layers 1`] = `"@layer base{:root{--width: 100px}}@layer utilities{.box{width:100px}}"`;
+
+exports[`resolveAllCSSVariables > works with a variable set in a layer, and used in another through a media query 1`] = `"@layer theme{:root{--color-blue-300: blue}}@layer utilities{.sm:bg-blue-300{@media (width>=40rem){background-color:blue}}}"`;
+
+exports[`resolveAllCSSVariables > works with multiple variables in the same declaration 1`] = `":root{--top: 101px;--bottom: 102px;--right: 103px;--left: 104px}.box{margin:101px 103px 102px 104px}"`;
+
+exports[`resolveAllCSSVariables > works with simple css variables on a :root 1`] = `":root{--width: 100px}.box{width:100px}"`;
+
+exports[`resolveAllCSSVariables > works with variables set in the same rule 1`] = `".box{--width: 200px;width:200px}@media (min-width:1280px){.xl\\:bg-green-500{--tw-bg-opacity: 1;background-color:rgb(34 197 94/1)}}"`;
diff --git a/packages/tailwind/src/utils/css/__snapshots__/resolve-calc-expressions.spec.ts.snap b/packages/tailwind/src/utils/css/__snapshots__/resolve-calc-expressions.spec.ts.snap
new file mode 100644
index 0000000000..f3fba5688a
--- /dev/null
+++ b/packages/tailwind/src/utils/css/__snapshots__/resolve-calc-expressions.spec.ts.snap
@@ -0,0 +1,7 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`resolveCalcExpressions() > does not modify complex calc expressions 1`] = `".px-3{padding-inline:calc(0.25rem*(3 + 1px))}.py-2{padding-block:calc(0.25rem*(2 + 1px))}"`;
+
+exports[`resolveCalcExpressions() > resolves calc expressions repeating decimals 1`] = `".w-1/3{width:33.33333333333333%}"`;
+
+exports[`resolveCalcExpressions() > resolves spacing calc expressions from tailwind v4 1`] = `".px-3{padding-inline:0.75rem}.py-2{padding-block:0.5rem}"`;
diff --git a/packages/tailwind/src/utils/css/__snapshots__/sanitize-declarations.spec.ts.snap b/packages/tailwind/src/utils/css/__snapshots__/sanitize-declarations.spec.ts.snap
new file mode 100644
index 0000000000..c5041c91d9
--- /dev/null
+++ b/packages/tailwind/src/utils/css/__snapshots__/sanitize-declarations.spec.ts.snap
@@ -0,0 +1,91 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`sanitizeDeclarations > complex scenarios > handles multiple declarations with different rgb formats 1`] = `"div{color:rgb(255,0,128,0.5);background-color:rgb(0,255,0);border-color:rgb(128,128,128)}"`;
+
+exports[`sanitizeDeclarations > complex scenarios > handles nested rules 1`] = `"@media (min-width:768px){div{color:rgb(255,0,128,0.8)}}"`;
+
+exports[`sanitizeDeclarations > complex scenarios > processes at-rule declarations 1`] = `"@keyframes fade{from{background:rgb(255,0,0,0)}to{background:rgb(255,0,0)}}"`;
+
+exports[`sanitizeDeclarations > handles transparency generated with color-mix 1`] = `".bg-blue-600/50{background-color:rgb(21,93,252,60%)}"`;
+
+exports[`sanitizeDeclarations > hex to rgb conversion 1`] = `"div{color:rgb(255,0,170)}"`;
+
+exports[`sanitizeDeclarations > hex to rgb conversion 2`] = `"div{color:rgb(255,0,170,0.5333333333333333)}"`;
+
+exports[`sanitizeDeclarations > hex to rgb conversion 3`] = `"div{color:rgb(255,0,170)}"`;
+
+exports[`sanitizeDeclarations > hex to rgb conversion 4`] = `"div{color:rgb(255,0,170,0.5019607843137255)}"`;
+
+exports[`sanitizeDeclarations > hex to rgb conversion 5`] = `"div{color:rgb(0,0,0)}"`;
+
+exports[`sanitizeDeclarations > hex to rgb conversion 6`] = `"div{color:rgb(255,255,255)}"`;
+
+exports[`sanitizeDeclarations > hex to rgb conversion 7`] = `"div{color:rgb(255,0,0)}"`;
+
+exports[`sanitizeDeclarations > hex to rgb conversion 8`] = `"div{color:rgb(0,255,0)}"`;
+
+exports[`sanitizeDeclarations > hex to rgb conversion 9`] = `"div{color:rgb(0,0,255)}"`;
+
+exports[`sanitizeDeclarations > hex to rgb conversion 10`] = `"div{color:rgb(171,205,239)}"`;
+
+exports[`sanitizeDeclarations > hex to rgb conversion 11`] = `"div{color:rgb(171,205,239)}"`;
+
+exports[`sanitizeDeclarations > hex to rgb conversion 12`] = `"div{color:rgb(171,205,239)}"`;
+
+exports[`sanitizeDeclarations > hex to rgb conversion 13`] = `"div{color:rgb(255,0,0,0)}"`;
+
+exports[`sanitizeDeclarations > hex to rgb conversion 14`] = `"div{color:rgb(255,0,0)}"`;
+
+exports[`sanitizeDeclarations > hex to rgb conversion 15`] = `"div{background:linear-gradient(rgb(255,0,0),rgb(0,255,0),rgb(0,0,255))}"`;
+
+exports[`sanitizeDeclarations > hex to rgb conversion 16`] = `"div{background:linear-gradient(rgb(255,0,0),rgb(0,255,0),rgb(0,105,199))}"`;
+
+exports[`sanitizeDeclarations > hex to rgb conversion 17`] = `"div{content:"Visit our site at example.com#section"}"`;
+
+exports[`sanitizeDeclarations > hex to rgb conversion 18`] = `"div{color:rgb(255,0,0);background-color:rgb(0,255,0);border-color:rgb(0,0,255);box-shadow:0 0 10px rgb(51,51,51)}"`;
+
+exports[`sanitizeDeclarations > oklch to rgb conversion 1`] = `"div{color:rgb(0,255,229)}"`;
+
+exports[`sanitizeDeclarations > oklch to rgb conversion 2`] = `"div{color:rgb(255,251,126,0.8)}"`;
+
+exports[`sanitizeDeclarations > oklch to rgb conversion 3`] = `"div{color:rgb(255,251,126,0.8)}"`;
+
+exports[`sanitizeDeclarations > oklch to rgb conversion 4`] = `"div{color:rgb(191,240,255,0.5)}"`;
+
+exports[`sanitizeDeclarations > oklch to rgb conversion 5`] = `"div{color:rgb(255,193,250)}"`;
+
+exports[`sanitizeDeclarations > oklch to rgb conversion 6`] = `"div{color:rgb(255,100,0)}"`;
+
+exports[`sanitizeDeclarations > rgba space syntax to comma syntax conversion 1`] = `"div{color:rgb(255,0,128)}"`;
+
+exports[`sanitizeDeclarations > rgba space syntax to comma syntax conversion 2`] = `"div{color:rgb(255,0,128,0.5)}"`;
+
+exports[`sanitizeDeclarations > rgba space syntax to comma syntax conversion 3`] = `"div{color:rgb(255,0,128,0.5)}"`;
+
+exports[`sanitizeDeclarations > rgba space syntax to comma syntax conversion 4`] = `"div{color:rgb(255,0,128,0.5)}"`;
+
+exports[`sanitizeDeclarations > rgba space syntax to comma syntax conversion 5`] = `"div{color:rgb(255,0,128)}"`;
+
+exports[`sanitizeDeclarations > rgba space syntax to comma syntax conversion 6`] = `"div{background:linear-gradient(rgb(255,0,0),rgb(0,255,0,0.8))}"`;
+
+exports[`sanitizeDeclarations > rgba space syntax to comma syntax conversion 7`] = `"div{color:rgb(255,0,128,0.7)}"`;
+
+exports[`sanitizeDeclarations > rgba space syntax to comma syntax conversion 8`] = `"div{color:rgb(0,0,0)}"`;
+
+exports[`sanitizeDeclarations > rgba space syntax to comma syntax conversion 9`] = `"div{color:rgb(255,0,128)}"`;
+
+exports[`sanitizeDeclarations > separates padding-block and padding-inline 1`] = `".box{padding-right:14;padding-left:4px}"`;
+
+exports[`sanitizeDeclarations > separates padding-block and padding-inline 2`] = `".box{padding-bottom:20%;padding-top:10px}"`;
+
+exports[`sanitizeDeclarations > separates padding-block and padding-inline 3`] = `".box{padding-right:99rem;padding-left:99rem}"`;
+
+exports[`sanitizeDeclarations > separates padding-block and padding-inline 4`] = `".box{padding-bottom:8px;padding-top:8px}"`;
+
+exports[`sanitizeDeclarations > should do separation of margin-block and margin-inline 1`] = `".box{margin-right:14;margin-left:4px}"`;
+
+exports[`sanitizeDeclarations > should do separation of margin-block and margin-inline 2`] = `".box{margin-bottom:20%;margin-top:10px}"`;
+
+exports[`sanitizeDeclarations > should do separation of margin-block and margin-inline 3`] = `".box{margin-right:99rem;margin-left:99rem}"`;
+
+exports[`sanitizeDeclarations > should do separation of margin-block and margin-inline 4`] = `".box{margin-bottom:8px;margin-top:8px}"`;
diff --git a/packages/tailwind/src/utils/css/__snapshots__/sanitize-non-inlinable-classes.spec.ts.snap b/packages/tailwind/src/utils/css/__snapshots__/sanitize-non-inlinable-classes.spec.ts.snap
new file mode 100644
index 0000000000..7b70a75815
--- /dev/null
+++ b/packages/tailwind/src/utils/css/__snapshots__/sanitize-non-inlinable-classes.spec.ts.snap
@@ -0,0 +1,7 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`sanitizeNonInlinableClasses() > should css nesting in hover pseudo styles 1`] = `"/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;@layer theme{:root,:host{--color-sky-600: oklch(58.8% 0.158 241.966)!important;--color-gray-100: oklch(96.7% 0.003 264.542)!important}}@layer utilities{.hover_text-sky-600{&:hover{@media (hover:hover){color:var(--color-sky-600)!important}}}.sm_focus_outline-none{@media (width>=40rem){&:focus{--tw-outline-style: none!important;outline-style:none!important}}}.md_hover_bg-gray-100{@media (width>=48rem){&:hover{@media (hover:hover){background-color:var(--color-gray-100)!important}}}}.lg_focus_underline{@media (width>=64rem){&:focus{text-decoration-line:underline!important}}}}"`;
+
+exports[`sanitizeNonInlinableClasses() > should handle rules that can be inlined 1`] = `"/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;@layer theme{:root,:host{--color-red-300: oklch(80.8% 0.114 19.571)!important;--color-gray-900: oklch(21% 0.034 264.665)!important;--text-lg: 1.125rem!important;--text-lg--line-height: calc(1.75 / 1.125)!important}}@layer utilities{.bg-gray-900{background-color:var(--color-gray-900)}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-red-300{color:var(--color-red-300)}}"`;
+
+exports[`sanitizeNonInlinableClasses() > shuold work with basic media query rules 1`] = `"/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;@layer theme{:root,:host{--spacing: 0.25rem!important;--container-lg: 32rem!important;--radius-lg: 0.5rem!important}}@layer utilities{.sm_mx-auto{@media (width>=40rem){margin-inline:auto!important}}.sm_max-w-lg{@media (width>=40rem){max-width:var(--container-lg)!important}}.sm_rounded-lg{@media (width>=40rem){border-radius:var(--radius-lg)!important}}.md_px-10{@media (width>=48rem){padding-inline:calc(var(--spacing)*10)!important}}.md_py-12{@media (width>=48rem){padding-block:calc(var(--spacing)*12)!important}}}"`;
diff --git a/packages/tailwind/src/utils/css/__snapshots__/sanitize-non-inlinable-rules.spec.ts.snap b/packages/tailwind/src/utils/css/__snapshots__/sanitize-non-inlinable-rules.spec.ts.snap
new file mode 100644
index 0000000000..c7b23cf9d5
--- /dev/null
+++ b/packages/tailwind/src/utils/css/__snapshots__/sanitize-non-inlinable-rules.spec.ts.snap
@@ -0,0 +1,7 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`sanitizeNonInlinableRules() > handles CSS nesting in hover pseudo styles 1`] = `"/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;@layer theme{:root,:host{--color-sky-600: oklch(58.8% 0.158 241.966)!important;--color-gray-100: oklch(96.7% 0.003 264.542)!important}}@layer utilities{.hover_text-sky-600{&:hover{@media (hover:hover){color:var(--color-sky-600)!important}}}.sm_focus_outline-none{@media (width>=40rem){&:focus{--tw-outline-style: none!important;outline-style:none!important}}}.md_hover_bg-gray-100{@media (width>=48rem){&:hover{@media (hover:hover){background-color:var(--color-gray-100)!important}}}}.lg_focus_underline{@media (width>=64rem){&:focus{text-decoration-line:underline!important}}}}"`;
+
+exports[`sanitizeNonInlinableRules() > inlines rules that can be inlined 1`] = `"/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;@layer theme{:root,:host{--color-red-300: oklch(80.8% 0.114 19.571)!important;--color-gray-900: oklch(21% 0.034 264.665)!important;--text-lg: 1.125rem!important;--text-lg--line-height: calc(1.75 / 1.125)!important}}@layer utilities{.bg-gray-900{background-color:var(--color-gray-900)}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-red-300{color:var(--color-red-300)}}"`;
+
+exports[`sanitizeNonInlinableRules() > supports basic media query rules 1`] = `"/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;@layer theme{:root,:host{--spacing: 0.25rem!important;--container-lg: 32rem!important;--radius-lg: 0.5rem!important}}@layer utilities{.sm_mx-auto{@media (width>=40rem){margin-inline:auto!important}}.sm_max-w-lg{@media (width>=40rem){max-width:var(--container-lg)!important}}.sm_rounded-lg{@media (width>=40rem){border-radius:var(--radius-lg)!important}}.md_px-10{@media (width>=48rem){padding-inline:calc(var(--spacing)*10)!important}}.md_py-12{@media (width>=48rem){padding-block:calc(var(--spacing)*12)!important}}}"`;
diff --git a/packages/tailwind/src/utils/css/extract-rules-per-class.spec.ts b/packages/tailwind/src/utils/css/extract-rules-per-class.spec.ts
new file mode 100644
index 0000000000..80f27ef28b
--- /dev/null
+++ b/packages/tailwind/src/utils/css/extract-rules-per-class.spec.ts
@@ -0,0 +1,61 @@
+import { generate, type Rule } from 'css-tree';
+import { setupTailwind } from '../tailwindcss/setup-tailwind';
+import { extractRulesPerClass } from './extract-rules-per-class';
+
+describe('extractRulesPerClass()', async () => {
+  function convertToComparable(map: Map<string, Rule>): Record<string, string> {
+    return Object.fromEntries(map.entries().map(([k, v]) => [k, generate(v)]));
+  }
+
+  it('works with just inlinable utilities', async () => {
+    const tailwind = await setupTailwind({});
+    const classes = ['text-center', 'bg-red-500'];
+    tailwind.addUtilities(classes);
+
+    const stylesheet = tailwind.getStyleSheet();
+
+    const { inlinable, nonInlinable } = extractRulesPerClass(
+      stylesheet,
+      classes,
+    );
+
+    expect(convertToComparable(inlinable)).toMatchSnapshot();
+    expect(convertToComparable(nonInlinable)).toMatchSnapshot();
+  });
+
+  it('handles non-inlinable utilities', async () => {
+    const tailwind = await setupTailwind({});
+    const classes = ['lg:w-1/2'];
+    tailwind.addUtilities(classes);
+
+    const stylesheet = tailwind.getStyleSheet();
+
+    const { inlinable, nonInlinable } = extractRulesPerClass(
+      stylesheet,
+      classes,
+    );
+
+    expect(convertToComparable(inlinable)).toMatchSnapshot();
+    expect(convertToComparable(nonInlinable)).toMatchSnapshot();
+  });
+
+  it('handles a mix of inlinable and non-inlinable utilities', async () => {
+    const tailwind = await setupTailwind({});
+    const classes = [
+      'text-center',
+      'bg-red-500',
+      'some-other-class', // should be ignored
+      'w-full',
+      'lg:w-1/2',
+    ];
+    tailwind.addUtilities(classes);
+
+    const stylesheet = tailwind.getStyleSheet();
+    const { inlinable, nonInlinable } = extractRulesPerClass(
+      stylesheet,
+      classes,
+    );
+    expect(convertToComparable(inlinable)).toMatchSnapshot();
+    expect(convertToComparable(nonInlinable)).toMatchSnapshot();
+  });
+});
diff --git a/packages/tailwind/src/utils/css/extract-rules-per-class.ts b/packages/tailwind/src/utils/css/extract-rules-per-class.ts
new file mode 100644
index 0000000000..f41b4c9178
--- /dev/null
+++ b/packages/tailwind/src/utils/css/extract-rules-per-class.ts
@@ -0,0 +1,38 @@
+import { type CssNode, type Rule, string, walk } from 'css-tree';
+import { isRuleInlinable } from './is-rule-inlinable';
+
+export function extractRulesPerClass(root: CssNode, classes: string[]) {
+  const classSet = new Set(classes);
+
+  const inlinableRules = new Map<string, Rule>();
+  const nonInlinableRules = new Map<string, Rule>();
+  walk(root, {
+    visit: 'Rule',
+    enter(rule) {
+      const selectorClasses: string[] = [];
+      walk(rule, {
+        visit: 'ClassSelector',
+        enter(classSelector) {
+          selectorClasses.push(string.decode(classSelector.name));
+        },
+      });
+      if (isRuleInlinable(rule)) {
+        for (const className of selectorClasses) {
+          if (classSet.has(className)) {
+            inlinableRules.set(className, rule);
+          }
+        }
+      } else {
+        for (const className of selectorClasses) {
+          if (classSet.has(className)) {
+            nonInlinableRules.set(className, rule);
+          }
+        }
+      }
+    },
+  });
+  return {
+    inlinable: inlinableRules,
+    nonInlinable: nonInlinableRules,
+  };
+}
diff --git a/packages/tailwind/src/utils/css/get-custom-properties.ts b/packages/tailwind/src/utils/css/get-custom-properties.ts
new file mode 100644
index 0000000000..c9a15dddf9
--- /dev/null
+++ b/packages/tailwind/src/utils/css/get-custom-properties.ts
@@ -0,0 +1,49 @@
+import { type CssNode, type Declaration, generate, walk } from 'css-tree';
+
+export interface CustomProperty {
+  syntax?: Declaration;
+  inherits?: Declaration;
+  initialValue?: Declaration;
+}
+
+export type CustomProperties = Map<string, CustomProperty>;
+
+export function getCustomProperties(node: CssNode) {
+  const customProperties = new Map<string, CustomProperty>();
+
+  walk(node, {
+    visit: 'Atrule',
+    enter(atrule) {
+      if (atrule.name === 'property' && atrule.prelude) {
+        const prelude = generate(atrule.prelude);
+        if (prelude.startsWith('--')) {
+          let syntax: Declaration | undefined;
+          let inherits: Declaration | undefined;
+          let initialValue: Declaration | undefined;
+          walk(atrule, {
+            visit: 'Declaration',
+            enter(declaration) {
+              if (declaration.property === 'syntax') {
+                syntax = declaration;
+              }
+              if (declaration.property === 'inherits') {
+                inherits = declaration;
+              }
+              if (declaration.property === 'initial-value') {
+                initialValue = declaration;
+              }
+            },
+          });
+
+          customProperties.set(prelude, {
+            syntax,
+            inherits,
+            initialValue,
+          });
+        }
+      }
+    },
+  });
+
+  return customProperties;
+}
diff --git a/packages/tailwind/src/utils/css/is-rule-inlinable.ts b/packages/tailwind/src/utils/css/is-rule-inlinable.ts
new file mode 100644
index 0000000000..9df47ab75b
--- /dev/null
+++ b/packages/tailwind/src/utils/css/is-rule-inlinable.ts
@@ -0,0 +1,15 @@
+import { find, type Rule } from 'css-tree';
+
+export function isRuleInlinable(rule: Rule): boolean {
+  const hasAtRuleInside = find(rule, (node) => node.type === 'Atrule') !== null;
+
+  const hasPseudoSelector =
+    find(
+      rule,
+      (node) =>
+        node.type === 'PseudoClassSelector' ||
+        node.type === 'PseudoElementSelector',
+    ) !== null;
+
+  return !hasAtRuleInside && !hasPseudoSelector;
+}
diff --git a/packages/tailwind/src/utils/css/make-inline-styles-for.spec.ts b/packages/tailwind/src/utils/css/make-inline-styles-for.spec.ts
index 3fe80bb2fe..039d9fb24c 100644
--- a/packages/tailwind/src/utils/css/make-inline-styles-for.spec.ts
+++ b/packages/tailwind/src/utils/css/make-inline-styles-for.spec.ts
@@ -1,15 +1,32 @@
-import { setupTailwind } from '../tailwindcss/setup-tailwind';
+import { parse, type StyleSheet } from 'css-tree';
 import { makeInlineStylesFor } from './make-inline-styles-for';
 
-test('makeInlineStylesFor()', () => {
-  const tailwind = setupTailwind({});
+describe('makeInlineStylesFor()', async () => {
+  it('works in simple use case', () => {
+    const tailwindStyles = parse(`
+      .bg-red-500 { background-color: #f56565; }
+      .w-full { width: 100%; }
+    `) as StyleSheet;
 
-  const className =
-    'bg-red-500 sm:bg-blue-300 w-full md:max-w-[400px] my-custom-class';
-  const tailwindStyles = tailwind.generateRootForClasses(className.split(' '));
+    expect(
+      makeInlineStylesFor(tailwindStyles.children.toArray()),
+    ).toMatchSnapshot();
+  });
+
+  it('does basic local variable resolution', () => {
+    const tailwindStyles = parse(`
+      .btn {
+        --btn-bg: #3490dc;
+        --btn-text: #fff;
+        background-color: var(--btn-bg);
+        color: var(--btn-text);
+        padding: 0.5rem 1rem;
+        border-radius: 0.25rem;
+      }
+    `) as StyleSheet;
 
-  expect(makeInlineStylesFor(className, tailwindStyles)).toEqual({
-    styles: { backgroundColor: 'rgb(239 68 68 / 1)', width: '100%' },
-    residualClassName: 'sm:bg-blue-300 md:max-w-[400px] my-custom-class',
+    expect(
+      makeInlineStylesFor(tailwindStyles.children.toArray()),
+    ).toMatchSnapshot();
   });
 });
diff --git a/packages/tailwind/src/utils/css/make-inline-styles-for.ts b/packages/tailwind/src/utils/css/make-inline-styles-for.ts
index 045e3e9ca2..8b7fbc5d20 100644
--- a/packages/tailwind/src/utils/css/make-inline-styles-for.ts
+++ b/packages/tailwind/src/utils/css/make-inline-styles-for.ts
@@ -1,56 +1,70 @@
-import type { Root, Rule } from 'postcss';
-import selectorParser from 'postcss-selector-parser';
-import { convertCssPropertyToReactProperty } from '../compatibility/convert-css-property-to-react-property';
-import { unescapeClass } from '../compatibility/unescape-class';
-
-const walkInlinableRules = (root: Root, callback: (rule: Rule) => void) => {
-  root.walkRules((rule) => {
-    if (rule.parent?.type === 'atrule') {
-      return;
-    }
-
-    selectorParser((selector) => {
-      let hasPseudoSelectors = false as boolean;
-      selector.walkPseudos(() => {
-        hasPseudoSelectors = true;
-      });
-
-      if (!hasPseudoSelectors) {
-        callback(rule);
-      }
-    }).processSync(rule.selector);
-  });
-};
+import { type CssNode, type Declaration, generate, walk } from 'css-tree';
+import { getReactProperty } from '../compatibility/get-react-property';
+import type { CustomProperties } from './get-custom-properties';
+import { unwrapValue } from './unwrap-value';
 
 export function makeInlineStylesFor(
-  className: string,
-  tailwindStylesRoot: Root,
+  inlinableRules: CssNode[],
+  customProperties: CustomProperties,
 ) {
-  const classes = className.split(' ');
-
-  let residualClasses = [...classes];
   const styles: Record<string, string> = {};
 
-  walkInlinableRules(tailwindStylesRoot, (rule) => {
-    const classesOnSelector: string[] = [];
-    selectorParser((selector) => {
-      selector.walkClasses((v) => {
-        classesOnSelector.push(unescapeClass(v.value));
-      });
-    }).processSync(rule.selector);
+  const localVariableDeclarations = new Map<string, Declaration>();
+  for (const rule of inlinableRules) {
+    walk(rule, {
+      visit: 'Declaration',
+      enter(declaration) {
+        if (declaration.property.startsWith('--')) {
+          localVariableDeclarations.set(declaration.property, declaration);
+        }
+      },
+    });
+  }
 
-    residualClasses = residualClasses.filter((singleClass) => {
-      return !classesOnSelector.includes(singleClass);
+  for (const rule of inlinableRules) {
+    walk(rule, {
+      visit: 'Function',
+      enter(func, funcParentListItem) {
+        if (func.name === 'var') {
+          let variableName: string | undefined;
+          walk(func, {
+            visit: 'Identifier',
+            enter(identifier) {
+              variableName = identifier.name;
+              return this.break;
+            },
+          });
+          if (variableName) {
+            const definition = localVariableDeclarations.get(variableName);
+            if (definition) {
+              funcParentListItem.data = unwrapValue(definition.value);
+            } else {
+              // For most variables tailwindcss defines, they also define a custom
+              // property for them with an initial value that we can inline here
+              const customProperty = customProperties.get(variableName);
+              if (customProperty?.initialValue) {
+                funcParentListItem.data = unwrapValue(
+                  customProperty.initialValue.value,
+                );
+              }
+            }
+          }
+        }
+      },
     });
 
-    rule.walkDecls((declaration) => {
-      styles[convertCssPropertyToReactProperty(declaration.prop)] =
-        declaration.value + (declaration.important ? '!important' : '');
+    walk(rule, {
+      visit: 'Declaration',
+      enter(declaration) {
+        if (declaration.property.startsWith('--')) {
+          return;
+        }
+        styles[getReactProperty(declaration.property)] =
+          generate(declaration.value) +
+          (declaration.important ? '!important' : '');
+      },
     });
-  });
+  }
 
-  return {
-    styles,
-    residualClassName: residualClasses.join(' '),
-  };
+  return styles;
 }
diff --git a/packages/tailwind/src/utils/css/minify-css.ts b/packages/tailwind/src/utils/css/minify-css.ts
deleted file mode 100644
index 2d7b7832be..0000000000
--- a/packages/tailwind/src/utils/css/minify-css.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-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, '')
-
-      // Remove extra spaces after semicolons and colons
-      .replace(/;\s+/gm, ';')
-      .replace(/:\s+/gm, ':')
-
-      // 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
-};
diff --git a/packages/tailwind/src/utils/css/remove-if-empty-recursively.ts b/packages/tailwind/src/utils/css/remove-if-empty-recursively.ts
deleted file mode 100644
index 90fa5feffc..0000000000
--- a/packages/tailwind/src/utils/css/remove-if-empty-recursively.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import type { Container, Document } from 'postcss';
-
-export const removeIfEmptyRecursively = (node: Container | Document) => {
-  if (node.first === undefined) {
-    const parent = node.parent;
-    if (parent) {
-      node.remove();
-      removeIfEmptyRecursively(parent);
-    }
-  }
-};
diff --git a/packages/tailwind/src/utils/css/remove-rule-duplicates-from-root.ts b/packages/tailwind/src/utils/css/remove-rule-duplicates-from-root.ts
deleted file mode 100644
index 7c29e016d1..0000000000
--- a/packages/tailwind/src/utils/css/remove-rule-duplicates-from-root.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { Root } from 'postcss';
-import { removeIfEmptyRecursively } from './remove-if-empty-recursively';
-
-export const removeRuleDuplicatesFromRoot = (root: Root) => {
-  root.walkRules((rule) => {
-    root.walkRules(rule.selector, (duplicateRule) => {
-      if (duplicateRule === rule) return;
-
-      const parent = duplicateRule.parent;
-      duplicateRule.remove();
-      if (parent) {
-        removeIfEmptyRecursively(parent);
-      }
-    });
-  });
-};
diff --git a/packages/tailwind/src/utils/css/resolve-all-css-variables.spec.ts b/packages/tailwind/src/utils/css/resolve-all-css-variables.spec.ts
index fb3c058adc..a36418af7e 100644
--- a/packages/tailwind/src/utils/css/resolve-all-css-variables.spec.ts
+++ b/packages/tailwind/src/utils/css/resolve-all-css-variables.spec.ts
@@ -1,7 +1,94 @@
-import { parse } from 'postcss';
-import { resolveAllCSSVariables } from './resolve-all-css-variables';
+import { generate, parse } from 'css-tree';
+import { resolveAllCssVariables } from './resolve-all-css-variables';
 
 describe('resolveAllCSSVariables', () => {
+  it('ignores @layer (properties) defined for browser compatibility', () => {
+    const root =
+      parse(`/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */
+@layer properties;
+@layer theme, base, components, utilities;
+@layer theme {
+  :root, :host {
+    --color-red-500: oklch(63.7% 0.237 25.331);
+    --color-blue-400: oklch(70.7% 0.165 254.624);
+    --color-blue-600: oklch(54.6% 0.245 262.881);
+    --color-gray-200: oklch(92.8% 0.006 264.531);
+    --color-black: #000;
+    --color-white: #fff;
+    --spacing: 0.25rem;
+    --text-sm: 0.875rem;
+    --text-sm--line-height: calc(1.25 / 0.875);
+    --radius-md: 0.375rem;
+  }
+}
+@layer utilities {
+  .mt-8 {
+    margin-top: calc(var(--spacing) * 8);
+  }
+  .rounded-md {
+    border-radius: var(--radius-md);
+  }
+  .bg-blue-600 {
+    background-color: var(--color-blue-600);
+  }
+  .bg-red-500 {
+    background-color: var(--color-red-500);
+  }
+  .bg-white {
+    background-color: var(--color-white);
+  }
+  .p-4 {
+    padding: calc(var(--spacing) * 4);
+  }
+  .px-3 {
+    padding-inline: calc(var(--spacing) * 3);
+  }
+  .py-2 {
+    padding-block: calc(var(--spacing) * 2);
+  }
+  .text-sm {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+  .text-\[14px\] {
+    font-size: 14px;
+  }
+  .leading-\[24px\] {
+    --tw-leading: 24px;
+    line-height: 24px;
+  }
+  .text-black {
+    color: var(--color-black);
+  }
+  .text-blue-400 {
+    color: var(--color-blue-400);
+  }
+  .text-blue-600 {
+    color: var(--color-blue-600);
+  }
+  .text-gray-200 {
+    color: var(--color-gray-200);
+  }
+  .no-underline {
+    text-decoration-line: none;
+  }
+}
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-leading: initial;
+    }
+  }
+}
+`);
+    resolveAllCssVariables(root);
+    expect(generate(root)).toMatchSnapshot();
+  });
+
   it('works with simple css variables on a :root', () => {
     const root = parse(`:root {
   --width: 100px;
@@ -10,10 +97,24 @@ describe('resolveAllCSSVariables', () => {
 .box {
   width: var(--width);
 }`);
+    resolveAllCssVariables(root);
+    expect(generate(root)).toMatchSnapshot();
+  });
 
-    expect(resolveAllCSSVariables(root).toString()).toBe(`.box {
-  width: 100px;
-}`);
+  it('works for variables across different CSS layers', () => {
+    const root = parse(`@layer base {
+      :root {
+        --width: 100px;
+      }
+    }
+
+    @layer utilities {
+      .box {
+        width: var(--width);
+      }
+    }`);
+    resolveAllCssVariables(root);
+    expect(generate(root)).toMatchSnapshot();
   });
 
   it('works with multiple variables in the same declaration', () => {
@@ -28,19 +129,16 @@ describe('resolveAllCSSVariables', () => {
       margin: var(--top) var(--right) var(--bottom) var(--left);
     }`);
 
-    expect(resolveAllCSSVariables(root).toString()).toBe(`.box {
-      margin: 101px 103px 102px 104px;
-    }`);
+    resolveAllCssVariables(root);
+    expect(generate(root)).toMatchSnapshot();
   });
 
   it('keeps variable usages if it cant find their declaration', () => {
     const root = parse(`.box {
   width: var(--width);
 }`);
-
-    expect(resolveAllCSSVariables(root).toString()).toBe(`.box {
-  width: var(--width);
-}`);
+    resolveAllCssVariables(root);
+    expect(generate(root)).toMatchSnapshot();
   });
 
   it('works with variables set in the same rule', () => {
@@ -56,42 +154,109 @@ describe('resolveAllCSSVariables', () => {
   }
 }
 `);
-    expect(resolveAllCSSVariables(root).toString()).toBe(`.box {
-  width: 200px;
-}
+    resolveAllCssVariables(root);
+    expect(generate(root)).toMatchSnapshot();
+  });
 
-@media (min-width: 1280px) {
-  .xl\\:bg-green-500 {
-    background-color: rgb(34 197 94 / 1)
+  it('works with a variable set in a layer, and used in another through a media query', () => {
+    const root = parse(`@layer theme {
+  :root {
+    --color-blue-300: blue;
   }
 }
-`);
+
+@layer utilities {
+  .sm\:bg-blue-300 {
+    @media (width >= 40rem) {
+      background-color: var(--color-blue-300);
+    }
+  }
+}`);
+    resolveAllCssVariables(root);
+    expect(generate(root)).toMatchSnapshot();
+  });
+
+  it('uses fallback values when variable definition is not found', () => {
+    const root = parse(`.box {
+  width: var(--undefined-width, 150px);
+  height: var(--undefined-height, 200px);
+  margin: var(--undefined-margin, 10px 20px);
+}`);
+    resolveAllCssVariables(root);
+    expect(generate(root)).toMatchSnapshot();
   });
 
-  it('works with different values between media queries', () => {
+  it('handles nested var() functions in fallbacks', () => {
     const root = parse(`:root {
-  --width: 100px;
+  --fallback-width: 300px;
 }
 
-@media (max-width: 1000px) {
-  :root {
-    --width: 200px;
-  }
+.box {
+  width: var(--undefined-width, var(--fallback-width));
+  height: var(--undefined-height, var(--also-undefined, 250px));
+}`);
+    resolveAllCssVariables(root);
+    expect(generate(root)).toMatchSnapshot();
+  });
+
+  it('handles deeply nested var() functions with complex parentheses', () => {
+    const root = parse(`:root {
+  --primary: blue;
+  --secondary: red;
+  --fallback: green;
+  --size: 20px;
 }
 
 .box {
-  width: var(--width);
+  color: var(--primary, var(--secondary, var(--fallback)));
+  width: var(--size, calc(100px + var(--size, 20px)));
+  border: var(--border-width, var(--border-style, var(--border-color, 1px solid black)));
+  --r: 100;
+  --b: 10;
+  background: var(--bg-color, rgb(var(--r, 255), var(--g, 0), var(--b, 0)));
 }`);
-    expect(
-      resolveAllCSSVariables(root).toString(),
-    ).toBe(`@media (max-width: 1000px) {
-  .box {
-    width: 200px;
-  }
+    resolveAllCssVariables(root);
+    expect(generate(root)).toMatchSnapshot();
+  });
+
+  it('handles selectors with asterisks in attribute selectors and pseudo-functions', () => {
+    const root = parse(`* {
+  --global-color: red;
 }
 
-.box {
-  width: 100px;
+input[type="*"]:hover {
+  color: var(--global-color);
+}
+
+div:nth-child(2*n+1) {
+  background: var(--global-color);
+}
+
+.test[data-attr="value*test"] {
+  border-color: var(--global-color);
+}
+
+.universal-with-class-* {
+  --class-color: blue;
+  text-decoration: var(--class-color);
+}
+
+.normal {
+  color: var(--class-color);
 }`);
+
+    resolveAllCssVariables(root);
+    const result = generate(root);
+
+    // Variables from universal selector (*) should resolve to other selectors with actual universal selector
+    expect(result).toContain('input[type="*"]:hover{color:red}');
+    expect(result).toContain('div:nth-child(2*n+1){background:red}');
+    expect(result).toContain('.test[data-attr="value*test"]{border-color:red}');
+
+    // Variables from *.universal-with-class should resolve within the same selector and to .normal
+    expect(result).toContain(
+      '.universal-with-class-*{--class-color: blue;text-decoration:blue}',
+    );
+    expect(result).toContain('.normal{color:var(--class-color)}');
   });
 });
diff --git a/packages/tailwind/src/utils/css/resolve-all-css-variables.ts b/packages/tailwind/src/utils/css/resolve-all-css-variables.ts
index 9411fa4c2f..32287d9526 100644
--- a/packages/tailwind/src/utils/css/resolve-all-css-variables.ts
+++ b/packages/tailwind/src/utils/css/resolve-all-css-variables.ts
@@ -1,114 +1,199 @@
 import {
-  AtRule,
-  decl as createDeclaration,
-  rule as createRule,
+  type CssNode,
   type Declaration,
-  type Node,
-  type Root,
-  Rule,
-} from 'postcss';
-import { removeIfEmptyRecursively } from './remove-if-empty-recursively';
-
-const doNodesMatch = (first: Node | undefined, second: Node | undefined) => {
-  if (first instanceof Rule && second instanceof Rule) {
-    return (
-      first.selector === second.selector ||
-      second.selector.includes('*') ||
-      second.selector.includes(':root')
-    );
+  generate,
+  type List,
+  type ListItem,
+  parse,
+  type Raw,
+  type SelectorList,
+  type Value,
+  walk,
+} from 'css-tree';
+
+interface VariableUse {
+  declaration: Declaration;
+  path: CssNode[];
+  fallback?: string;
+  variableName: string;
+  raw: string;
+}
+
+export interface VariableDefinition {
+  declaration: Declaration;
+  path: CssNode[];
+  variableName: string;
+  definition: string;
+}
+
+function doSelectorsIntersect(
+  first: SelectorList | Raw,
+  second: SelectorList | Raw,
+): boolean {
+  const firstStringified = generate(first);
+  const secondStringified = generate(second);
+  if (firstStringified === secondStringified) {
+    return true;
   }
 
-  return first === second;
-};
-
-export const resolveAllCSSVariables = (root: Root) => {
-  root.walkRules((rule) => {
-    const declarationsForAtRules = new Map<AtRule, Set<Declaration>>();
-    const valueReplacingInformation = new Set<{
-      declaration: Declaration;
-      replacing: string;
-      replacement: string;
-    }>();
-
-    rule.walkDecls((declaration) => {
-      if (/var\(--[^\s)]+\)/.test(declaration.value)) {
-        /**
-         * @example ['var(--width)', 'var(--length)']
-         */
-        const variablesUsed = [
-          ...declaration.value.matchAll(/var\(--[^\s)]+\)/gm),
-        ].map((match) => match.toString());
-
-        root.walkDecls((otherDecl) => {
-          if (/--[^\s]+/.test(otherDecl.prop)) {
-            const variable = `var(${otherDecl.prop})`;
-            if (
-              variablesUsed?.includes(variable) &&
-              doNodesMatch(declaration.parent, otherDecl.parent)
-            ) {
-              if (
-                otherDecl.parent?.parent instanceof AtRule &&
-                otherDecl.parent !== declaration.parent
-              ) {
-                const atRule = otherDecl.parent.parent;
-
-                const clonedDeclaration = createDeclaration();
-                clonedDeclaration.prop = declaration.prop;
-                clonedDeclaration.value = declaration.value.replaceAll(
-                  variable,
-                  otherDecl.value,
-                );
-                clonedDeclaration.important = declaration.important;
-
-                const declarationForAtRule = declarationsForAtRules.get(atRule);
-                if (declarationForAtRule) {
-                  declarationForAtRule.add(clonedDeclaration);
-                } else {
-                  declarationsForAtRules.set(
-                    otherDecl.parent.parent,
-                    new Set([clonedDeclaration]),
-                  );
+  let hasSomeUniversal = false;
+  const walker = (
+    node: CssNode,
+    _parentListItem: ListItem<CssNode>,
+    parentList: List<CssNode>,
+  ) => {
+    if (hasSomeUniversal) return;
+    if (node.type === 'PseudoClassSelector' && node.name === 'root') {
+      hasSomeUniversal = true;
+    }
+    if (
+      node.type === 'TypeSelector' &&
+      node.name === '*' &&
+      parentList.size === 1
+    ) {
+      hasSomeUniversal = true;
+    }
+  };
+  walk(first, walker);
+  walk(second, walker);
+
+  if (hasSomeUniversal) {
+    return true;
+  }
+
+  return false;
+}
+
+export function resolveAllCssVariables(node: CssNode) {
+  const variableDefinitions = new Set<VariableDefinition>();
+  const variableUses = new Set<VariableUse>();
+
+  const path: CssNode[] = [];
+
+  walk(node, {
+    leave() {
+      path.shift();
+    },
+    enter(node: CssNode) {
+      if (node.type === 'Declaration') {
+        const declaration = node;
+        // Ignores @layer (properties) { ... } to avoid variable resolution conflicts
+        if (
+          path.some(
+            (ancestor) =>
+              ancestor.type === 'Atrule' &&
+              ancestor.name === 'layer' &&
+              ancestor.prelude !== null &&
+              generate(ancestor.prelude).includes('properties'),
+          )
+        ) {
+          path.unshift(node);
+          return;
+        }
+
+        if (/--[\S]+/.test(declaration.property)) {
+          variableDefinitions.add({
+            declaration,
+            path: [...path],
+            variableName: declaration.property,
+            definition: generate(declaration.value),
+          });
+        } else {
+          function parseVariableUsesFrom(node: CssNode) {
+            walk(node, {
+              visit: 'Function',
+              enter(funcNode) {
+                if (funcNode.name === 'var') {
+                  const children = funcNode.children.toArray();
+                  const name = generate(children[0]);
+                  const fallback =
+                    // The second argument should be an "," Operator Node,
+                    // such that the actual fallback is only in the third argument
+                    children[2] ? generate(children[2]) : undefined;
+
+                  variableUses.add({
+                    declaration,
+                    path: [...path],
+                    fallback,
+                    variableName: name,
+                    raw: generate(funcNode),
+                  });
+
+                  if (fallback?.includes('var(')) {
+                    const parsedFallback = parse(fallback, {
+                      context: 'value',
+                    });
+
+                    parseVariableUsesFrom(parsedFallback);
+                  }
                 }
-                return;
-              }
-
-              valueReplacingInformation.add({
-                declaration,
-                replacing: variable,
-                replacement: otherDecl.value,
-              });
-            }
+              },
+            });
           }
-        });
+
+          parseVariableUsesFrom(declaration.value);
+        }
       }
-    });
-
-    for (const {
-      declaration,
-      replacing,
-      replacement,
-    } of valueReplacingInformation) {
-      declaration.value = declaration.value.replaceAll(replacing, replacement);
-    }
+      path.unshift(node);
+    },
+  });
 
-    for (const [atRule, declarations] of declarationsForAtRules.entries()) {
-      const equivalentRule = createRule();
-      equivalentRule.selector = rule.selector;
-      equivalentRule.append(...declarations);
+  for (const use of variableUses) {
+    let hasReplaced = false;
 
-      atRule.append(equivalentRule);
-    }
-  });
+    for (const definition of variableDefinitions) {
+      if (use.variableName !== definition.variableName) {
+        continue;
+      }
+
+      if (
+        use.path[0]?.type === 'Block' &&
+        use.path[1]?.type === 'Atrule' &&
+        use.path[2]?.type === 'Block' &&
+        use.path[3]?.type === 'Rule' &&
+        definition.path[0].type === 'Block' &&
+        definition.path[1].type === 'Rule' &&
+        doSelectorsIntersect(use.path[3].prelude, definition.path[1].prelude)
+      ) {
+        use.declaration.value = parse(
+          generate(use.declaration.value).replaceAll(
+            use.raw,
+            definition.definition,
+          ),
+          {
+            context: 'value',
+          },
+        ) as Raw | Value;
+        hasReplaced = true;
+        break;
+      }
 
-  root.walkDecls((decl) => {
-    if (/--[^\s]+/.test(decl.prop)) {
-      const parent = decl.parent;
-      decl.remove();
-      if (parent) {
-        removeIfEmptyRecursively(parent);
+      if (
+        use.path[0]?.type === 'Block' &&
+        use.path[1]?.type === 'Rule' &&
+        definition.path[0]?.type === 'Block' &&
+        definition.path[1]?.type === 'Rule' &&
+        doSelectorsIntersect(use.path[1].prelude, definition.path[1].prelude)
+      ) {
+        use.declaration.value = parse(
+          generate(use.declaration.value).replaceAll(
+            use.raw,
+            definition.definition,
+          ),
+          {
+            context: 'value',
+          },
+        ) as Raw | Value;
+        hasReplaced = true;
+        break;
       }
     }
-  });
 
-  return root;
-};
+    if (!hasReplaced && use.fallback) {
+      use.declaration.value = parse(
+        generate(use.declaration.value).replaceAll(use.raw, use.fallback),
+        { context: 'value' },
+      ) as Raw | Value;
+    }
+  }
+}
diff --git a/packages/tailwind/src/utils/css/resolve-calc-expressions.spec.ts b/packages/tailwind/src/utils/css/resolve-calc-expressions.spec.ts
new file mode 100644
index 0000000000..285ef3f79d
--- /dev/null
+++ b/packages/tailwind/src/utils/css/resolve-calc-expressions.spec.ts
@@ -0,0 +1,30 @@
+import { generate, parse } from 'css-tree';
+import { resolveCalcExpressions } from './resolve-calc-expressions';
+
+describe('resolveCalcExpressions()', () => {
+  it('resolves spacing calc expressions from tailwind v4', () => {
+    const root = parse(`
+.px-3{padding-inline:calc(0.25rem*3)}
+.py-2{padding-block:calc(0.25rem*2)}
+  `);
+    resolveCalcExpressions(root);
+    expect(generate(root)).toMatchSnapshot();
+  });
+
+  it('resolves calc expressions repeating decimals', () => {
+    const root = parse(`
+      .w-1\/3 { width: calc(0.3333333333333333*100%); }
+    `);
+    resolveCalcExpressions(root);
+    expect(generate(root)).toMatchSnapshot();
+  });
+
+  it('does not modify complex calc expressions', () => {
+    const root = parse(`
+.px-3{padding-inline:calc(0.25rem*(3 + 1px))}
+.py-2{padding-block:calc(0.25rem*(2 + 1px))}
+  `);
+    resolveCalcExpressions(root);
+    expect(generate(root)).toMatchSnapshot();
+  });
+});
diff --git a/packages/tailwind/src/utils/css/resolve-calc-expressions.ts b/packages/tailwind/src/utils/css/resolve-calc-expressions.ts
new file mode 100644
index 0000000000..13b2417d51
--- /dev/null
+++ b/packages/tailwind/src/utils/css/resolve-calc-expressions.ts
@@ -0,0 +1,147 @@
+import { type CssNode, walk } from 'css-tree';
+
+/**
+ * Intentionally only resolves `*` and `/` operations without dealing with parenthesis, because this is the only thing required to run Tailwind v4
+ */
+export function resolveCalcExpressions(node: CssNode) {
+  walk(node, {
+    visit: 'Function',
+    enter(func, funcListItem) {
+      if (func.name === 'calc') {
+        /*
+          [
+            { type: 'Dimension', loc: null, value: '0.25', unit: 'rem' },
+            { type: 'Operator', loc: null, value: '*' },
+            { type: 'Number', loc: null, value: '2' }
+            { type: 'Percentage', loc: null, value: '2' }
+          ]
+        */
+        func.children.forEach((child, item) => {
+          const left = item.prev;
+          const right = item.next;
+          if (
+            left &&
+            right &&
+            child.type === 'Operator' &&
+            (left.data.type === 'Dimension' ||
+              left.data.type === 'Number' ||
+              left.data.type === 'Percentage') &&
+            (right.data.type === 'Dimension' ||
+              right.data.type === 'Number' ||
+              right.data.type === 'Percentage')
+          ) {
+            if (child.value === '*' || child.value === '/') {
+              const value = (() => {
+                if (child.value === '*') {
+                  return String(
+                    Number.parseFloat(left.data.value) *
+                      Number.parseFloat(right.data.value),
+                  );
+                }
+                if (right.data.value === '0') {
+                  return '0';
+                }
+                return String(
+                  Number.parseFloat(left.data.value) /
+                    Number.parseFloat(right.data.value),
+                );
+              })();
+              if (
+                left.data.type === 'Dimension' &&
+                right.data.type === 'Number'
+              ) {
+                item.data = {
+                  type: 'Dimension',
+                  unit: left.data.unit,
+                  value,
+                };
+                func.children.remove(left);
+                func.children.remove(right);
+              } else if (
+                left.data.type === 'Number' &&
+                right.data.type === 'Dimension'
+              ) {
+                item.data = {
+                  type: 'Dimension',
+                  unit: right.data.unit,
+                  value,
+                };
+                func.children.remove(left);
+                func.children.remove(right);
+              } else if (
+                left.data.type === 'Number' &&
+                right.data.type === 'Number'
+              ) {
+                item.data = {
+                  type: 'Number',
+                  value,
+                };
+                func.children.remove(left);
+                func.children.remove(right);
+              } else if (
+                left.data.type === 'Dimension' &&
+                right.data.type === 'Dimension' &&
+                left.data.unit === right.data.unit
+              ) {
+                if (child.value === '/') {
+                  item.data = {
+                    type: 'Number',
+                    value,
+                  };
+                } else {
+                  item.data = {
+                    type: 'Dimension',
+                    unit: left.data.unit,
+                    value,
+                  };
+                }
+                func.children.remove(left);
+                func.children.remove(right);
+              } else if (
+                left.data.type === 'Percentage' &&
+                right.data.type === 'Number'
+              ) {
+                item.data = {
+                  type: 'Percentage',
+                  value,
+                };
+                func.children.remove(left);
+                func.children.remove(right);
+              } else if (
+                left.data.type === 'Number' &&
+                right.data.type === 'Percentage'
+              ) {
+                item.data = {
+                  type: 'Percentage',
+                  value,
+                };
+                func.children.remove(left);
+                func.children.remove(right);
+              } else if (
+                left.data.type === 'Percentage' &&
+                right.data.type === 'Percentage'
+              ) {
+                if (child.value === '/') {
+                  item.data = {
+                    type: 'Number',
+                    value,
+                  };
+                } else {
+                  item.data = {
+                    type: 'Percentage',
+                    value,
+                  };
+                }
+                func.children.remove(left);
+                func.children.remove(right);
+              }
+            }
+          }
+        });
+        if (func.children.size === 1 && func.children.first) {
+          funcListItem.data = func.children.first;
+        }
+      }
+    },
+  });
+}
diff --git a/packages/tailwind/src/utils/css/sanitize-declarations.spec.ts b/packages/tailwind/src/utils/css/sanitize-declarations.spec.ts
new file mode 100644
index 0000000000..94fe6ecf45
--- /dev/null
+++ b/packages/tailwind/src/utils/css/sanitize-declarations.spec.ts
@@ -0,0 +1,311 @@
+import { generate, parse } from 'css-tree';
+import { sanitizeDeclarations } from './sanitize-declarations';
+
+describe('sanitizeDeclarations', () => {
+  it('converts border-radius:calc(Infinity * 1px) to border-radius:9999px', () => {
+    let root = parse(`.rounded-full {
+  border-radius: calc(Infinity * 1px);
+}
+`);
+    sanitizeDeclarations(root);
+    expect(generate(root)).toBe('.rounded-full{border-radius:9999px}');
+
+    root = parse(`.rounded-full {
+  border-radius: calc(infinity * 1px);
+}
+`);
+    sanitizeDeclarations(root);
+    expect(generate(root)).toBe('.rounded-full{border-radius:9999px}');
+
+    root = parse(`.rounded-full {
+  border-radius: calc(infinity*1px);
+}
+`);
+    sanitizeDeclarations(root);
+    expect(generate(root)).toBe('.rounded-full{border-radius:9999px}');
+
+    root = parse(`.rounded-full {
+  border-radius: calc(Infinity*1px);
+}
+`);
+    sanitizeDeclarations(root);
+    expect(generate(root)).toBe('.rounded-full{border-radius:9999px}');
+  });
+
+  it('separates padding-block and padding-inline', () => {
+    let root = parse(`.box {
+  padding-inline: 4px 14;
+}
+`);
+    sanitizeDeclarations(root);
+    expect(generate(root)).toMatchSnapshot();
+
+    root = parse(`.box {
+  padding-block: 10px 20%;
+}
+`);
+    sanitizeDeclarations(root);
+    expect(generate(root)).toMatchSnapshot();
+
+    root = parse(`.box {
+  padding-inline: 99rem;
+}
+`);
+    sanitizeDeclarations(root);
+    expect(generate(root)).toMatchSnapshot();
+
+    root = parse(`.box {
+  padding-block: 8px;
+}
+`);
+    sanitizeDeclarations(root);
+    expect(generate(root)).toMatchSnapshot();
+  });
+
+  it('should do separation of margin-block and margin-inline', () => {
+    let root = parse(`.box {
+  margin-inline: 4px 14;
+}
+`);
+    sanitizeDeclarations(root);
+    expect(generate(root)).toMatchSnapshot();
+
+    root = parse(`.box {
+  margin-block: 10px 20%;
+}
+`);
+    sanitizeDeclarations(root);
+    expect(generate(root)).toMatchSnapshot();
+
+    root = parse(`.box {
+  margin-inline: 99rem;
+}
+`);
+    sanitizeDeclarations(root);
+    expect(generate(root)).toMatchSnapshot();
+
+    root = parse(`.box {
+  margin-block: 8px;
+}
+`);
+    sanitizeDeclarations(root);
+    expect(generate(root)).toMatchSnapshot();
+  });
+
+  test('oklch to rgb conversion', () => {
+    let stylesheet = parse('div { color: oklch(90.5% 0.2 180); }');
+    sanitizeDeclarations(stylesheet);
+    expect(generate(stylesheet), 'conversion without alpha').toMatchSnapshot();
+
+    stylesheet = parse('div { color: oklch(96.6% 0.147 107 / 80%); }');
+    sanitizeDeclarations(stylesheet);
+    expect(generate(stylesheet), 'conversion with alpha').toMatchSnapshot();
+
+    stylesheet = parse('div { color: oklch(96.6% 0.147 107deg / 80%); }');
+    sanitizeDeclarations(stylesheet);
+    expect(generate(stylesheet), 'conversion with deg unit').toMatchSnapshot();
+
+    stylesheet = parse('div { color: oklch(92.6% 0.0546 218 / 50%); }');
+    sanitizeDeclarations(stylesheet);
+    expect(generate(stylesheet)).toMatchSnapshot();
+
+    stylesheet = parse('div { color: oklch(88.3% 0.102 329); }');
+    sanitizeDeclarations(stylesheet);
+    expect(generate(stylesheet)).toMatchSnapshot();
+
+    stylesheet = parse('div { color: oklch(69.3% 0.206 42.8); }');
+    sanitizeDeclarations(stylesheet);
+    expect(generate(stylesheet)).toMatchSnapshot();
+  });
+
+  test('rgba space syntax to comma syntax conversion', () => {
+    let stylesheet = parse('div { color: rgb(255 0 128); }');
+    sanitizeDeclarations(stylesheet);
+    expect(
+      generate(stylesheet),
+      'conversion with space syntax and no alpha',
+    ).toMatchSnapshot();
+
+    stylesheet = parse('div { color: rgb(255 0 128 / 0.5); }');
+    sanitizeDeclarations(stylesheet);
+    expect(
+      generate(stylesheet),
+      'conversion with space syntax and alpha',
+    ).toMatchSnapshot();
+
+    stylesheet = parse('div { color: rgb(100% 0% 50% / 50%); }');
+    sanitizeDeclarations(stylesheet);
+    expect(
+      generate(stylesheet),
+      'conversion with percentage values',
+    ).toMatchSnapshot();
+
+    stylesheet = parse('div { color: rgb(255 0 128 / 50%); }');
+    sanitizeDeclarations(stylesheet);
+    expect(
+      generate(stylesheet),
+      'conversion with space syntax and alpha with a percetange syntax',
+    ).toMatchSnapshot();
+
+    stylesheet = parse('div { color: rgb(255 0 128 / 1); }');
+    sanitizeDeclarations(stylesheet);
+    expect(generate(stylesheet)).toMatchSnapshot();
+
+    stylesheet = parse(
+      'div { background: linear-gradient(rgb(255 0 0), rgb(0 255 0 / 0.8)); }',
+    );
+    sanitizeDeclarations(stylesheet);
+    expect(generate(stylesheet)).toMatchSnapshot();
+
+    stylesheet = parse('div { color: rgb(  255   0   128  /  0.7  ); }');
+    sanitizeDeclarations(stylesheet);
+    expect(generate(stylesheet)).toMatchSnapshot();
+
+    stylesheet = parse('div { color: rgb(0 0 0); }');
+    sanitizeDeclarations(stylesheet);
+    expect(generate(stylesheet)).toMatchSnapshot();
+
+    stylesheet = parse('div { color: rgb(255, 0, 128); }');
+    sanitizeDeclarations(stylesheet);
+    expect(
+      generate(stylesheet),
+      'treatment for already supported rgb syntax',
+    ).toMatchSnapshot();
+  });
+
+  test('hex to rgb conversion', () => {
+    let stylesheet = parse('div { color: #f0a; }');
+    sanitizeDeclarations(stylesheet);
+    expect(generate(stylesheet), '3-digit hex without alpha').toMatchSnapshot();
+
+    stylesheet = parse('div { color: #f0a8; }');
+    sanitizeDeclarations(stylesheet);
+    expect(generate(stylesheet), '4-digit hex with alpha').toMatchSnapshot();
+
+    stylesheet = parse('div { color: #ff00aa; }');
+    sanitizeDeclarations(stylesheet);
+    expect(generate(stylesheet), '6-digit hex without alpha').toMatchSnapshot();
+
+    stylesheet = parse('div { color: #ff00aa80; }');
+    sanitizeDeclarations(stylesheet);
+    expect(generate(stylesheet), '8-digit hex with alpha').toMatchSnapshot();
+
+    stylesheet = parse('div { color: #000; }');
+    sanitizeDeclarations(stylesheet);
+    expect(generate(stylesheet)).toMatchSnapshot();
+
+    stylesheet = parse('div { color: #fff; }');
+    sanitizeDeclarations(stylesheet);
+    expect(generate(stylesheet)).toMatchSnapshot();
+
+    stylesheet = parse('div { color: #ff0000; }');
+    sanitizeDeclarations(stylesheet);
+    expect(generate(stylesheet)).toMatchSnapshot();
+
+    stylesheet = parse('div { color: #00ff00; }');
+    sanitizeDeclarations(stylesheet);
+    expect(generate(stylesheet)).toMatchSnapshot();
+
+    stylesheet = parse('div { color: #0000ff; }');
+    sanitizeDeclarations(stylesheet);
+    expect(generate(stylesheet)).toMatchSnapshot();
+
+    stylesheet = parse('div { color: #abcdef; }');
+    sanitizeDeclarations(stylesheet);
+    expect(generate(stylesheet)).toMatchSnapshot();
+
+    stylesheet = parse('div { color: #ABCDEF; }');
+    sanitizeDeclarations(stylesheet);
+    expect(generate(stylesheet)).toMatchSnapshot();
+
+    stylesheet = parse('div { color: #AbCdEf; }');
+    sanitizeDeclarations(stylesheet);
+    expect(generate(stylesheet), 'mixed casing').toMatchSnapshot();
+
+    stylesheet = parse('div { color: #ff000000; }');
+    sanitizeDeclarations(stylesheet);
+    expect(generate(stylesheet)).toMatchSnapshot();
+
+    stylesheet = parse('div { color: #ff0000ff; }');
+    sanitizeDeclarations(stylesheet);
+    expect(generate(stylesheet)).toMatchSnapshot();
+
+    stylesheet = parse(
+      'div { background: linear-gradient(#ff0000, #00ff00, #0000ff); }',
+    );
+    sanitizeDeclarations(stylesheet);
+    expect(generate(stylesheet)).toMatchSnapshot();
+
+    stylesheet = parse(
+      'div { background: linear-gradient(#ff0000, rgb(0 255 0), oklch(50% 0.2 240)); }',
+    );
+    sanitizeDeclarations(stylesheet);
+    const result = generate(stylesheet);
+    expect(result).toMatchSnapshot();
+
+    stylesheet = parse(
+      'div { content: "Visit our site at example.com#section"; }',
+    );
+    sanitizeDeclarations(stylesheet);
+    expect(generate(stylesheet)).toMatchSnapshot();
+
+    stylesheet = parse(`
+      div {
+        color: #ff0000;
+        background-color: #00ff00;
+        border-color: #0000ff;
+        box-shadow: 0 0 10px #333;
+      }
+    `);
+    sanitizeDeclarations(stylesheet);
+    expect(generate(stylesheet)).toMatchSnapshot();
+  });
+
+  it('handles transparency generated with color-mix', () => {
+    const stylesheet = parse(`
+     .bg-blue-600\/50 {
+        background-color: color-mix(in oklab, oklch(54.6% 0.245 262.881) 60%, transparent);
+      }
+    `);
+    sanitizeDeclarations(stylesheet);
+    const result = generate(stylesheet);
+    expect(result).toMatchSnapshot();
+  });
+
+  describe('complex scenarios', () => {
+    it('handles multiple declarations with different rgb formats', () => {
+      const stylesheet = parse(`
+        div {
+          color: rgb(255 0 128 / 0.5);
+          background-color: rgb(0 255 0);
+          border-color: rgb(128, 128, 128);
+        }
+      `);
+      sanitizeDeclarations(stylesheet);
+      const result = generate(stylesheet);
+      expect(result).toMatchSnapshot();
+    });
+
+    it('handles nested rules', () => {
+      const stylesheet = parse(`
+        @media (min-width: 768px) {
+          div { color: rgb(255 0 128 / 0.8); }
+        }
+      `);
+      sanitizeDeclarations(stylesheet);
+      expect(generate(stylesheet)).toMatchSnapshot();
+    });
+
+    it('processes at-rule declarations', () => {
+      const stylesheet = parse(`
+        @keyframes fade {
+          from { background: rgb(255 0 0 / 0); }
+          to { background: rgb(255 0 0 / 1); }
+        }
+      `);
+      sanitizeDeclarations(stylesheet);
+      const result = generate(stylesheet);
+      expect(result).toMatchSnapshot();
+    });
+  });
+});
diff --git a/packages/tailwind/src/utils/css/sanitize-declarations.ts b/packages/tailwind/src/utils/css/sanitize-declarations.ts
index 065b0fdb45..e7d6a6b4d4 100644
--- a/packages/tailwind/src/utils/css/sanitize-declarations.ts
+++ b/packages/tailwind/src/utils/css/sanitize-declarations.ts
@@ -1,25 +1,423 @@
-import type { AtRule, Root, Rule } from 'postcss';
+import {
+  type CssNode,
+  type Declaration,
+  type FunctionNode,
+  generate,
+  List,
+  parse,
+  type Raw,
+  type Value,
+  walk,
+} from 'css-tree';
+
+function rgbNode(
+  r: number,
+  g: number,
+  b: number,
+  alpha?: number,
+): FunctionNode {
+  const children = new List<CssNode>();
+  children.appendData({
+    type: 'Number',
+    value: r.toFixed(0),
+  });
+  children.appendData({
+    type: 'Operator',
+    value: ',',
+  });
+  children.appendData({
+    type: 'Number',
+    value: g.toFixed(0),
+  });
+  children.appendData({
+    type: 'Operator',
+    value: ',',
+  });
+  children.appendData({
+    type: 'Number',
+    value: b.toFixed(0),
+  });
+  if (alpha !== 1 && alpha !== undefined) {
+    children.appendData({
+      type: 'Operator',
+      value: ',',
+    });
+    children.appendData({
+      type: 'Number',
+      value: alpha.toString(),
+    });
+  }
+
+  return {
+    type: 'Function',
+    name: 'rgb',
+    children,
+  };
+}
+
+const LAB_TO_LMS = {
+  l: [0.3963377773761749, 0.2158037573099136],
+  m: [-0.1055613458156586, -0.0638541728258133],
+  s: [-0.0894841775298119, -1.2914855480194092],
+};
+const LSM_TO_RGB = {
+  r: [4.0767416360759583, -3.3077115392580629, 0.2309699031821043],
+  g: [-1.2684379732850315, 2.6097573492876882, -0.341319376002657],
+  b: [-0.0041960761386756, -0.7034186179359362, 1.7076146940746117],
+};
+
+function lrgbToRgb(input: number) {
+  const absoluteNumber = Math.abs(input);
+  const sign = input < 0 ? -1 : 1;
+
+  if (absoluteNumber > 0.0031308) {
+    return sign * (absoluteNumber ** (1 / 2.4) * 1.055 - 0.055);
+  }
+
+  return input * 12.92;
+}
+
+function clamp(value: number, min: number, max: number) {
+  return Math.min(Math.max(value, min), max);
+}
+
+function oklchToOklab(oklch: { l: number; c: number; h: number }) {
+  return {
+    l: oklch.l,
+    a: oklch.c * Math.cos((oklch.h / 180) * Math.PI),
+    b: oklch.c * Math.sin((oklch.h / 180) * Math.PI),
+  };
+}
+
+/** Convert oklab to RGB */
+function oklchToRgb(oklch: { l: number; c: number; h: number }) {
+  const oklab = oklchToOklab(oklch);
+
+  const l =
+    (oklab.l + LAB_TO_LMS.l[0] * oklab.a + LAB_TO_LMS.l[1] * oklab.b) ** 3;
+  const m =
+    (oklab.l + LAB_TO_LMS.m[0] * oklab.a + LAB_TO_LMS.m[1] * oklab.b) ** 3;
+  const s =
+    (oklab.l + LAB_TO_LMS.s[0] * oklab.a + LAB_TO_LMS.s[1] * oklab.b) ** 3;
+
+  const r =
+    255 *
+    lrgbToRgb(LSM_TO_RGB.r[0] * l + LSM_TO_RGB.r[1] * m + LSM_TO_RGB.r[2] * s);
+  const g =
+    255 *
+    lrgbToRgb(LSM_TO_RGB.g[0] * l + LSM_TO_RGB.g[1] * m + LSM_TO_RGB.g[2] * s);
+  const b =
+    255 *
+    lrgbToRgb(LSM_TO_RGB.b[0] * l + LSM_TO_RGB.b[1] * m + LSM_TO_RGB.b[2] * s);
+
+  return {
+    r: clamp(r, 0, 255),
+    g: clamp(g, 0, 255),
+    b: clamp(b, 0, 255),
+  };
+}
+
+function separteShorthandDeclaration(
+  shorthandToReplace: Declaration,
+  [start, end]: [string, string],
+): Declaration {
+  shorthandToReplace.property = start;
+
+  const values =
+    shorthandToReplace.value.type === 'Value'
+      ? shorthandToReplace.value.children
+          .toArray()
+          .filter(
+            (child) =>
+              child.type === 'Dimension' ||
+              child.type === 'Number' ||
+              child.type === 'Percentage',
+          )
+      : [shorthandToReplace.value];
+  let endValue = shorthandToReplace.value;
+  if (values.length === 2) {
+    endValue = {
+      type: 'Value',
+      children: new List<CssNode>().fromArray([values[1]]),
+    };
+    shorthandToReplace.value = {
+      type: 'Value',
+      children: new List<CssNode>().fromArray([values[0]]),
+    };
+  }
+
+  return {
+    type: 'Declaration',
+    property: end,
+    value: endValue,
+    important: shorthandToReplace.important,
+  };
+}
 
 /**
  * Meant to do all the things necessary, in a per-declaration basis, to have the best email client
  * support possible.
  *
- * Currently it only converts all `rgb` declaration values that use a space-based syntax
- * into a command based one since the space-based isn't well supported.
+ * Here's the transformations it does so far:
+ * - convert all `rgb` with space-based syntax into a comma based one;
+ * - convert all `oklch` values into `rgb`;
+ * - convert all hex values into `rgb`;
+ * - convert `padding-inline` into `padding-left` and `padding-right`;
+ * - convert `padding-block` into `padding-top` and `padding-bottom`;
+ * - convert `margin-inline` into `margin-left` and `margin-right`;
+ * - convert `margin-block` into `margin-top` and `margin-bottom`.
  */
-export const sanitizeDeclarations = (
-  nodeContainingDeclarations: Rule | AtRule | Root,
-) => {
-  nodeContainingDeclarations.walkDecls((declaration) => {
-    const rgbParserRegex =
-      /rgb\(\s*(\d+)\s*(\d+)\s*(\d+)(?:\s*\/\s*([\d%.]+))?\s*\)/g;
-
-    declaration.value = declaration.value.replaceAll(
-      rgbParserRegex,
-      (_match, r, g, b, a) => {
-        const alpha = a === '1' || typeof a === 'undefined' ? '' : `,${a}`;
-        return `rgb(${r},${g},${b}${alpha})`;
-      },
-    );
+export function sanitizeDeclarations(nodeContainingDeclarations: CssNode) {
+  walk(nodeContainingDeclarations, {
+    visit: 'Declaration',
+    enter(declaration, item, list) {
+      if (declaration.value.type === 'Raw') {
+        declaration.value = parse(declaration.value.value, {
+          context: 'value',
+        }) as Value | Raw;
+      }
+      if (
+        /border-radius\s*:\s*calc\s*\(\s*infinity\s*\*\s*1px\s*\)/i.test(
+          generate(declaration),
+        )
+      ) {
+        declaration.value = parse('9999px', { context: 'value' }) as Value;
+      }
+      walk(declaration, {
+        visit: 'Function',
+        enter(func, funcParentListItem) {
+          const children = func.children.toArray();
+          if (func.name === 'oklch') {
+            let l: number | undefined;
+            let c: number | undefined;
+            let h: number | undefined;
+            let a: number | undefined;
+            for (const child of children) {
+              if (child.type === 'Number') {
+                if (l === undefined) {
+                  l = Number.parseFloat(child.value);
+                  continue;
+                }
+                if (c === undefined) {
+                  c = Number.parseFloat(child.value);
+                  continue;
+                }
+                if (h === undefined) {
+                  h = Number.parseFloat(child.value);
+                  continue;
+                }
+                if (a === undefined) {
+                  a = Number.parseFloat(child.value);
+                  continue;
+                }
+              }
+              if (child.type === 'Dimension' && child.unit === 'deg') {
+                if (h === undefined) {
+                  h = Number.parseFloat(child.value);
+                  continue;
+                }
+              }
+              if (child.type === 'Percentage') {
+                if (l === undefined) {
+                  l = Number.parseFloat(child.value) / 100;
+                  continue;
+                }
+                if (a === undefined) {
+                  a = Number.parseFloat(child.value) / 100;
+                }
+              }
+            }
+
+            if (l === undefined || c === undefined || h === undefined) {
+              throw new Error(
+                'Could not determine the parameters of an oklch() function.',
+                {
+                  cause: declaration,
+                },
+              );
+            }
+
+            const rgb = oklchToRgb({
+              l,
+              c,
+              h,
+            });
+
+            funcParentListItem.data = rgbNode(rgb.r, rgb.g, rgb.b, a);
+          }
+
+          if (func.name === 'rgb') {
+            let r: number | undefined;
+            let g: number | undefined;
+            let b: number | undefined;
+            let a: number | undefined;
+            for (const child of children) {
+              if (child.type === 'Number') {
+                if (r === undefined) {
+                  r = Number.parseFloat(child.value);
+                  continue;
+                }
+                if (g === undefined) {
+                  g = Number.parseFloat(child.value);
+                  continue;
+                }
+                if (b === undefined) {
+                  b = Number.parseFloat(child.value);
+                  continue;
+                }
+                if (a === undefined) {
+                  a = Number.parseFloat(child.value);
+                  continue;
+                }
+              }
+              if (child.type === 'Percentage') {
+                if (r === undefined) {
+                  r = (Number.parseFloat(child.value) * 255) / 100;
+                  continue;
+                }
+                if (g === undefined) {
+                  g = (Number.parseFloat(child.value) * 255) / 100;
+                  continue;
+                }
+                if (b === undefined) {
+                  b = (Number.parseFloat(child.value) * 255) / 100;
+                  continue;
+                }
+                if (a === undefined) {
+                  a = Number.parseFloat(child.value) / 100;
+                }
+              }
+            }
+
+            if (r === undefined || g === undefined || b === undefined) {
+              throw new Error(
+                'Could not determine the parameters of an rgb() function.',
+                {
+                  cause: declaration,
+                },
+              );
+            }
+
+            if (a === undefined || a === 1) {
+              funcParentListItem.data = rgbNode(r, g, b);
+            } else {
+              funcParentListItem.data = rgbNode(r, g, b, a);
+            }
+          }
+        },
+      });
+      walk(declaration, {
+        visit: 'Hash',
+        enter(hash, hashParentListItem) {
+          const hex = hash.value.trim();
+          if (hex.length === 3) {
+            const r = Number.parseInt(hex.charAt(0) + hex.charAt(0), 16);
+            const g = Number.parseInt(hex.charAt(1) + hex.charAt(1), 16);
+            const b = Number.parseInt(hex.charAt(2) + hex.charAt(2), 16);
+            hashParentListItem.data = rgbNode(r, g, b);
+            return;
+          }
+          if (hex.length === 4) {
+            const r = Number.parseInt(hex.charAt(0) + hex.charAt(0), 16);
+            const g = Number.parseInt(hex.charAt(1) + hex.charAt(1), 16);
+            const b = Number.parseInt(hex.charAt(2) + hex.charAt(2), 16);
+            const a = Number.parseInt(hex.charAt(3) + hex.charAt(3), 16) / 255;
+            hashParentListItem.data = rgbNode(r, g, b, a);
+            return;
+          }
+          if (hex.length === 5) {
+            const r = Number.parseInt(hex.slice(0, 2), 16);
+            const g = Number.parseInt(hex.charAt(2) + hex.charAt(2), 16);
+            const b = Number.parseInt(hex.charAt(3) + hex.charAt(3), 16);
+            const a = Number.parseInt(hex.charAt(4) + hex.charAt(4), 16) / 255;
+            hashParentListItem.data = rgbNode(r, g, b, a);
+            return;
+          }
+          if (hex.length === 6) {
+            const r = Number.parseInt(hex.slice(0, 2), 16);
+            const g = Number.parseInt(hex.slice(2, 4), 16);
+            const b = Number.parseInt(hex.slice(4, 6), 16);
+            hashParentListItem.data = rgbNode(r, g, b);
+            return;
+          }
+          if (hex.length === 7) {
+            const r = Number.parseInt(hex.slice(0, 2), 16);
+            const g = Number.parseInt(hex.slice(2, 4), 16);
+            const b = Number.parseInt(hex.slice(4, 6), 16);
+            const a = Number.parseInt(hex.charAt(6) + hex.charAt(6), 16) / 255;
+            hashParentListItem.data = rgbNode(r, g, b, a);
+            return;
+          }
+          const r = Number.parseInt(hex.slice(0, 2), 16);
+          const g = Number.parseInt(hex.slice(2, 4), 16);
+          const b = Number.parseInt(hex.slice(4, 6), 16);
+          const a = Number.parseInt(hex.slice(6, 8), 16) / 255;
+          hashParentListItem.data = rgbNode(r, g, b, a);
+        },
+      });
+
+      walk(declaration, {
+        visit: 'Function',
+        enter(func, parentListItem) {
+          if (func.name === 'color-mix') {
+            const children = func.children.toArray();
+            // We're expecting the children here to be something like:
+            // Identifier (in)
+            // Identifier (oklab)
+            // Operator (,)
+            // FunctionNode (rgb(...))
+            // Node (opacity)
+            // Operator (,)
+            // Identifier (transparent)
+            const color: CssNode | undefined = children[3];
+            const opacity: CssNode | undefined = children[4];
+            if (
+              func.children.last?.type === 'Identifier' &&
+              func.children.last.name === 'transparent' &&
+              color?.type === 'Function' &&
+              color?.name === 'rgb' &&
+              opacity
+            ) {
+              color.children.appendData({
+                type: 'Operator',
+                value: ',',
+              });
+              color.children.appendData(opacity);
+              parentListItem.data = color;
+            }
+          }
+        },
+      });
+
+      if (declaration.property === 'padding-inline') {
+        const paddingRight = separteShorthandDeclaration(declaration, [
+          'padding-left',
+          'padding-right',
+        ]);
+        list.insertData(paddingRight, item);
+      }
+      if (declaration.property === 'padding-block') {
+        const paddingBottom = separteShorthandDeclaration(declaration, [
+          'padding-top',
+          'padding-bottom',
+        ]);
+        list.insertData(paddingBottom, item);
+      }
+      if (declaration.property === 'margin-inline') {
+        const marginRight = separteShorthandDeclaration(declaration, [
+          'margin-left',
+          'margin-right',
+        ]);
+        list.insertData(marginRight, item);
+      }
+      if (declaration.property === 'margin-block') {
+        const paddingBottom = separteShorthandDeclaration(declaration, [
+          'margin-top',
+          'margin-bottom',
+        ]);
+
+        list.insertData(paddingBottom, item);
+      }
+    },
   });
-};
+}
diff --git a/packages/tailwind/src/utils/css/sanitize-non-inlinable-classes.spec.ts b/packages/tailwind/src/utils/css/sanitize-non-inlinable-classes.spec.ts
deleted file mode 100644
index fb93df510b..0000000000
--- a/packages/tailwind/src/utils/css/sanitize-non-inlinable-classes.spec.ts
+++ /dev/null
@@ -1,130 +0,0 @@
-import postcss, { Root } from 'postcss';
-import { sanitizeNonInlinableClasses } from './sanitize-non-inlinable-classes';
-
-test('sanitizeNonInlinableClasses()', async () => {
-  const { root } = await postcss()
-    .process(
-      `
-.ring-gray-900\\/5{
-  --tw-ring-color: rgb(17 24 39 / 0.05)
-}
-.\\[mask-image\\:linear-gradient\\(180deg\\2c white\\2c rgba\\(255\\2c 255\\2c 255\\2c 0\\)\\)\\]{
-  -webkit-mask-image: linear-gradient(180deg,white,rgba(255,255,255,0));
-          mask-image: linear-gradient(180deg,white,rgba(255,255,255,0))
-}
-
-.hover\\:text-sky-600:hover{
-  --tw-text-opacity: 1;
-  color: rgb(2 132 199 / var(--tw-text-opacity))
-}
-
-@media (min-width: 640px){
-  .sm\\:mx-auto{
-    margin-left: auto;
-    margin-right: auto
-  }
-
-  .sm\\:focus\\:outline-none:focus{
-    outline: 2px solid transparent;
-    outline-offset: 2px
-  }
-
-  .sm\\:max-w-lg{
-    max-width: 32rem
-  }
-
-  .sm\\:rounded-lg{
-    border-radius: 0.5rem
-  }
-}
-
-@media (min-width: 768px){
-  .md\\:hover\\:bg-gray-100:hover{
-    --tw-bg-opacity: 1;
-    background-color: rgb(243 244 246 / var(--tw-bg-opacity))
-  }
-
-  .md\\:px-10{
-    padding-left: 2.5rem;
-    padding-right: 2.5rem
-  }
-
-  .md\\:py-12{
-    padding-top: 3rem;
-    padding-bottom: 3rem
-  }
-}
-
-@media (min-width: 1024px){
-  .lg\\:focus\\:underline:focus{
-    text-decoration-line: underline
-  }
-}
-`,
-    )
-    .async();
-
-  const { nonInlinableClasses, sanitizedRules } = sanitizeNonInlinableClasses(
-    root as Root,
-  );
-  expect(nonInlinableClasses).toEqual([
-    'sm:mx-auto',
-    'sm:focus:outline-none',
-    'sm:max-w-lg',
-    'sm:rounded-lg',
-    'md:hover:bg-gray-100',
-    'md:px-10',
-    'md:py-12',
-    'lg:focus:underline',
-    'hover:text-sky-600',
-  ]);
-  expect(new Root({ nodes: sanitizedRules }).toString()).toBe(`
-
-@media (min-width: 640px){
-  .sm_mx-auto{
-    margin-left: auto !important;
-    margin-right: auto !important
-  }
-
-  .sm_focus_outline-none:focus{
-    outline: 2px solid transparent !important;
-    outline-offset: 2px !important
-  }
-
-  .sm_max-w-lg{
-    max-width: 32rem !important
-  }
-
-  .sm_rounded-lg{
-    border-radius: 0.5rem !important
-  }
-}
-
-@media (min-width: 768px){
-  .md_hover_bg-gray-100:hover{
-    --tw-bg-opacity: 1 !important;
-    background-color: rgb(243 244 246 / var(--tw-bg-opacity)) !important
-  }
-
-  .md_px-10{
-    padding-left: 2.5rem !important;
-    padding-right: 2.5rem !important
-  }
-
-  .md_py-12{
-    padding-top: 3rem !important;
-    padding-bottom: 3rem !important
-  }
-}
-
-@media (min-width: 1024px){
-  .lg_focus_underline:focus{
-    text-decoration-line: underline !important
-  }
-}
-
-.hover_text-sky-600:hover{
-  --tw-text-opacity: 1 !important;
-  color: rgb(2 132 199 / var(--tw-text-opacity)) !important
-}`);
-});
diff --git a/packages/tailwind/src/utils/css/sanitize-non-inlinable-classes.ts b/packages/tailwind/src/utils/css/sanitize-non-inlinable-classes.ts
deleted file mode 100644
index c2d3077049..0000000000
--- a/packages/tailwind/src/utils/css/sanitize-non-inlinable-classes.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-import { AtRule, type Root, type Rule } from 'postcss';
-import selectorParser from 'postcss-selector-parser';
-import { sanitizeClassName } from '../compatibility/sanitize-class-name';
-
-/**
- * This function goes through a few steps to ensure the best email client support and
- * to ensure that the media queries and pseudo classes are going to applied correctly alongisde
- * the inline styles.
- *
- * What it does is:
- * 1. Converts all declarations in all rules into being important ones
- * 2. Sanitizes all the selectors of all rules in the media queries
- * 3. Sanitizes all the selectors of all rules using pseudo classes
- * 4. Merges at rules that have equivalent parameters
- */
-export const sanitizeNonInlinableClasses = (root: Root) => {
-  const sanitizedRules: (Rule | AtRule)[] = [];
-  const nonInlinableClasses: string[] = [];
-
-  const selectorProcessor = selectorParser();
-
-  // Process rules within at-rules (like media queries)
-  root.walkAtRules((atRule) => {
-    const sanitizedAtRule = atRule.clone();
-
-    sanitizedAtRule.walkRules((rule) => {
-      const selectorRoot = selectorProcessor.astSync(rule.selector);
-      selectorRoot.walkClasses((className) => {
-        nonInlinableClasses.push(className.value);
-        sanitizeSelectorClassName(className);
-      });
-
-      const processedRule = rule.clone({ selector: selectorRoot.toString() });
-      processedRule.walkDecls((decl) => {
-        decl.important = true;
-      });
-
-      rule.replaceWith(processedRule);
-    });
-
-    const equivalentRule = sanitizedRules.find(
-      (r) => r instanceof AtRule && r.params === sanitizedAtRule.params,
-    );
-
-    if (equivalentRule) {
-      equivalentRule.append(sanitizedAtRule.nodes);
-    } else {
-      sanitizedRules.push(sanitizedAtRule);
-    }
-  });
-
-  // Process top-level rules
-  root.walkRules((rule) => {
-    if (rule.parent && rule.parent.type !== 'root') return;
-
-    const selectorRoot = selectorProcessor.astSync(rule.selector);
-
-    let hasPseudoSelector = false as boolean;
-    selectorRoot.walkPseudos(() => {
-      hasPseudoSelector = true;
-    });
-
-    if (!hasPseudoSelector) return;
-
-    selectorRoot.walkClasses((className) => {
-      nonInlinableClasses.push(className.value);
-      sanitizeSelectorClassName(className);
-    });
-
-    if (hasPseudoSelector) {
-      const processedRule = rule.clone({ selector: selectorRoot.toString() });
-      processedRule.walkDecls((decl) => {
-        decl.important = true;
-      });
-
-      sanitizedRules.push(processedRule);
-    }
-  });
-
-  return {
-    nonInlinableClasses,
-    sanitizedRules,
-  };
-};
-
-const sanitizeSelectorClassName = (className: selectorParser.ClassName) => {
-  className.replaceWith(
-    className.clone({
-      value: sanitizeClassName(className.value),
-    }),
-  );
-};
diff --git a/packages/tailwind/src/utils/css/sanitize-non-inlinable-rules.spec.ts b/packages/tailwind/src/utils/css/sanitize-non-inlinable-rules.spec.ts
new file mode 100644
index 0000000000..795bd62a62
--- /dev/null
+++ b/packages/tailwind/src/utils/css/sanitize-non-inlinable-rules.spec.ts
@@ -0,0 +1,45 @@
+import { generate } from 'css-tree';
+import { setupTailwind } from '../tailwindcss/setup-tailwind';
+import { sanitizeNonInlinableRules } from './sanitize-non-inlinable-rules';
+
+describe('sanitizeNonInlinableRules()', () => {
+  it('inlines rules that can be inlined', async () => {
+    const tailwind = await setupTailwind({});
+    tailwind.addUtilities(['bg-gray-900', 'text-red-300', 'text-lg']);
+    const stylesheet = tailwind.getStyleSheet();
+
+    sanitizeNonInlinableRules(stylesheet);
+    expect(generate(stylesheet)).toMatchSnapshot();
+  });
+
+  it('handles CSS nesting in hover pseudo styles', async () => {
+    const tailwind = await setupTailwind({});
+    tailwind.addUtilities([
+      'hover:text-sky-600',
+      'sm:focus:outline-none',
+      'md:hover:bg-gray-100',
+      'lg:focus:underline',
+    ]);
+
+    const stylesheet = tailwind.getStyleSheet();
+
+    sanitizeNonInlinableRules(stylesheet);
+    expect(generate(stylesheet)).toMatchSnapshot();
+  });
+
+  it('supports basic media query rules', async () => {
+    const tailwind = await setupTailwind({});
+    tailwind.addUtilities([
+      'sm:mx-auto',
+      'sm:max-w-lg',
+      'sm:rounded-lg',
+      'md:px-10',
+      'md:py-12',
+    ]);
+    const stylesheet = tailwind.getStyleSheet();
+
+    sanitizeNonInlinableRules(stylesheet);
+
+    expect(generate(stylesheet)).toMatchSnapshot();
+  });
+});
diff --git a/packages/tailwind/src/utils/css/sanitize-non-inlinable-rules.ts b/packages/tailwind/src/utils/css/sanitize-non-inlinable-rules.ts
new file mode 100644
index 0000000000..588234b67f
--- /dev/null
+++ b/packages/tailwind/src/utils/css/sanitize-non-inlinable-rules.ts
@@ -0,0 +1,35 @@
+import { type CssNode, string, walk } from 'css-tree';
+import { sanitizeClassName } from '../compatibility/sanitize-class-name';
+import { isRuleInlinable } from './is-rule-inlinable';
+
+/**
+ * This function goes through a few steps to ensure the best email client support and
+ * to ensure that media queries and pseudo classes are applied correctly alongside
+ * the inline styles.
+ *
+ * What it does:
+ * 1. Converts all declarations in all rules into important ones
+ * 2. Sanitizes class selectors of all non-inlinable rules
+ */
+export function sanitizeNonInlinableRules(node: CssNode) {
+  walk(node, {
+    visit: 'Rule',
+    enter(rule) {
+      if (!isRuleInlinable(rule)) {
+        walk(rule.prelude, (node) => {
+          if (node.type === 'ClassSelector') {
+            const unescapedClassName = string.decode(node.name);
+            node.name = sanitizeClassName(unescapedClassName);
+          }
+        });
+
+        walk(rule, {
+          visit: 'Declaration',
+          enter(declaration) {
+            declaration.important = true;
+          },
+        });
+      }
+    },
+  });
+}
diff --git a/packages/tailwind/src/utils/css/unwrap-value.ts b/packages/tailwind/src/utils/css/unwrap-value.ts
new file mode 100644
index 0000000000..81fc7ffa93
--- /dev/null
+++ b/packages/tailwind/src/utils/css/unwrap-value.ts
@@ -0,0 +1,9 @@
+import type { Raw, Value } from 'css-tree';
+
+export function unwrapValue(value: Value | Raw) {
+  if (value.type === 'Value' && value.children.size === 1) {
+    return value.children.first ?? value;
+  }
+
+  return value;
+}
diff --git a/packages/tailwind/src/utils/react/is-component.ts b/packages/tailwind/src/utils/react/is-component.ts
index bb17cfafa0..34746bbc81 100644
--- a/packages/tailwind/src/utils/react/is-component.ts
+++ b/packages/tailwind/src/utils/react/is-component.ts
@@ -1,9 +1,36 @@
+import { Body } from '@react-email/body';
+import { Button } from '@react-email/button';
+import { CodeBlock } from '@react-email/code-block';
+import { CodeInline } from '@react-email/code-inline';
+import { Container } from '@react-email/container';
+import { Heading } from '@react-email/heading';
+import { Hr } from '@react-email/hr';
+import { Img } from '@react-email/img';
+import { Link } from '@react-email/link';
+import { Preview } from '@react-email/preview';
+import { Text } from '@react-email/text';
+
+const componentsToTreatAsElements: React.ReactElement['type'][] = [
+  Body,
+  Button,
+  CodeBlock,
+  CodeInline,
+  Container,
+  Heading,
+  Hr,
+  Img,
+  Link,
+  Preview,
+  Text,
+];
+
 export const isComponent = (
   element: React.ReactElement,
 ): element is React.ReactElement<unknown, React.FC<unknown>> => {
   return (
-    typeof element.type === 'function' ||
-    // @ts-expect-error - we know this is a component that may have a render function
-    element.type.render !== undefined
+    (typeof element.type === 'function' ||
+      // @ts-expect-error - we know this is a component that may have a render function
+      element.type.render !== undefined) &&
+    !componentsToTreatAsElements.includes(element.type)
   );
 };
diff --git a/packages/tailwind/src/utils/react/map-react-tree.ts b/packages/tailwind/src/utils/react/map-react-tree.ts
index 492dcac986..8e459434bf 100644
--- a/packages/tailwind/src/utils/react/map-react-tree.ts
+++ b/packages/tailwind/src/utils/react/map-react-tree.ts
@@ -31,9 +31,7 @@ export function mapReactTree(
 
       if (
         React.isValidElement<{ children?: React.ReactNode }>(processed) &&
-        (typeof processed.type === 'function' ||
-          // @ts-expect-error - we know this is a component that may have a render function
-          processed.type.render)
+        isComponent(processed)
       ) {
         const OriginalComponent =
           typeof processed.type === 'object'
diff --git a/packages/tailwind/src/utils/tailwindcss/__snapshots__/setup-tailwind.spec.ts.snap b/packages/tailwind/src/utils/tailwindcss/__snapshots__/setup-tailwind.spec.ts.snap
index bab4404dbb..9e366e86bb 100644
--- a/packages/tailwind/src/utils/tailwindcss/__snapshots__/setup-tailwind.spec.ts.snap
+++ b/packages/tailwind/src/utils/tailwindcss/__snapshots__/setup-tailwind.spec.ts.snap
@@ -1,16 +1,5 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`tailwind's generateRootForClasses() 1`] = `
-".text-red-500 {
-    color: rgb(239 68 68 / 1)
-}
-  @media (min-width: 640px) {
-    .sm\\:bg-blue-300 {
-        background-color: rgb(147 197 253 / 1)
-    }
-}
-  .bg-slate-900 {
-    background-color: rgb(15 23 42 / 1)
-}
-"
-`;
+exports[`setupTailwind() and addUtilities() 1`] = `"/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;@layer theme{:root,:host{--color-red-500: oklch(63.7% 0.237 25.331);--color-blue-300: oklch(80.9% 0.105 251.813);--color-slate-900: oklch(20.8% 0.042 265.755)}}@layer utilities{.bg-slate-900{background-color:var(--color-slate-900)}.text-red-500{color:var(--color-red-500)}.sm\\:bg-blue-300{@media (width>=40rem){background-color:var(--color-blue-300)}}}"`;
+
+exports[`setupTailwind() and addUtilities() 2`] = `"/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;@layer theme{:root,:host{--color-red-100: oklch(93.6% 0.032 17.717);--color-red-500: oklch(63.7% 0.237 25.331);--color-blue-300: oklch(80.9% 0.105 251.813);--color-slate-900: oklch(20.8% 0.042 265.755)}}@layer utilities{.bg-red-100{background-color:var(--color-red-100)}.bg-slate-900{background-color:var(--color-slate-900)}.text-red-500{color:var(--color-red-500)}.sm\\:bg-blue-300{@media (width>=40rem){background-color:var(--color-blue-300)}}}"`;
diff --git a/packages/tailwind/src/utils/tailwindcss/clone-element-with-inlined-styles.ts b/packages/tailwind/src/utils/tailwindcss/clone-element-with-inlined-styles.ts
index e73390abb8..f2b7a66c94 100644
--- a/packages/tailwind/src/utils/tailwindcss/clone-element-with-inlined-styles.ts
+++ b/packages/tailwind/src/utils/tailwindcss/clone-element-with-inlined-styles.ts
@@ -1,61 +1,51 @@
-import type { Node } from 'postcss';
+import type { Rule } from 'css-tree';
 import React from 'react';
 import type { EmailElementProps } from '../../tailwind';
 import { sanitizeClassName } from '../compatibility/sanitize-class-name';
+import type { CustomProperties } from '../css/get-custom-properties';
 import { makeInlineStylesFor } from '../css/make-inline-styles-for';
-import { sanitizeDeclarations } from '../css/sanitize-declarations';
-import { sanitizeNonInlinableClasses } from '../css/sanitize-non-inlinable-classes';
 import { isComponent } from '../react/is-component';
-import type { setupTailwind } from './setup-tailwind';
 
-export const cloneElementWithInlinedStyles = (
+export function cloneElementWithInlinedStyles(
   element: React.ReactElement<EmailElementProps>,
-  tailwind: ReturnType<typeof setupTailwind>,
-) => {
+  inlinableRules: Map<string, Rule>,
+  nonInlinableRules: Map<string, Rule>,
+  customProperties: CustomProperties,
+) {
   const propsToOverwrite: Partial<EmailElementProps> = {};
 
-  let nonInlinableClasses: string[] = [];
-  let nonInlineStyleNodes: Node[] = [];
+  if (element.props.className && !isComponent(element)) {
+    const classes = element.props.className.trim().split(/\s+/);
 
-  if (element.props.className) {
-    const rootForClasses = tailwind.generateRootForClasses(
-      element.props.className.split(' '),
-    );
-    sanitizeDeclarations(rootForClasses);
+    const residualClasses: string[] = [];
 
-    ({
-      sanitizedRules: nonInlineStyleNodes,
-      nonInlinableClasses: nonInlinableClasses,
-    } = sanitizeNonInlinableClasses(rootForClasses));
+    const rules: Rule[] = [];
+    for (const className of classes) {
+      const rule = inlinableRules.get(className);
+      if (rule) {
+        rules.push(rule);
+      } else {
+        residualClasses.push(className);
+      }
+    }
 
-    const { styles, residualClassName } = makeInlineStylesFor(
-      element.props.className,
-      rootForClasses,
-    );
+    const styles = makeInlineStylesFor(rules, customProperties);
     propsToOverwrite.style = {
       ...styles,
       ...element.props.style,
     };
 
-    if (!isComponent(element)) {
-      if (residualClassName.trim().length > 0) {
-        propsToOverwrite.className = residualClassName;
-
-        /*
-          We sanitize only the class names of Tailwind classes that we are not going to inline
-          to avoid unpredictable behavior on the user's code. If we did sanitize all classes
-          a user-defined class could end up also being sanitized which would lead to unexpected
-          behavior and bugs that are hard to track.
-        */
-        for (const singleClass of nonInlinableClasses) {
-          propsToOverwrite.className = propsToOverwrite.className.replace(
-            singleClass,
-            sanitizeClassName(singleClass),
-          );
-        }
-      } else {
-        propsToOverwrite.className = undefined;
-      }
+    if (residualClasses.length > 0) {
+      propsToOverwrite.className = residualClasses
+        .map((className) => {
+          if (nonInlinableRules.has(className)) {
+            return sanitizeClassName(className);
+          }
+          return className;
+        })
+        .join(' ');
+    } else {
+      propsToOverwrite.className = undefined;
     }
   }
 
@@ -64,14 +54,5 @@ export const cloneElementWithInlinedStyles = (
     ...propsToOverwrite,
   };
 
-  return {
-    elementWithInlinedStyles: React.cloneElement(
-      element,
-      newProps,
-      newProps.children,
-    ),
-
-    nonInlinableClasses,
-    nonInlineStyleNodes,
-  };
-};
+  return React.cloneElement(element, newProps, newProps.children);
+}
diff --git a/packages/tailwind/src/utils/tailwindcss/setup-tailwind-context.ts b/packages/tailwind/src/utils/tailwindcss/setup-tailwind-context.ts
deleted file mode 100644
index fa8e672fda..0000000000
--- a/packages/tailwind/src/utils/tailwindcss/setup-tailwind-context.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { createContext } from 'tailwindcss/lib/lib/setupContextUtils';
-import resolveConfig from 'tailwindcss/resolveConfig';
-import type { TailwindConfig } from '../../tailwind';
-
-export const setupTailwindContext = (config: TailwindConfig) => {
-  return createContext(
-    resolveConfig({
-      ...config,
-      content: [],
-      corePlugins: {
-        preflight: false,
-      },
-    }),
-  );
-};
diff --git a/packages/tailwind/src/utils/tailwindcss/setup-tailwind.spec.ts b/packages/tailwind/src/utils/tailwindcss/setup-tailwind.spec.ts
index 2e08dceee3..26924513b0 100644
--- a/packages/tailwind/src/utils/tailwindcss/setup-tailwind.spec.ts
+++ b/packages/tailwind/src/utils/tailwindcss/setup-tailwind.spec.ts
@@ -1,15 +1,14 @@
+import { generate } from 'css-tree';
 import { setupTailwind } from './setup-tailwind';
 
-test("tailwind's generateRootForClasses()", () => {
-  const tailwind = setupTailwind({});
-
-  expect(
-    tailwind
-      .generateRootForClasses([
-        'text-red-500',
-        'sm:bg-blue-300',
-        'bg-slate-900',
-      ])
-      .toString(),
-  ).toMatchSnapshot();
+test('setupTailwind() and addUtilities()', async () => {
+  const { addUtilities, getStyleSheet } = await setupTailwind({});
+
+  addUtilities(['text-red-500', 'sm:bg-blue-300', 'bg-slate-900']);
+
+  expect(generate(getStyleSheet())).toMatchSnapshot();
+
+  addUtilities(['bg-red-100']);
+
+  expect(generate(getStyleSheet())).toMatchSnapshot();
 });
diff --git a/packages/tailwind/src/utils/tailwindcss/setup-tailwind.ts b/packages/tailwind/src/utils/tailwindcss/setup-tailwind.ts
index 6871b7ad6e..8daf08b47e 100644
--- a/packages/tailwind/src/utils/tailwindcss/setup-tailwind.ts
+++ b/packages/tailwind/src/utils/tailwindcss/setup-tailwind.ts
@@ -1,58 +1,82 @@
-import type { Rule } from 'postcss';
-import { parse } from 'postcss';
-import collapseAdjacentRules from 'tailwindcss/lib/lib/collapseAdjacentRules';
-import collapseDuplicateDeclarations from 'tailwindcss/lib/lib/collapseDuplicateDeclarations';
-import evaluateTailwindFunctions from 'tailwindcss/lib/lib/evaluateTailwindFunctions';
-import expandApplyAtRules from 'tailwindcss/lib/lib/expandApplyAtRules';
-import expandTailwindAtRules from 'tailwindcss/lib/lib/expandTailwindAtRules';
-import { generateRules as rawGenerateRules } from 'tailwindcss/lib/lib/generateRules';
-import partitionApplyAtRules from 'tailwindcss/lib/lib/partitionApplyAtRules';
-import resolveDefaultsAtRules from 'tailwindcss/lib/lib/resolveDefaultsAtRules';
-import substituteScreenAtRules from 'tailwindcss/lib/lib/substituteScreenAtRules';
+import { type CssNode, parse } from 'css-tree';
+import { compile } from 'tailwindcss';
 import type { TailwindConfig } from '../../tailwind';
-import { resolveAllCSSVariables } from '../css/resolve-all-css-variables';
-import { setupTailwindContext } from './setup-tailwind-context';
-
-const tailwindAtRulesRoot = parse(
-  `
-  @tailwind base;
-  @tailwind components;
-`,
-).root();
-
-export function setupTailwind(config: TailwindConfig) {
-  // See https://github.com/resend/react-email/issues/1907#issuecomment-2668720428
-  if ('safelist' in config) {
-    console.warn(
-      'The `safelist` option is not supported in the `Tailwind` component, it will not change any behavior.',
-    );
-    delete config.safelist;
-  }
-  const tailwindContext = setupTailwindContext(config);
-  return {
-    generateRootForClasses: (classes: string[]) => {
-      tailwindContext.candidateRuleCache = new Map();
-      const bigIntRuleTuples: [bigint, Rule][] = rawGenerateRules(
-        new Set(classes),
-        tailwindContext,
+import indexCss from './tailwind-stylesheets/index';
+import preflightCss from './tailwind-stylesheets/preflight';
+import themeCss from './tailwind-stylesheets/theme';
+import utilitiesCss from './tailwind-stylesheets/utilities';
+
+export type TailwindSetup = Awaited<ReturnType<typeof setupTailwind>>;
+
+export async function setupTailwind(config: TailwindConfig) {
+  const baseCss = `
+@layer theme, base, components, utilities;
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities);
+@config;
+`;
+  const compiler = await compile(baseCss, {
+    async loadModule(id, base, resourceHint) {
+      if (resourceHint === 'config') {
+        return {
+          path: id,
+          base: base,
+          module: config,
+        };
+      }
+
+      throw new Error(
+        `NO-OP: should we implement support for ${resourceHint}?`,
+      );
+    },
+    polyfills: 0, // All
+    async loadStylesheet(id, base) {
+      if (id === 'tailwindcss') {
+        return {
+          base,
+          path: 'tailwindcss/index.css',
+          content: indexCss,
+        };
+      }
+
+      if (id === 'tailwindcss/preflight.css') {
+        return {
+          base,
+          path: id,
+          content: preflightCss,
+        };
+      }
+
+      if (id === 'tailwindcss/theme.css') {
+        return {
+          base,
+          path: id,
+          content: themeCss,
+        };
+      }
+
+      if (id === 'tailwindcss/utilities.css') {
+        return {
+          base,
+          path: id,
+          content: utilitiesCss,
+        };
+      }
+
+      throw new Error(
+        'stylesheet not supported, you can only import the ones from tailwindcss',
       );
+    },
+  });
 
-      const root = tailwindAtRulesRoot
-        .clone()
-        .append(...bigIntRuleTuples.map(([, rule]) => rule));
-      partitionApplyAtRules()(root);
-      expandTailwindAtRules(tailwindContext)(root);
-      partitionApplyAtRules()(root);
-      expandApplyAtRules(tailwindContext)(root);
-      evaluateTailwindFunctions(tailwindContext)(root);
-      substituteScreenAtRules(tailwindContext)(root);
-      resolveDefaultsAtRules(tailwindContext)(root);
-      collapseAdjacentRules()(root);
-      collapseDuplicateDeclarations()(root);
-
-      resolveAllCSSVariables(root);
-
-      return root;
+  let css: string = baseCss;
+
+  return {
+    addUtilities: function addUtilities(candidates: string[]): void {
+      css = compiler.build(candidates);
+    },
+    getStyleSheet: function getCss(): CssNode {
+      return parse(css);
     },
   };
 }
diff --git a/packages/tailwind/src/utils/tailwindcss/tailwind-internals.d.ts b/packages/tailwind/src/utils/tailwindcss/tailwind-internals.d.ts
deleted file mode 100644
index 61f48ab363..0000000000
--- a/packages/tailwind/src/utils/tailwindcss/tailwind-internals.d.ts
+++ /dev/null
@@ -1,127 +0,0 @@
-declare module "tailwindcss/lib/lib/evaluateTailwindFunctions" {
-  import type { JitContext } from "tailwindcss/lib/lib/setupContextUtils";
-  import type { Root } from "postcss";
-
-  export default function evaluateTailwindFunctions(
-    context: JITContext,
-  ): (root: Root) => void;
-}
-
-declare module "tailwindcss/lib/lib/resolveDefaultsAtRules" {
-  import type { JitContext } from "tailwindcss/lib/lib/setupContextUtils";
-  import type { Root } from "postcss";
-
-  export default function expandApplyAtRules(
-    context: JITContext,
-  ): (root: Root) => void;
-}
-
-declare module "tailwindcss/lib/lib/partitionApplyAtRules" {
-  import type { Root } from "postcss";
-
-  export default function partitionApplyAtRules(): (root: Root) => void;
-}
-
-declare module "tailwindcss/lib/lib/substituteScreenAtRules" {
-  import type { Root } from "postcss";
-
-  export default function substituteScreenAtRules(
-    context: JITContext,
-  ): (root: Root) => void;
-}
-
-declare module "tailwindcss/lib/lib/resolveDefaultsAtRules" {
-  import type { JitContext } from "tailwindcss/lib/lib/setupContextUtils";
-  import type { Root } from "postcss";
-
-  export default function expandApplyAtRules(
-    context: JITContext,
-  ): (root: Root) => void;
-}
-
-declare module "tailwindcss/lib/lib/expandApplyAtRules" {
-  import type { JitContext } from "tailwindcss/lib/lib/setupContextUtils";
-  import type { Root } from "postcss";
-
-  export default function expandApplyAtRules(
-    context: JITContext,
-  ): (root: Root) => void;
-}
-
-declare module "tailwindcss/lib/lib/expandTailwindAtRules" {
-  import type { JitContext } from "tailwindcss/lib/lib/setupContextUtils";
-  import type { Root } from "postcss";
-
-  export default async function expandTailwindAtRules(
-    context: JITContext,
-  ): (root: Root) => Promise<void>;
-}
-
-declare module "tailwindcss/lib/lib/collapseAdjacentRules" {
-  import type { JitContext } from "tailwindcss/lib/lib/setupContextUtils";
-  import type { Root } from "postcss";
-
-  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 function collapseDuplicateDeclarations(): (root: Root) => void;
-}
-
-declare module "tailwindcss/lib/lib/generateRules" {
-  import type { JitContext } from "tailwindcss/lib/lib/setupContextUtils";
-  import type { Rule } from "postcss";
-
-  export function generateRules(
-    classNames: Set<string>,
-    context: JITContext,
-  ): [bigint, Rule][];
-}
-
-// taken from https://github.com/vinicoder/tw-to-css/blob/main/types.d.ts
-// thanks vinicoder!
-declare module "tailwindcss/lib/lib/setupContextUtils" {
-  import type { Container, Node } from "postcss";
-  import type { Config } from "tailwindcss";
-  import type resolveConfig from "tailwindcss/resolveConfig";
-
-  interface ChangedContent {
-    content: string;
-    extension?: string;
-  }
-
-  interface Api {
-    container: Container;
-    separator: string;
-    format: (def: string) => void;
-    wrap: (rule: Container) => void;
-  }
-
-  type VariantPreview = string;
-
-  type VariantFn = [number, (api: Api) => VariantPreview | undefined];
-
-  type VariantName = string;
-
-  export interface JitContext {
-    changedContent: ChangedContent[];
-    ruleCache: Set<unknown>;
-    candidateRuleCache: Map<unknown, unknown>;
-    classCache: Map<unknown, unknown>;
-    applyClassCache: Map<unknown, unknown>;
-    notClassCache: Set<unknown>;
-    postCssNodeCache: Map<unknown, unknown>;
-
-    getClassList: () => string[];
-    tailwindConfig: TailwindConfig;
-    variantMap: Map<VariantName, VariantFn[]>;
-  }
-
-  export function createContext(
-    config: ReturnType<typeof resolveConfig>,
-    changedContent?: ChangedContent[],
-  ): JitContext;
-}
diff --git a/packages/tailwind/src/utils/tailwindcss/tailwind-stylesheets/index.ts b/packages/tailwind/src/utils/tailwindcss/tailwind-stylesheets/index.ts
new file mode 100644
index 0000000000..dd40cee3d8
--- /dev/null
+++ b/packages/tailwind/src/utils/tailwindcss/tailwind-stylesheets/index.ts
@@ -0,0 +1,900 @@
+const css = `
+@layer theme, base, components, utilities;
+
+@layer theme {
+  @theme default {
+    --font-sans:
+      ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+    --font-mono:
+      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+      "Courier New", monospace;
+
+    --color-red-50: oklch(97.1% 0.013 17.38);
+    --color-red-100: oklch(93.6% 0.032 17.717);
+    --color-red-200: oklch(88.5% 0.062 18.334);
+    --color-red-300: oklch(80.8% 0.114 19.571);
+    --color-red-400: oklch(70.4% 0.191 22.216);
+    --color-red-500: oklch(63.7% 0.237 25.331);
+    --color-red-600: oklch(57.7% 0.245 27.325);
+    --color-red-700: oklch(50.5% 0.213 27.518);
+    --color-red-800: oklch(44.4% 0.177 26.899);
+    --color-red-900: oklch(39.6% 0.141 25.723);
+    --color-red-950: oklch(25.8% 0.092 26.042);
+
+    --color-orange-50: oklch(98% 0.016 73.684);
+    --color-orange-100: oklch(95.4% 0.038 75.164);
+    --color-orange-200: oklch(90.1% 0.076 70.697);
+    --color-orange-300: oklch(83.7% 0.128 66.29);
+    --color-orange-400: oklch(75% 0.183 55.934);
+    --color-orange-500: oklch(70.5% 0.213 47.604);
+    --color-orange-600: oklch(64.6% 0.222 41.116);
+    --color-orange-700: oklch(55.3% 0.195 38.402);
+    --color-orange-800: oklch(47% 0.157 37.304);
+    --color-orange-900: oklch(40.8% 0.123 38.172);
+    --color-orange-950: oklch(26.6% 0.079 36.259);
+
+    --color-amber-50: oklch(98.7% 0.022 95.277);
+    --color-amber-100: oklch(96.2% 0.059 95.617);
+    --color-amber-200: oklch(92.4% 0.12 95.746);
+    --color-amber-300: oklch(87.9% 0.169 91.605);
+    --color-amber-400: oklch(82.8% 0.189 84.429);
+    --color-amber-500: oklch(76.9% 0.188 70.08);
+    --color-amber-600: oklch(66.6% 0.179 58.318);
+    --color-amber-700: oklch(55.5% 0.163 48.998);
+    --color-amber-800: oklch(47.3% 0.137 46.201);
+    --color-amber-900: oklch(41.4% 0.112 45.904);
+    --color-amber-950: oklch(27.9% 0.077 45.635);
+
+    --color-yellow-50: oklch(98.7% 0.026 102.212);
+    --color-yellow-100: oklch(97.3% 0.071 103.193);
+    --color-yellow-200: oklch(94.5% 0.129 101.54);
+    --color-yellow-300: oklch(90.5% 0.182 98.111);
+    --color-yellow-400: oklch(85.2% 0.199 91.936);
+    --color-yellow-500: oklch(79.5% 0.184 86.047);
+    --color-yellow-600: oklch(68.1% 0.162 75.834);
+    --color-yellow-700: oklch(55.4% 0.135 66.442);
+    --color-yellow-800: oklch(47.6% 0.114 61.907);
+    --color-yellow-900: oklch(42.1% 0.095 57.708);
+    --color-yellow-950: oklch(28.6% 0.066 53.813);
+
+    --color-lime-50: oklch(98.6% 0.031 120.757);
+    --color-lime-100: oklch(96.7% 0.067 122.328);
+    --color-lime-200: oklch(93.8% 0.127 124.321);
+    --color-lime-300: oklch(89.7% 0.196 126.665);
+    --color-lime-400: oklch(84.1% 0.238 128.85);
+    --color-lime-500: oklch(76.8% 0.233 130.85);
+    --color-lime-600: oklch(64.8% 0.2 131.684);
+    --color-lime-700: oklch(53.2% 0.157 131.589);
+    --color-lime-800: oklch(45.3% 0.124 130.933);
+    --color-lime-900: oklch(40.5% 0.101 131.063);
+    --color-lime-950: oklch(27.4% 0.072 132.109);
+
+    --color-green-50: oklch(98.2% 0.018 155.826);
+    --color-green-100: oklch(96.2% 0.044 156.743);
+    --color-green-200: oklch(92.5% 0.084 155.995);
+    --color-green-300: oklch(87.1% 0.15 154.449);
+    --color-green-400: oklch(79.2% 0.209 151.711);
+    --color-green-500: oklch(72.3% 0.219 149.579);
+    --color-green-600: oklch(62.7% 0.194 149.214);
+    --color-green-700: oklch(52.7% 0.154 150.069);
+    --color-green-800: oklch(44.8% 0.119 151.328);
+    --color-green-900: oklch(39.3% 0.095 152.535);
+    --color-green-950: oklch(26.6% 0.065 152.934);
+
+    --color-emerald-50: oklch(97.9% 0.021 166.113);
+    --color-emerald-100: oklch(95% 0.052 163.051);
+    --color-emerald-200: oklch(90.5% 0.093 164.15);
+    --color-emerald-300: oklch(84.5% 0.143 164.978);
+    --color-emerald-400: oklch(76.5% 0.177 163.223);
+    --color-emerald-500: oklch(69.6% 0.17 162.48);
+    --color-emerald-600: oklch(59.6% 0.145 163.225);
+    --color-emerald-700: oklch(50.8% 0.118 165.612);
+    --color-emerald-800: oklch(43.2% 0.095 166.913);
+    --color-emerald-900: oklch(37.8% 0.077 168.94);
+    --color-emerald-950: oklch(26.2% 0.051 172.552);
+
+    --color-teal-50: oklch(98.4% 0.014 180.72);
+    --color-teal-100: oklch(95.3% 0.051 180.801);
+    --color-teal-200: oklch(91% 0.096 180.426);
+    --color-teal-300: oklch(85.5% 0.138 181.071);
+    --color-teal-400: oklch(77.7% 0.152 181.912);
+    --color-teal-500: oklch(70.4% 0.14 182.503);
+    --color-teal-600: oklch(60% 0.118 184.704);
+    --color-teal-700: oklch(51.1% 0.096 186.391);
+    --color-teal-800: oklch(43.7% 0.078 188.216);
+    --color-teal-900: oklch(38.6% 0.063 188.416);
+    --color-teal-950: oklch(27.7% 0.046 192.524);
+
+    --color-cyan-50: oklch(98.4% 0.019 200.873);
+    --color-cyan-100: oklch(95.6% 0.045 203.388);
+    --color-cyan-200: oklch(91.7% 0.08 205.041);
+    --color-cyan-300: oklch(86.5% 0.127 207.078);
+    --color-cyan-400: oklch(78.9% 0.154 211.53);
+    --color-cyan-500: oklch(71.5% 0.143 215.221);
+    --color-cyan-600: oklch(60.9% 0.126 221.723);
+    --color-cyan-700: oklch(52% 0.105 223.128);
+    --color-cyan-800: oklch(45% 0.085 224.283);
+    --color-cyan-900: oklch(39.8% 0.07 227.392);
+    --color-cyan-950: oklch(30.2% 0.056 229.695);
+
+    --color-sky-50: oklch(97.7% 0.013 236.62);
+    --color-sky-100: oklch(95.1% 0.026 236.824);
+    --color-sky-200: oklch(90.1% 0.058 230.902);
+    --color-sky-300: oklch(82.8% 0.111 230.318);
+    --color-sky-400: oklch(74.6% 0.16 232.661);
+    --color-sky-500: oklch(68.5% 0.169 237.323);
+    --color-sky-600: oklch(58.8% 0.158 241.966);
+    --color-sky-700: oklch(50% 0.134 242.749);
+    --color-sky-800: oklch(44.3% 0.11 240.79);
+    --color-sky-900: oklch(39.1% 0.09 240.876);
+    --color-sky-950: oklch(29.3% 0.066 243.157);
+
+    --color-blue-50: oklch(97% 0.014 254.604);
+    --color-blue-100: oklch(93.2% 0.032 255.585);
+    --color-blue-200: oklch(88.2% 0.059 254.128);
+    --color-blue-300: oklch(80.9% 0.105 251.813);
+    --color-blue-400: oklch(70.7% 0.165 254.624);
+    --color-blue-500: oklch(62.3% 0.214 259.815);
+    --color-blue-600: oklch(54.6% 0.245 262.881);
+    --color-blue-700: oklch(48.8% 0.243 264.376);
+    --color-blue-800: oklch(42.4% 0.199 265.638);
+    --color-blue-900: oklch(37.9% 0.146 265.522);
+    --color-blue-950: oklch(28.2% 0.091 267.935);
+
+    --color-indigo-50: oklch(96.2% 0.018 272.314);
+    --color-indigo-100: oklch(93% 0.034 272.788);
+    --color-indigo-200: oklch(87% 0.065 274.039);
+    --color-indigo-300: oklch(78.5% 0.115 274.713);
+    --color-indigo-400: oklch(67.3% 0.182 276.935);
+    --color-indigo-500: oklch(58.5% 0.233 277.117);
+    --color-indigo-600: oklch(51.1% 0.262 276.966);
+    --color-indigo-700: oklch(45.7% 0.24 277.023);
+    --color-indigo-800: oklch(39.8% 0.195 277.366);
+    --color-indigo-900: oklch(35.9% 0.144 278.697);
+    --color-indigo-950: oklch(25.7% 0.09 281.288);
+
+    --color-violet-50: oklch(96.9% 0.016 293.756);
+    --color-violet-100: oklch(94.3% 0.029 294.588);
+    --color-violet-200: oklch(89.4% 0.057 293.283);
+    --color-violet-300: oklch(81.1% 0.111 293.571);
+    --color-violet-400: oklch(70.2% 0.183 293.541);
+    --color-violet-500: oklch(60.6% 0.25 292.717);
+    --color-violet-600: oklch(54.1% 0.281 293.009);
+    --color-violet-700: oklch(49.1% 0.27 292.581);
+    --color-violet-800: oklch(43.2% 0.232 292.759);
+    --color-violet-900: oklch(38% 0.189 293.745);
+    --color-violet-950: oklch(28.3% 0.141 291.089);
+
+    --color-purple-50: oklch(97.7% 0.014 308.299);
+    --color-purple-100: oklch(94.6% 0.033 307.174);
+    --color-purple-200: oklch(90.2% 0.063 306.703);
+    --color-purple-300: oklch(82.7% 0.119 306.383);
+    --color-purple-400: oklch(71.4% 0.203 305.504);
+    --color-purple-500: oklch(62.7% 0.265 303.9);
+    --color-purple-600: oklch(55.8% 0.288 302.321);
+    --color-purple-700: oklch(49.6% 0.265 301.924);
+    --color-purple-800: oklch(43.8% 0.218 303.724);
+    --color-purple-900: oklch(38.1% 0.176 304.987);
+    --color-purple-950: oklch(29.1% 0.149 302.717);
+
+    --color-fuchsia-50: oklch(97.7% 0.017 320.058);
+    --color-fuchsia-100: oklch(95.2% 0.037 318.852);
+    --color-fuchsia-200: oklch(90.3% 0.076 319.62);
+    --color-fuchsia-300: oklch(83.3% 0.145 321.434);
+    --color-fuchsia-400: oklch(74% 0.238 322.16);
+    --color-fuchsia-500: oklch(66.7% 0.295 322.15);
+    --color-fuchsia-600: oklch(59.1% 0.293 322.896);
+    --color-fuchsia-700: oklch(51.8% 0.253 323.949);
+    --color-fuchsia-800: oklch(45.2% 0.211 324.591);
+    --color-fuchsia-900: oklch(40.1% 0.17 325.612);
+    --color-fuchsia-950: oklch(29.3% 0.136 325.661);
+
+    --color-pink-50: oklch(97.1% 0.014 343.198);
+    --color-pink-100: oklch(94.8% 0.028 342.258);
+    --color-pink-200: oklch(89.9% 0.061 343.231);
+    --color-pink-300: oklch(82.3% 0.12 346.018);
+    --color-pink-400: oklch(71.8% 0.202 349.761);
+    --color-pink-500: oklch(65.6% 0.241 354.308);
+    --color-pink-600: oklch(59.2% 0.249 0.584);
+    --color-pink-700: oklch(52.5% 0.223 3.958);
+    --color-pink-800: oklch(45.9% 0.187 3.815);
+    --color-pink-900: oklch(40.8% 0.153 2.432);
+    --color-pink-950: oklch(28.4% 0.109 3.907);
+
+    --color-rose-50: oklch(96.9% 0.015 12.422);
+    --color-rose-100: oklch(94.1% 0.03 12.58);
+    --color-rose-200: oklch(89.2% 0.058 10.001);
+    --color-rose-300: oklch(81% 0.117 11.638);
+    --color-rose-400: oklch(71.2% 0.194 13.428);
+    --color-rose-500: oklch(64.5% 0.246 16.439);
+    --color-rose-600: oklch(58.6% 0.253 17.585);
+    --color-rose-700: oklch(51.4% 0.222 16.935);
+    --color-rose-800: oklch(45.5% 0.188 13.697);
+    --color-rose-900: oklch(41% 0.159 10.272);
+    --color-rose-950: oklch(27.1% 0.105 12.094);
+
+    --color-slate-50: oklch(98.4% 0.003 247.858);
+    --color-slate-100: oklch(96.8% 0.007 247.896);
+    --color-slate-200: oklch(92.9% 0.013 255.508);
+    --color-slate-300: oklch(86.9% 0.022 252.894);
+    --color-slate-400: oklch(70.4% 0.04 256.788);
+    --color-slate-500: oklch(55.4% 0.046 257.417);
+    --color-slate-600: oklch(44.6% 0.043 257.281);
+    --color-slate-700: oklch(37.2% 0.044 257.287);
+    --color-slate-800: oklch(27.9% 0.041 260.031);
+    --color-slate-900: oklch(20.8% 0.042 265.755);
+    --color-slate-950: oklch(12.9% 0.042 264.695);
+
+    --color-gray-50: oklch(98.5% 0.002 247.839);
+    --color-gray-100: oklch(96.7% 0.003 264.542);
+    --color-gray-200: oklch(92.8% 0.006 264.531);
+    --color-gray-300: oklch(87.2% 0.01 258.338);
+    --color-gray-400: oklch(70.7% 0.022 261.325);
+    --color-gray-500: oklch(55.1% 0.027 264.364);
+    --color-gray-600: oklch(44.6% 0.03 256.802);
+    --color-gray-700: oklch(37.3% 0.034 259.733);
+    --color-gray-800: oklch(27.8% 0.033 256.848);
+    --color-gray-900: oklch(21% 0.034 264.665);
+    --color-gray-950: oklch(13% 0.028 261.692);
+
+    --color-zinc-50: oklch(98.5% 0 0);
+    --color-zinc-100: oklch(96.7% 0.001 286.375);
+    --color-zinc-200: oklch(92% 0.004 286.32);
+    --color-zinc-300: oklch(87.1% 0.006 286.286);
+    --color-zinc-400: oklch(70.5% 0.015 286.067);
+    --color-zinc-500: oklch(55.2% 0.016 285.938);
+    --color-zinc-600: oklch(44.2% 0.017 285.786);
+    --color-zinc-700: oklch(37% 0.013 285.805);
+    --color-zinc-800: oklch(27.4% 0.006 286.033);
+    --color-zinc-900: oklch(21% 0.006 285.885);
+    --color-zinc-950: oklch(14.1% 0.005 285.823);
+
+    --color-neutral-50: oklch(98.5% 0 0);
+    --color-neutral-100: oklch(97% 0 0);
+    --color-neutral-200: oklch(92.2% 0 0);
+    --color-neutral-300: oklch(87% 0 0);
+    --color-neutral-400: oklch(70.8% 0 0);
+    --color-neutral-500: oklch(55.6% 0 0);
+    --color-neutral-600: oklch(43.9% 0 0);
+    --color-neutral-700: oklch(37.1% 0 0);
+    --color-neutral-800: oklch(26.9% 0 0);
+    --color-neutral-900: oklch(20.5% 0 0);
+    --color-neutral-950: oklch(14.5% 0 0);
+
+    --color-stone-50: oklch(98.5% 0.001 106.423);
+    --color-stone-100: oklch(97% 0.001 106.424);
+    --color-stone-200: oklch(92.3% 0.003 48.717);
+    --color-stone-300: oklch(86.9% 0.005 56.366);
+    --color-stone-400: oklch(70.9% 0.01 56.259);
+    --color-stone-500: oklch(55.3% 0.013 58.071);
+    --color-stone-600: oklch(44.4% 0.011 73.639);
+    --color-stone-700: oklch(37.4% 0.01 67.558);
+    --color-stone-800: oklch(26.8% 0.007 34.298);
+    --color-stone-900: oklch(21.6% 0.006 56.043);
+    --color-stone-950: oklch(14.7% 0.004 49.25);
+
+    --color-black: #000;
+    --color-white: #fff;
+
+    --spacing: 0.25rem;
+
+    --breakpoint-sm: 40rem;
+    --breakpoint-md: 48rem;
+    --breakpoint-lg: 64rem;
+    --breakpoint-xl: 80rem;
+    --breakpoint-2xl: 96rem;
+
+    --container-3xs: 16rem;
+    --container-2xs: 18rem;
+    --container-xs: 20rem;
+    --container-sm: 24rem;
+    --container-md: 28rem;
+    --container-lg: 32rem;
+    --container-xl: 36rem;
+    --container-2xl: 42rem;
+    --container-3xl: 48rem;
+    --container-4xl: 56rem;
+    --container-5xl: 64rem;
+    --container-6xl: 72rem;
+    --container-7xl: 80rem;
+
+    --text-xs: 0.75rem;
+    --text-xs--line-height: calc(1 / 0.75);
+    --text-sm: 0.875rem;
+    --text-sm--line-height: calc(1.25 / 0.875);
+    --text-base: 1rem;
+    --text-base--line-height: calc(1.5 / 1);
+    --text-lg: 1.125rem;
+    --text-lg--line-height: calc(1.75 / 1.125);
+    --text-xl: 1.25rem;
+    --text-xl--line-height: calc(1.75 / 1.25);
+    --text-2xl: 1.5rem;
+    --text-2xl--line-height: calc(2 / 1.5);
+    --text-3xl: 1.875rem;
+    --text-3xl--line-height: calc(2.25 / 1.875);
+    --text-4xl: 2.25rem;
+    --text-4xl--line-height: calc(2.5 / 2.25);
+    --text-5xl: 3rem;
+    --text-5xl--line-height: 1;
+    --text-6xl: 3.75rem;
+    --text-6xl--line-height: 1;
+    --text-7xl: 4.5rem;
+    --text-7xl--line-height: 1;
+    --text-8xl: 6rem;
+    --text-8xl--line-height: 1;
+    --text-9xl: 8rem;
+    --text-9xl--line-height: 1;
+
+    --font-weight-thin: 100;
+    --font-weight-extralight: 200;
+    --font-weight-light: 300;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+    --font-weight-extrabold: 800;
+    --font-weight-black: 900;
+
+    --tracking-tighter: -0.05em;
+    --tracking-tight: -0.025em;
+    --tracking-normal: 0em;
+    --tracking-wide: 0.025em;
+    --tracking-wider: 0.05em;
+    --tracking-widest: 0.1em;
+
+    --leading-tight: 1.25;
+    --leading-snug: 1.375;
+    --leading-normal: 1.5;
+    --leading-relaxed: 1.625;
+    --leading-loose: 2;
+
+    --radius-xs: 0.125rem;
+    --radius-sm: 0.25rem;
+    --radius-md: 0.375rem;
+    --radius-lg: 0.5rem;
+    --radius-xl: 0.75rem;
+    --radius-2xl: 1rem;
+    --radius-3xl: 1.5rem;
+    --radius-4xl: 2rem;
+
+    --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
+    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --shadow-md:
+      0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --shadow-lg:
+      0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --shadow-xl:
+      0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+
+    --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);
+    --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);
+    --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);
+
+    --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05);
+    --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
+    --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
+    --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
+    --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
+    --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
+
+    --text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / 0.15);
+    --text-shadow-xs: 0px 1px 1px rgb(0 0 0 / 0.2);
+    --text-shadow-sm:
+      0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075),
+      0px 2px 2px rgb(0 0 0 / 0.075);
+    --text-shadow-md:
+      0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1),
+      0px 2px 4px rgb(0 0 0 / 0.1);
+    --text-shadow-lg:
+      0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1),
+      0px 4px 8px rgb(0 0 0 / 0.1);
+
+    --ease-in: cubic-bezier(0.4, 0, 1, 1);
+    --ease-out: cubic-bezier(0, 0, 0.2, 1);
+    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+
+    --animate-spin: spin 1s linear infinite;
+    --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    --animate-bounce: bounce 1s infinite;
+
+    @keyframes spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+
+    @keyframes ping {
+      75%,
+      100% {
+        transform: scale(2);
+        opacity: 0;
+      }
+    }
+
+    @keyframes pulse {
+      50% {
+        opacity: 0.5;
+      }
+    }
+
+    @keyframes bounce {
+      0%,
+      100% {
+        transform: translateY(-25%);
+        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+      }
+
+      50% {
+        transform: none;
+        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+      }
+    }
+
+    --blur-xs: 4px;
+    --blur-sm: 8px;
+    --blur-md: 12px;
+    --blur-lg: 16px;
+    --blur-xl: 24px;
+    --blur-2xl: 40px;
+    --blur-3xl: 64px;
+
+    --perspective-dramatic: 100px;
+    --perspective-near: 300px;
+    --perspective-normal: 500px;
+    --perspective-midrange: 800px;
+    --perspective-distant: 1200px;
+
+    --aspect-video: 16 / 9;
+
+    --default-transition-duration: 150ms;
+    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    --default-font-family: --theme(--font-sans, initial);
+    --default-font-feature-settings: --theme(
+      --font-sans--font-feature-settings,
+      initial
+    );
+    --default-font-variation-settings: --theme(
+      --font-sans--font-variation-settings,
+      initial
+    );
+    --default-mono-font-family: --theme(--font-mono, initial);
+    --default-mono-font-feature-settings: --theme(
+      --font-mono--font-feature-settings,
+      initial
+    );
+    --default-mono-font-variation-settings: --theme(
+      --font-mono--font-variation-settings,
+      initial
+    );
+  }
+
+  /* Deprecated */
+  @theme default inline reference {
+    --blur: 8px;
+    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+    --drop-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 1px 1px rgb(0 0 0 / 0.06);
+    --radius: 0.25rem;
+    --max-width-prose: 65ch;
+  }
+}
+
+@layer base {
+  /*
+  1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+  2. Remove default margins and padding
+  3. Reset all borders.
+*/
+
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    box-sizing: border-box; /* 1 */
+    margin: 0; /* 2 */
+    padding: 0; /* 2 */
+    border: 0 solid; /* 3 */
+  }
+
+  /*
+  1. Use a consistent sensible line-height in all browsers.
+  2. Prevent adjustments of font size after orientation changes in iOS.
+  3. Use a more readable tab size.
+  4. Use the user's configured \`sans\` font-family by default.
+  5. Use the user's configured \`sans\` font-feature-settings by default.
+  6. Use the user's configured \`sans\` font-variation-settings by default.
+  7. Disable tap highlights on iOS.
+*/
+
+  html,
+  :host {
+    line-height: 1.5; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+    tab-size: 4; /* 3 */
+    font-family: --theme(
+      --default-font-family,
+      ui-sans-serif,
+      system-ui,
+      sans-serif,
+      "Apple Color Emoji",
+      "Segoe UI Emoji",
+      "Segoe UI Symbol",
+      "Noto Color Emoji"
+    ); /* 4 */
+    font-feature-settings: --theme(
+      --default-font-feature-settings,
+      normal
+    ); /* 5 */
+    font-variation-settings: --theme(
+      --default-font-variation-settings,
+      normal
+    ); /* 6 */
+    -webkit-tap-highlight-color: transparent; /* 7 */
+  }
+
+  /*
+  1. Add the correct height in Firefox.
+  2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+  3. Reset the default border style to a 1px solid border.
+*/
+
+  hr {
+    height: 0; /* 1 */
+    color: inherit; /* 2 */
+    border-top-width: 1px; /* 3 */
+  }
+
+  /*
+  Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+  abbr:where([title]) {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+  }
+
+  /*
+  Remove the default font size and weight for headings.
+*/
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+
+  /*
+  Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+  a {
+    color: inherit;
+    -webkit-text-decoration: inherit;
+    text-decoration: inherit;
+  }
+
+  /*
+  Add the correct font weight in Edge and Safari.
+*/
+
+  b,
+  strong {
+    font-weight: bolder;
+  }
+
+  /*
+  1. Use the user's configured \`mono\` font-family by default.
+  2. Use the user's configured \`mono\` font-feature-settings by default.
+  3. Use the user's configured \`mono\` font-variation-settings by default.
+  4. Correct the odd \`em\` font sizing in all browsers.
+*/
+
+  code,
+  kbd,
+  samp,
+  pre {
+    font-family: --theme(
+      --default-mono-font-family,
+      ui-monospace,
+      SFMono-Regular,
+      Menlo,
+      Monaco,
+      Consolas,
+      "Liberation Mono",
+      "Courier New",
+      monospace
+    ); /* 1 */
+    font-feature-settings: --theme(
+      --default-mono-font-feature-settings,
+      normal
+    ); /* 2 */
+    font-variation-settings: --theme(
+      --default-mono-font-variation-settings,
+      normal
+    ); /* 3 */
+    font-size: 1em; /* 4 */
+  }
+
+  /*
+  Add the correct font size in all browsers.
+*/
+
+  small {
+    font-size: 80%;
+  }
+
+  /*
+  Prevent \`sub\` and \`sup\` elements from affecting the line height in all browsers.
+*/
+
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+
+  sub {
+    bottom: -0.25em;
+  }
+
+  sup {
+    top: -0.5em;
+  }
+
+  /*
+  1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+  2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+  3. Remove gaps between table borders by default.
+*/
+
+  table {
+    text-indent: 0; /* 1 */
+    border-color: inherit; /* 2 */
+    border-collapse: collapse; /* 3 */
+  }
+
+  /*
+  Use the modern Firefox focus style for all focusable elements.
+*/
+
+  :-moz-focusring {
+    outline: auto;
+  }
+
+  /*
+  Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+  progress {
+    vertical-align: baseline;
+  }
+
+  /*
+  Add the correct display in Chrome and Safari.
+*/
+
+  summary {
+    display: list-item;
+  }
+
+  /*
+  Make lists unstyled by default.
+*/
+
+  ol,
+  ul,
+  menu {
+    list-style: none;
+  }
+
+  /*
+  1. Make replaced elements \`display: block\` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+  2. Add \`vertical - align: middle\` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+      This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+  img,
+  svg,
+  video,
+  canvas,
+  audio,
+  iframe,
+  embed,
+  object {
+    display: block; /* 1 */
+    vertical-align: middle; /* 2 */
+  }
+
+  /*
+  Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+  img,
+  video {
+    max-width: 100%;
+    height: auto;
+  }
+
+  /*
+  1. Inherit font styles in all browsers.
+  2. Remove border radius in all browsers.
+  3. Remove background color in all browsers.
+  4. Ensure consistent opacity for disabled states in all browsers.
+*/
+
+  button,
+  input,
+  select,
+  optgroup,
+  textarea,
+  ::file-selector-button {
+    font: inherit; /* 1 */
+    font-feature-settings: inherit; /* 1 */
+    font-variation-settings: inherit; /* 1 */
+    letter-spacing: inherit; /* 1 */
+    color: inherit; /* 1 */
+    border-radius: 0; /* 2 */
+    background-color: transparent; /* 3 */
+    opacity: 1; /* 4 */
+  }
+
+  /*
+  Restore default font weight.
+*/
+
+  :where(select:is([multiple], [size])) optgroup {
+    font-weight: bolder;
+  }
+
+  /*
+  Restore indentation.
+*/
+
+  :where(select:is([multiple], [size])) optgroup option {
+    padding-inline-start: 20px;
+  }
+
+  /*
+  Restore space after button.
+*/
+
+  ::file-selector-button {
+    margin-inline-end: 4px;
+  }
+
+  /*
+  Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+*/
+
+  ::placeholder {
+    opacity: 1;
+  }
+
+  /*
+  Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not
+  crash when using \`color - mix(…)\` with \`currentcolor\`. (https://github.com/tailwindlabs/tailwindcss/issues/17194)
+*/
+
+  @supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or
+    (contain-intrinsic-size: 1px) /* Safari 17+ */ {
+    ::placeholder {
+      color: color-mix(in oklab, currentcolor 50%, transparent);
+    }
+  }
+
+  /*
+  Prevent resizing textareas horizontally by default.
+*/
+
+  textarea {
+    resize: vertical;
+  }
+
+  /*
+  Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+  /*
+  1. Ensure date/time inputs have the same height when empty in iOS Safari.
+  2. Ensure text alignment can be changed on date/time inputs in iOS Safari.
+*/
+
+  ::-webkit-date-and-time-value {
+    min-height: 1lh; /* 1 */
+    text-align: inherit; /* 2 */
+  }
+
+  /*
+  Prevent height from changing on date/time inputs in macOS Safari when the input is set to \`display: block\`.
+*/
+
+  ::-webkit-datetime-edit {
+    display: inline-flex;
+  }
+
+  /*
+  Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.
+*/
+
+  ::-webkit-datetime-edit-fields-wrapper {
+    padding: 0;
+  }
+
+  ::-webkit-datetime-edit,
+  ::-webkit-datetime-edit-year-field,
+  ::-webkit-datetime-edit-month-field,
+  ::-webkit-datetime-edit-day-field,
+  ::-webkit-datetime-edit-hour-field,
+  ::-webkit-datetime-edit-minute-field,
+  ::-webkit-datetime-edit-second-field,
+  ::-webkit-datetime-edit-millisecond-field,
+  ::-webkit-datetime-edit-meridiem-field {
+    padding-block: 0;
+  }
+
+  /*
+  Center dropdown marker shown on inputs with paired \`<datalist>\`s in Chrome. (https://github.com/tailwindlabs/tailwindcss/issues/18499)
+*/
+
+  ::-webkit-calendar-picker-indicator {
+    line-height: 1;
+  }
+
+  /*
+  Remove the additional \`: invalid\` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+
+  /*
+  Correct the inability to style the border radius in iOS Safari.
+*/
+
+  button,
+  input:where([type="button"], [type="reset"], [type="submit"]),
+  ::file-selector-button {
+    appearance: button;
+  }
+
+  /*
+  Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+  ::-webkit-inner-spin-button,
+  ::-webkit-outer-spin-button {
+    height: auto;
+  }
+
+  /*
+  Make elements with the HTML hidden attribute stay hidden by default.
+*/
+
+  [hidden]:where(:not([hidden="until-found"])) {
+    display: none !important;
+  }
+}
+
+@layer utilities {
+  @tailwind utilities;
+}
+`;
+
+export default css;
diff --git a/packages/tailwind/src/utils/tailwindcss/tailwind-stylesheets/preflight.ts b/packages/tailwind/src/utils/tailwindcss/tailwind-stylesheets/preflight.ts
new file mode 100644
index 0000000000..4f8bf18507
--- /dev/null
+++ b/packages/tailwind/src/utils/tailwindcss/tailwind-stylesheets/preflight.ts
@@ -0,0 +1,397 @@
+const css = `
+/*
+  1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+  2. Remove default margins and padding
+  3. Reset all borders.
+*/
+
+*,
+::after,
+::before,
+::backdrop,
+::file-selector-button {
+  box-sizing: border-box; /* 1 */
+  margin: 0; /* 2 */
+  padding: 0; /* 2 */
+  border: 0 solid; /* 3 */
+}
+
+/*
+  1. Use a consistent sensible line-height in all browsers.
+  2. Prevent adjustments of font size after orientation changes in iOS.
+  3. Use a more readable tab size.
+  4. Use the user's configured \`sans\` font-family by default.
+  5. Use the user's configured \`sans\` font-feature-settings by default.
+  6. Use the user's configured \`sans\` font-variation-settings by default.
+  7. Disable tap highlights on iOS.
+*/
+
+html,
+:host {
+  line-height: 1.5; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+  tab-size: 4; /* 3 */
+  font-family: --theme(
+    --default-font-family,
+    ui-sans-serif,
+    system-ui,
+    sans-serif,
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol',
+    'Noto Color Emoji'
+  ); /* 4 */
+  font-feature-settings: --theme(--default-font-feature-settings, normal); /* 5 */
+  font-variation-settings: --theme(--default-font-variation-settings, normal); /* 6 */
+  -webkit-tap-highlight-color: transparent; /* 7 */
+}
+
+/*
+  1. Add the correct height in Firefox.
+  2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+  3. Reset the default border style to a 1px solid border.
+*/
+
+hr {
+  height: 0; /* 1 */
+  color: inherit; /* 2 */
+  border-top-width: 1px; /* 3 */
+}
+
+/*
+  Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr:where([title]) {
+  -webkit-text-decoration: underline dotted;
+  text-decoration: underline dotted;
+}
+
+/*
+  Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/*
+  Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+a {
+  color: inherit;
+  -webkit-text-decoration: inherit;
+  text-decoration: inherit;
+}
+
+/*
+  Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/*
+  1. Use the user's configured \`mono\` font-family by default.
+  2. Use the user's configured \`mono\` font-feature-settings by default.
+  3. Use the user's configured \`mono\` font-variation-settings by default.
+  4. Correct the odd \`em\` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+  font-family: --theme(
+    --default-mono-font-family,
+    ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    Monaco,
+    Consolas,
+    'Liberation Mono',
+    'Courier New',
+    monospace
+  ); /* 1 */
+  font-feature-settings: --theme(--default-mono-font-feature-settings, normal); /* 2 */
+  font-variation-settings: --theme(--default-mono-font-variation-settings, normal); /* 3 */
+  font-size: 1em; /* 4 */
+}
+
+/*
+  Add the correct font size in all browsers.
+*/
+
+small {
+  font-size: 80%;
+}
+
+/*
+  Prevent \`sub\` and \`sup\` elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/*
+  1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+  2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+  3. Remove gaps between table borders by default.
+*/
+
+table {
+  text-indent: 0; /* 1 */
+  border-color: inherit; /* 2 */
+  border-collapse: collapse; /* 3 */
+}
+
+/*
+  Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+  outline: auto;
+}
+
+/*
+  Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+  vertical-align: baseline;
+}
+
+/*
+  Add the correct display in Chrome and Safari.
+*/
+
+summary {
+  display: list-item;
+}
+
+/*
+  Make lists unstyled by default.
+*/
+
+ol,
+ul,
+menu {
+  list-style: none;
+}
+
+/*
+  1. Make replaced elements \`display: block\` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+  2. Add \`vertical-align: middle\` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+      This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block; /* 1 */
+  vertical-align: middle; /* 2 */
+}
+
+/*
+  Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+/*
+  1. Inherit font styles in all browsers.
+  2. Remove border radius in all browsers.
+  3. Remove background color in all browsers.
+  4. Ensure consistent opacity for disabled states in all browsers.
+*/
+
+button,
+input,
+select,
+optgroup,
+textarea,
+::file-selector-button {
+  font: inherit; /* 1 */
+  font-feature-settings: inherit; /* 1 */
+  font-variation-settings: inherit; /* 1 */
+  letter-spacing: inherit; /* 1 */
+  color: inherit; /* 1 */
+  border-radius: 0; /* 2 */
+  background-color: transparent; /* 3 */
+  opacity: 1; /* 4 */
+}
+
+/*
+  Restore default font weight.
+*/
+
+:where(select:is([multiple], [size])) optgroup {
+  font-weight: bolder;
+}
+
+/*
+  Restore indentation.
+*/
+
+:where(select:is([multiple], [size])) optgroup option {
+  padding-inline-start: 20px;
+}
+
+/*
+  Restore space after button.
+*/
+
+::file-selector-button {
+  margin-inline-end: 4px;
+}
+
+/*
+  Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+*/
+
+::placeholder {
+  opacity: 1;
+}
+
+/*
+  Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not
+  crash when using \`color-mix(…)\` with \`currentcolor\`. (https://github.com/tailwindlabs/tailwindcss/issues/17194)
+*/
+
+@supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or
+  (contain-intrinsic-size: 1px) /* Safari 17+ */ {
+  ::placeholder {
+    color: color-mix(in oklab, currentcolor 50%, transparent);
+  }
+}
+
+/*
+  Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+  resize: vertical;
+}
+
+/*
+  Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+  1. Ensure date/time inputs have the same height when empty in iOS Safari.
+  2. Ensure text alignment can be changed on date/time inputs in iOS Safari.
+*/
+
+::-webkit-date-and-time-value {
+  min-height: 1lh; /* 1 */
+  text-align: inherit; /* 2 */
+}
+
+/*
+  Prevent height from changing on date/time inputs in macOS Safari when the input is set to \`display: block\`.
+*/
+
+::-webkit-datetime-edit {
+  display: inline-flex;
+}
+
+/*
+  Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.
+*/
+
+::-webkit-datetime-edit-fields-wrapper {
+  padding: 0;
+}
+
+::-webkit-datetime-edit,
+::-webkit-datetime-edit-year-field,
+::-webkit-datetime-edit-month-field,
+::-webkit-datetime-edit-day-field,
+::-webkit-datetime-edit-hour-field,
+::-webkit-datetime-edit-minute-field,
+::-webkit-datetime-edit-second-field,
+::-webkit-datetime-edit-millisecond-field,
+::-webkit-datetime-edit-meridiem-field {
+  padding-block: 0;
+}
+
+/*
+  Center dropdown marker shown on inputs with paired \`<datalist>\`s in Chrome. (https://github.com/tailwindlabs/tailwindcss/issues/18499)
+*/
+
+::-webkit-calendar-picker-indicator {
+  line-height: 1;
+}
+
+/*
+  Remove the additional \`:invalid\` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/*
+  Correct the inability to style the border radius in iOS Safari.
+*/
+
+button,
+input:where([type='button'], [type='reset'], [type='submit']),
+::file-selector-button {
+  appearance: button;
+}
+
+/*
+  Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+  Make elements with the HTML hidden attribute stay hidden by default.
+*/
+
+[hidden]:where(:not([hidden='until-found'])) {
+  display: none !important;
+}
+`;
+
+export default css;
diff --git a/packages/tailwind/src/utils/tailwindcss/tailwind-stylesheets/theme.ts b/packages/tailwind/src/utils/tailwindcss/tailwind-stylesheets/theme.ts
new file mode 100644
index 0000000000..ed1f7768ea
--- /dev/null
+++ b/packages/tailwind/src/utils/tailwindcss/tailwind-stylesheets/theme.ts
@@ -0,0 +1,466 @@
+const css = `
+@theme default {
+  --font-sans:
+    ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
+  --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
+  --font-mono:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
+    monospace;
+
+  --color-red-50: oklch(97.1% 0.013 17.38);
+  --color-red-100: oklch(93.6% 0.032 17.717);
+  --color-red-200: oklch(88.5% 0.062 18.334);
+  --color-red-300: oklch(80.8% 0.114 19.571);
+  --color-red-400: oklch(70.4% 0.191 22.216);
+  --color-red-500: oklch(63.7% 0.237 25.331);
+  --color-red-600: oklch(57.7% 0.245 27.325);
+  --color-red-700: oklch(50.5% 0.213 27.518);
+  --color-red-800: oklch(44.4% 0.177 26.899);
+  --color-red-900: oklch(39.6% 0.141 25.723);
+  --color-red-950: oklch(25.8% 0.092 26.042);
+
+  --color-orange-50: oklch(98% 0.016 73.684);
+  --color-orange-100: oklch(95.4% 0.038 75.164);
+  --color-orange-200: oklch(90.1% 0.076 70.697);
+  --color-orange-300: oklch(83.7% 0.128 66.29);
+  --color-orange-400: oklch(75% 0.183 55.934);
+  --color-orange-500: oklch(70.5% 0.213 47.604);
+  --color-orange-600: oklch(64.6% 0.222 41.116);
+  --color-orange-700: oklch(55.3% 0.195 38.402);
+  --color-orange-800: oklch(47% 0.157 37.304);
+  --color-orange-900: oklch(40.8% 0.123 38.172);
+  --color-orange-950: oklch(26.6% 0.079 36.259);
+
+  --color-amber-50: oklch(98.7% 0.022 95.277);
+  --color-amber-100: oklch(96.2% 0.059 95.617);
+  --color-amber-200: oklch(92.4% 0.12 95.746);
+  --color-amber-300: oklch(87.9% 0.169 91.605);
+  --color-amber-400: oklch(82.8% 0.189 84.429);
+  --color-amber-500: oklch(76.9% 0.188 70.08);
+  --color-amber-600: oklch(66.6% 0.179 58.318);
+  --color-amber-700: oklch(55.5% 0.163 48.998);
+  --color-amber-800: oklch(47.3% 0.137 46.201);
+  --color-amber-900: oklch(41.4% 0.112 45.904);
+  --color-amber-950: oklch(27.9% 0.077 45.635);
+
+  --color-yellow-50: oklch(98.7% 0.026 102.212);
+  --color-yellow-100: oklch(97.3% 0.071 103.193);
+  --color-yellow-200: oklch(94.5% 0.129 101.54);
+  --color-yellow-300: oklch(90.5% 0.182 98.111);
+  --color-yellow-400: oklch(85.2% 0.199 91.936);
+  --color-yellow-500: oklch(79.5% 0.184 86.047);
+  --color-yellow-600: oklch(68.1% 0.162 75.834);
+  --color-yellow-700: oklch(55.4% 0.135 66.442);
+  --color-yellow-800: oklch(47.6% 0.114 61.907);
+  --color-yellow-900: oklch(42.1% 0.095 57.708);
+  --color-yellow-950: oklch(28.6% 0.066 53.813);
+
+  --color-lime-50: oklch(98.6% 0.031 120.757);
+  --color-lime-100: oklch(96.7% 0.067 122.328);
+  --color-lime-200: oklch(93.8% 0.127 124.321);
+  --color-lime-300: oklch(89.7% 0.196 126.665);
+  --color-lime-400: oklch(84.1% 0.238 128.85);
+  --color-lime-500: oklch(76.8% 0.233 130.85);
+  --color-lime-600: oklch(64.8% 0.2 131.684);
+  --color-lime-700: oklch(53.2% 0.157 131.589);
+  --color-lime-800: oklch(45.3% 0.124 130.933);
+  --color-lime-900: oklch(40.5% 0.101 131.063);
+  --color-lime-950: oklch(27.4% 0.072 132.109);
+
+  --color-green-50: oklch(98.2% 0.018 155.826);
+  --color-green-100: oklch(96.2% 0.044 156.743);
+  --color-green-200: oklch(92.5% 0.084 155.995);
+  --color-green-300: oklch(87.1% 0.15 154.449);
+  --color-green-400: oklch(79.2% 0.209 151.711);
+  --color-green-500: oklch(72.3% 0.219 149.579);
+  --color-green-600: oklch(62.7% 0.194 149.214);
+  --color-green-700: oklch(52.7% 0.154 150.069);
+  --color-green-800: oklch(44.8% 0.119 151.328);
+  --color-green-900: oklch(39.3% 0.095 152.535);
+  --color-green-950: oklch(26.6% 0.065 152.934);
+
+  --color-emerald-50: oklch(97.9% 0.021 166.113);
+  --color-emerald-100: oklch(95% 0.052 163.051);
+  --color-emerald-200: oklch(90.5% 0.093 164.15);
+  --color-emerald-300: oklch(84.5% 0.143 164.978);
+  --color-emerald-400: oklch(76.5% 0.177 163.223);
+  --color-emerald-500: oklch(69.6% 0.17 162.48);
+  --color-emerald-600: oklch(59.6% 0.145 163.225);
+  --color-emerald-700: oklch(50.8% 0.118 165.612);
+  --color-emerald-800: oklch(43.2% 0.095 166.913);
+  --color-emerald-900: oklch(37.8% 0.077 168.94);
+  --color-emerald-950: oklch(26.2% 0.051 172.552);
+
+  --color-teal-50: oklch(98.4% 0.014 180.72);
+  --color-teal-100: oklch(95.3% 0.051 180.801);
+  --color-teal-200: oklch(91% 0.096 180.426);
+  --color-teal-300: oklch(85.5% 0.138 181.071);
+  --color-teal-400: oklch(77.7% 0.152 181.912);
+  --color-teal-500: oklch(70.4% 0.14 182.503);
+  --color-teal-600: oklch(60% 0.118 184.704);
+  --color-teal-700: oklch(51.1% 0.096 186.391);
+  --color-teal-800: oklch(43.7% 0.078 188.216);
+  --color-teal-900: oklch(38.6% 0.063 188.416);
+  --color-teal-950: oklch(27.7% 0.046 192.524);
+
+  --color-cyan-50: oklch(98.4% 0.019 200.873);
+  --color-cyan-100: oklch(95.6% 0.045 203.388);
+  --color-cyan-200: oklch(91.7% 0.08 205.041);
+  --color-cyan-300: oklch(86.5% 0.127 207.078);
+  --color-cyan-400: oklch(78.9% 0.154 211.53);
+  --color-cyan-500: oklch(71.5% 0.143 215.221);
+  --color-cyan-600: oklch(60.9% 0.126 221.723);
+  --color-cyan-700: oklch(52% 0.105 223.128);
+  --color-cyan-800: oklch(45% 0.085 224.283);
+  --color-cyan-900: oklch(39.8% 0.07 227.392);
+  --color-cyan-950: oklch(30.2% 0.056 229.695);
+
+  --color-sky-50: oklch(97.7% 0.013 236.62);
+  --color-sky-100: oklch(95.1% 0.026 236.824);
+  --color-sky-200: oklch(90.1% 0.058 230.902);
+  --color-sky-300: oklch(82.8% 0.111 230.318);
+  --color-sky-400: oklch(74.6% 0.16 232.661);
+  --color-sky-500: oklch(68.5% 0.169 237.323);
+  --color-sky-600: oklch(58.8% 0.158 241.966);
+  --color-sky-700: oklch(50% 0.134 242.749);
+  --color-sky-800: oklch(44.3% 0.11 240.79);
+  --color-sky-900: oklch(39.1% 0.09 240.876);
+  --color-sky-950: oklch(29.3% 0.066 243.157);
+
+  --color-blue-50: oklch(97% 0.014 254.604);
+  --color-blue-100: oklch(93.2% 0.032 255.585);
+  --color-blue-200: oklch(88.2% 0.059 254.128);
+  --color-blue-300: oklch(80.9% 0.105 251.813);
+  --color-blue-400: oklch(70.7% 0.165 254.624);
+  --color-blue-500: oklch(62.3% 0.214 259.815);
+  --color-blue-600: oklch(54.6% 0.245 262.881);
+  --color-blue-700: oklch(48.8% 0.243 264.376);
+  --color-blue-800: oklch(42.4% 0.199 265.638);
+  --color-blue-900: oklch(37.9% 0.146 265.522);
+  --color-blue-950: oklch(28.2% 0.091 267.935);
+
+  --color-indigo-50: oklch(96.2% 0.018 272.314);
+  --color-indigo-100: oklch(93% 0.034 272.788);
+  --color-indigo-200: oklch(87% 0.065 274.039);
+  --color-indigo-300: oklch(78.5% 0.115 274.713);
+  --color-indigo-400: oklch(67.3% 0.182 276.935);
+  --color-indigo-500: oklch(58.5% 0.233 277.117);
+  --color-indigo-600: oklch(51.1% 0.262 276.966);
+  --color-indigo-700: oklch(45.7% 0.24 277.023);
+  --color-indigo-800: oklch(39.8% 0.195 277.366);
+  --color-indigo-900: oklch(35.9% 0.144 278.697);
+  --color-indigo-950: oklch(25.7% 0.09 281.288);
+
+  --color-violet-50: oklch(96.9% 0.016 293.756);
+  --color-violet-100: oklch(94.3% 0.029 294.588);
+  --color-violet-200: oklch(89.4% 0.057 293.283);
+  --color-violet-300: oklch(81.1% 0.111 293.571);
+  --color-violet-400: oklch(70.2% 0.183 293.541);
+  --color-violet-500: oklch(60.6% 0.25 292.717);
+  --color-violet-600: oklch(54.1% 0.281 293.009);
+  --color-violet-700: oklch(49.1% 0.27 292.581);
+  --color-violet-800: oklch(43.2% 0.232 292.759);
+  --color-violet-900: oklch(38% 0.189 293.745);
+  --color-violet-950: oklch(28.3% 0.141 291.089);
+
+  --color-purple-50: oklch(97.7% 0.014 308.299);
+  --color-purple-100: oklch(94.6% 0.033 307.174);
+  --color-purple-200: oklch(90.2% 0.063 306.703);
+  --color-purple-300: oklch(82.7% 0.119 306.383);
+  --color-purple-400: oklch(71.4% 0.203 305.504);
+  --color-purple-500: oklch(62.7% 0.265 303.9);
+  --color-purple-600: oklch(55.8% 0.288 302.321);
+  --color-purple-700: oklch(49.6% 0.265 301.924);
+  --color-purple-800: oklch(43.8% 0.218 303.724);
+  --color-purple-900: oklch(38.1% 0.176 304.987);
+  --color-purple-950: oklch(29.1% 0.149 302.717);
+
+  --color-fuchsia-50: oklch(97.7% 0.017 320.058);
+  --color-fuchsia-100: oklch(95.2% 0.037 318.852);
+  --color-fuchsia-200: oklch(90.3% 0.076 319.62);
+  --color-fuchsia-300: oklch(83.3% 0.145 321.434);
+  --color-fuchsia-400: oklch(74% 0.238 322.16);
+  --color-fuchsia-500: oklch(66.7% 0.295 322.15);
+  --color-fuchsia-600: oklch(59.1% 0.293 322.896);
+  --color-fuchsia-700: oklch(51.8% 0.253 323.949);
+  --color-fuchsia-800: oklch(45.2% 0.211 324.591);
+  --color-fuchsia-900: oklch(40.1% 0.17 325.612);
+  --color-fuchsia-950: oklch(29.3% 0.136 325.661);
+
+  --color-pink-50: oklch(97.1% 0.014 343.198);
+  --color-pink-100: oklch(94.8% 0.028 342.258);
+  --color-pink-200: oklch(89.9% 0.061 343.231);
+  --color-pink-300: oklch(82.3% 0.12 346.018);
+  --color-pink-400: oklch(71.8% 0.202 349.761);
+  --color-pink-500: oklch(65.6% 0.241 354.308);
+  --color-pink-600: oklch(59.2% 0.249 0.584);
+  --color-pink-700: oklch(52.5% 0.223 3.958);
+  --color-pink-800: oklch(45.9% 0.187 3.815);
+  --color-pink-900: oklch(40.8% 0.153 2.432);
+  --color-pink-950: oklch(28.4% 0.109 3.907);
+
+  --color-rose-50: oklch(96.9% 0.015 12.422);
+  --color-rose-100: oklch(94.1% 0.03 12.58);
+  --color-rose-200: oklch(89.2% 0.058 10.001);
+  --color-rose-300: oklch(81% 0.117 11.638);
+  --color-rose-400: oklch(71.2% 0.194 13.428);
+  --color-rose-500: oklch(64.5% 0.246 16.439);
+  --color-rose-600: oklch(58.6% 0.253 17.585);
+  --color-rose-700: oklch(51.4% 0.222 16.935);
+  --color-rose-800: oklch(45.5% 0.188 13.697);
+  --color-rose-900: oklch(41% 0.159 10.272);
+  --color-rose-950: oklch(27.1% 0.105 12.094);
+
+  --color-slate-50: oklch(98.4% 0.003 247.858);
+  --color-slate-100: oklch(96.8% 0.007 247.896);
+  --color-slate-200: oklch(92.9% 0.013 255.508);
+  --color-slate-300: oklch(86.9% 0.022 252.894);
+  --color-slate-400: oklch(70.4% 0.04 256.788);
+  --color-slate-500: oklch(55.4% 0.046 257.417);
+  --color-slate-600: oklch(44.6% 0.043 257.281);
+  --color-slate-700: oklch(37.2% 0.044 257.287);
+  --color-slate-800: oklch(27.9% 0.041 260.031);
+  --color-slate-900: oklch(20.8% 0.042 265.755);
+  --color-slate-950: oklch(12.9% 0.042 264.695);
+
+  --color-gray-50: oklch(98.5% 0.002 247.839);
+  --color-gray-100: oklch(96.7% 0.003 264.542);
+  --color-gray-200: oklch(92.8% 0.006 264.531);
+  --color-gray-300: oklch(87.2% 0.01 258.338);
+  --color-gray-400: oklch(70.7% 0.022 261.325);
+  --color-gray-500: oklch(55.1% 0.027 264.364);
+  --color-gray-600: oklch(44.6% 0.03 256.802);
+  --color-gray-700: oklch(37.3% 0.034 259.733);
+  --color-gray-800: oklch(27.8% 0.033 256.848);
+  --color-gray-900: oklch(21% 0.034 264.665);
+  --color-gray-950: oklch(13% 0.028 261.692);
+
+  --color-zinc-50: oklch(98.5% 0 0);
+  --color-zinc-100: oklch(96.7% 0.001 286.375);
+  --color-zinc-200: oklch(92% 0.004 286.32);
+  --color-zinc-300: oklch(87.1% 0.006 286.286);
+  --color-zinc-400: oklch(70.5% 0.015 286.067);
+  --color-zinc-500: oklch(55.2% 0.016 285.938);
+  --color-zinc-600: oklch(44.2% 0.017 285.786);
+  --color-zinc-700: oklch(37% 0.013 285.805);
+  --color-zinc-800: oklch(27.4% 0.006 286.033);
+  --color-zinc-900: oklch(21% 0.006 285.885);
+  --color-zinc-950: oklch(14.1% 0.005 285.823);
+
+  --color-neutral-50: oklch(98.5% 0 0);
+  --color-neutral-100: oklch(97% 0 0);
+  --color-neutral-200: oklch(92.2% 0 0);
+  --color-neutral-300: oklch(87% 0 0);
+  --color-neutral-400: oklch(70.8% 0 0);
+  --color-neutral-500: oklch(55.6% 0 0);
+  --color-neutral-600: oklch(43.9% 0 0);
+  --color-neutral-700: oklch(37.1% 0 0);
+  --color-neutral-800: oklch(26.9% 0 0);
+  --color-neutral-900: oklch(20.5% 0 0);
+  --color-neutral-950: oklch(14.5% 0 0);
+
+  --color-stone-50: oklch(98.5% 0.001 106.423);
+  --color-stone-100: oklch(97% 0.001 106.424);
+  --color-stone-200: oklch(92.3% 0.003 48.717);
+  --color-stone-300: oklch(86.9% 0.005 56.366);
+  --color-stone-400: oklch(70.9% 0.01 56.259);
+  --color-stone-500: oklch(55.3% 0.013 58.071);
+  --color-stone-600: oklch(44.4% 0.011 73.639);
+  --color-stone-700: oklch(37.4% 0.01 67.558);
+  --color-stone-800: oklch(26.8% 0.007 34.298);
+  --color-stone-900: oklch(21.6% 0.006 56.043);
+  --color-stone-950: oklch(14.7% 0.004 49.25);
+
+  --color-black: #000;
+  --color-white: #fff;
+
+  --spacing: 0.25rem;
+
+  --breakpoint-sm: 40rem;
+  --breakpoint-md: 48rem;
+  --breakpoint-lg: 64rem;
+  --breakpoint-xl: 80rem;
+  --breakpoint-2xl: 96rem;
+
+  --container-3xs: 16rem;
+  --container-2xs: 18rem;
+  --container-xs: 20rem;
+  --container-sm: 24rem;
+  --container-md: 28rem;
+  --container-lg: 32rem;
+  --container-xl: 36rem;
+  --container-2xl: 42rem;
+  --container-3xl: 48rem;
+  --container-4xl: 56rem;
+  --container-5xl: 64rem;
+  --container-6xl: 72rem;
+  --container-7xl: 80rem;
+
+  --text-xs: 0.75rem;
+  --text-xs--line-height: calc(1 / 0.75);
+  --text-sm: 0.875rem;
+  --text-sm--line-height: calc(1.25 / 0.875);
+  --text-base: 1rem;
+  --text-base--line-height: calc(1.5 / 1);
+  --text-lg: 1.125rem;
+  --text-lg--line-height: calc(1.75 / 1.125);
+  --text-xl: 1.25rem;
+  --text-xl--line-height: calc(1.75 / 1.25);
+  --text-2xl: 1.5rem;
+  --text-2xl--line-height: calc(2 / 1.5);
+  --text-3xl: 1.875rem;
+  --text-3xl--line-height: calc(2.25 / 1.875);
+  --text-4xl: 2.25rem;
+  --text-4xl--line-height: calc(2.5 / 2.25);
+  --text-5xl: 3rem;
+  --text-5xl--line-height: 1;
+  --text-6xl: 3.75rem;
+  --text-6xl--line-height: 1;
+  --text-7xl: 4.5rem;
+  --text-7xl--line-height: 1;
+  --text-8xl: 6rem;
+  --text-8xl--line-height: 1;
+  --text-9xl: 8rem;
+  --text-9xl--line-height: 1;
+
+  --font-weight-thin: 100;
+  --font-weight-extralight: 200;
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
+  --font-weight-black: 900;
+
+  --tracking-tighter: -0.05em;
+  --tracking-tight: -0.025em;
+  --tracking-normal: 0em;
+  --tracking-wide: 0.025em;
+  --tracking-wider: 0.05em;
+  --tracking-widest: 0.1em;
+
+  --leading-tight: 1.25;
+  --leading-snug: 1.375;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.625;
+  --leading-loose: 2;
+
+  --radius-xs: 0.125rem;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-3xl: 1.5rem;
+  --radius-4xl: 2rem;
+
+  --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
+  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+
+  --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);
+  --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);
+  --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);
+
+  --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05);
+  --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
+  --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
+  --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
+  --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
+  --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
+
+  --text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / 0.15);
+  --text-shadow-xs: 0px 1px 1px rgb(0 0 0 / 0.2);
+  --text-shadow-sm:
+    0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075), 0px 2px 2px rgb(0 0 0 / 0.075);
+  --text-shadow-md:
+    0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1);
+  --text-shadow-lg:
+    0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1);
+
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+
+  --animate-spin: spin 1s linear infinite;
+  --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+  --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  --animate-bounce: bounce 1s infinite;
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes ping {
+    75%,
+    100% {
+      transform: scale(2);
+      opacity: 0;
+    }
+  }
+
+  @keyframes pulse {
+    50% {
+      opacity: 0.5;
+    }
+  }
+
+  @keyframes bounce {
+    0%,
+    100% {
+      transform: translateY(-25%);
+      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+    }
+
+    50% {
+      transform: none;
+      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+    }
+  }
+
+  --blur-xs: 4px;
+  --blur-sm: 8px;
+  --blur-md: 12px;
+  --blur-lg: 16px;
+  --blur-xl: 24px;
+  --blur-2xl: 40px;
+  --blur-3xl: 64px;
+
+  --perspective-dramatic: 100px;
+  --perspective-near: 300px;
+  --perspective-normal: 500px;
+  --perspective-midrange: 800px;
+  --perspective-distant: 1200px;
+
+  --aspect-video: 16 / 9;
+
+  --default-transition-duration: 150ms;
+  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  --default-font-family: --theme(--font-sans, initial);
+  --default-font-feature-settings: --theme(--font-sans--font-feature-settings, initial);
+  --default-font-variation-settings: --theme(--font-sans--font-variation-settings, initial);
+  --default-mono-font-family: --theme(--font-mono, initial);
+  --default-mono-font-feature-settings: --theme(--font-mono--font-feature-settings, initial);
+  --default-mono-font-variation-settings: --theme(--font-mono--font-variation-settings, initial);
+}
+
+/* Deprecated */
+@theme default inline reference {
+  --blur: 8px;
+  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+  --drop-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 1px 1px rgb(0 0 0 / 0.06);
+  --radius: 0.25rem;
+  --max-width-prose: 65ch;
+}
+`;
+
+export default css;
diff --git a/packages/tailwind/src/utils/tailwindcss/tailwind-stylesheets/utilities.ts b/packages/tailwind/src/utils/tailwindcss/tailwind-stylesheets/utilities.ts
new file mode 100644
index 0000000000..413a00673b
--- /dev/null
+++ b/packages/tailwind/src/utils/tailwindcss/tailwind-stylesheets/utilities.ts
@@ -0,0 +1,5 @@
+const css = `
+@tailwind utilities;
+`;
+
+export default css;
diff --git a/packages/tailwind/tsconfig.json b/packages/tailwind/tsconfig.json
index c04ef2d9bc..921500b54e 100644
--- a/packages/tailwind/tsconfig.json
+++ b/packages/tailwind/tsconfig.json
@@ -10,6 +10,8 @@
     "integrations/nextjs"
   ],
   "compilerOptions": {
+    "moduleResolution": "nodenext",
+    "module": "nodenext",
     "strict": true,
     "noEmit": true
   }
diff --git a/packages/tailwind/tsdown.config.ts b/packages/tailwind/tsdown.config.ts
new file mode 100644
index 0000000000..21af50b807
--- /dev/null
+++ b/packages/tailwind/tsdown.config.ts
@@ -0,0 +1,40 @@
+import { createRequire } from 'node:module';
+import url from 'node:url';
+import { defineConfig } from 'tsdown/config';
+
+export default defineConfig({
+  entry: './src/index.ts',
+  format: ['cjs', 'esm'],
+  dts: true,
+  noExternal: ['css-tree'],
+  plugins: [
+    {
+      name: 'hoist-create-require-imports',
+      async transform(code, id, meta) {
+        if (id.includes('css-tree')) {
+          const localizedRequire = createRequire(url.pathToFileURL(id));
+
+          return {
+            code: code
+              .replaceAll("import { createRequire } from 'module';", '')
+              .replaceAll(
+                /(const|var|let)\s+require\s*=\s*createRequire\s*\([^)]*\)\s*;?/g,
+                '',
+              )
+              .replaceAll(
+                /require\s*\(\s*(['"])([^)]+?\.json)\1\s*\)/gm,
+                (_match, _quote, jsonSpecifier) => {
+                  return JSON.stringify(
+                    localizedRequire(localizedRequire.resolve(jsonSpecifier)),
+                    null,
+                    2,
+                  );
+                },
+              ),
+            ...meta,
+          };
+        }
+      },
+    },
+  ],
+});
diff --git a/packages/tailwind/vite.config.ts b/packages/tailwind/vite.config.ts
deleted file mode 100644
index c7fbbd5260..0000000000
--- a/packages/tailwind/vite.config.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import path from 'node:path';
-import { defineConfig } from 'vite';
-import dts from 'vite-plugin-dts';
-
-export default defineConfig({
-  plugins: [
-    dts({
-      include: ['src'],
-      compilerOptions: {
-        paths: {
-          tailwindcss: [path.resolve(__dirname, './dist/tailwindcss')],
-        },
-      },
-      rollupTypes: true,
-      outDir: 'dist',
-    }),
-  ],
-  build: {
-    rollupOptions: {
-      // in summary, this bundles the following since vite defaults to bundling
-      // - tailwindcss
-      // - postcss
-      // - postcss-selector-parser
-      external: ['react', /^react\/.*/, 'react-dom', /react-dom\/.*/],
-    },
-    lib: {
-      entry: path.resolve(__dirname, 'src/index.ts'),
-      fileName: 'index',
-      formats: ['es', 'cjs'],
-    },
-    outDir: 'dist',
-  },
-});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9069e457a6..b7c86ed41f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -417,7 +417,7 @@ importers:
         specifier: workspace:0.0.16
         version: link:../section
       '@react-email/tailwind':
-        specifier: workspace:1.2.2
+        specifier: workspace:2.0.0-tailwindv4.4
         version: link:../tailwind
       '@react-email/text':
         specifier: workspace:0.1.5
@@ -927,9 +927,33 @@ importers:
 
   packages/tailwind:
     dependencies:
+      '@react-email/body':
+        specifier: workspace:*
+        version: link:../body
+      '@react-email/code-block':
+        specifier: workspace:*
+        version: link:../code-block
+      '@react-email/code-inline':
+        specifier: workspace:*
+        version: link:../code-inline
+      '@react-email/container':
+        specifier: workspace:*
+        version: link:../container
+      '@react-email/img':
+        specifier: workspace:*
+        version: link:../img
+      '@react-email/preview':
+        specifier: workspace:*
+        version: link:../preview
+      '@react-email/text':
+        specifier: workspace:*
+        version: link:../text
       react:
         specifier: ^19.0.0
         version: 19.0.0
+      tailwindcss:
+        specifier: 4.1.12
+        version: 4.1.12
     devDependencies:
       '@react-email/button':
         specifier: workspace:^
@@ -955,30 +979,24 @@ importers:
       '@responsive-email/react-email':
         specifier: 0.0.4
         version: 0.0.4(react@19.0.0)
+      '@types/css-tree':
+        specifier: 2.3.10
+        version: 2.3.10
       '@types/shelljs':
         specifier: 0.8.15
         version: 0.8.15
       '@vitejs/plugin-react':
         specifier: 4.4.1
         version: 4.4.1(vite@6.3.6(@types/node@22.14.1)(jiti@2.5.1)(terser@5.37.0)(tsx@4.20.3)(yaml@2.6.1))
-      cross-env:
-        specifier: 10.0.0
-        version: 10.0.0
-      postcss:
-        specifier: 8.5.3
-        version: 8.5.3
-      postcss-selector-parser:
-        specifier: 7.1.0
-        version: 7.1.0
+      css-tree:
+        specifier: 3.1.0
+        version: 3.1.0
       react-dom:
         specifier: ^19.0.0
         version: 19.0.0(react@19.0.0)
       shelljs:
         specifier: 0.9.2
         version: 0.9.2
-      tailwindcss:
-        specifier: 3.4.10
-        version: 3.4.10
       tsconfig:
         specifier: workspace:*
         version: link:../tsconfig
@@ -1469,9 +1487,6 @@ packages:
   '@emnapi/wasi-threads@1.1.0':
     resolution: {integrity: sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==}
 
-  '@epic-web/invariant@1.0.0':
-    resolution: {integrity: sha512-lrTPqgvfFQtR/eY/qkIzp98OGdNJu0m5ji3q/nJI8v3SXkRKEnWiOxMmbvcSoAIzv/cGiuvRy57k4suKQSAdwA==}
-
   '@esbuild/aix-ppc64@0.19.11':
     resolution: {integrity: sha512-FnzU0LyE3ySQk7UntJO4+qIiQgI7KoODnZg5xzXIrFJlKd2P2gwHsHY4927xj9y5PJmJSzULiUCWmv7iWnNa7g==}
     engines: {node: '>=12'}
@@ -4393,6 +4408,9 @@ packages:
   '@types/cors@2.8.17':
     resolution: {integrity: sha512-8CGDvrBj1zgo2qE+oS3pOCyYNqCPryMWY2bGfwA0dcfopWGgxs+78df0Rs3rc9THP4JkOhLsAa+15VdpAqkcUA==}
 
+  '@types/css-tree@2.3.10':
+    resolution: {integrity: sha512-WcaBazJ84RxABvRttQjjFWgTcHvZR9jGr0Y3hccPkHjFyk/a3N8EuxjKr+QfrwjoM5b1yI1Uj1i7EzOAAwBwag==}
+
   '@types/debug@4.1.12':
     resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
 
@@ -5285,11 +5303,6 @@ packages:
       typescript:
         optional: true
 
-  cross-env@10.0.0:
-    resolution: {integrity: sha512-aU8qlEK/nHYtVuN4p7UQgAwVljzMg8hB4YK5ThRqD2l/ziSnryncPNn7bMLt5cFYsKVKBh8HqLqyCoTupEUu7Q==}
-    engines: {node: '>=20'}
-    hasBin: true
-
   cross-env@7.0.3:
     resolution: {integrity: sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==}
     engines: {node: '>=10.14', npm: '>=6', yarn: '>=1'}
@@ -5306,6 +5319,10 @@ packages:
   css-select@5.1.0:
     resolution: {integrity: sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==}
 
+  css-tree@3.1.0:
+    resolution: {integrity: sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
+
   css-what@6.1.0:
     resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
     engines: {node: '>= 6'}
@@ -6920,6 +6937,9 @@ packages:
     resolution: {integrity: sha512-xySmf8g4fPKMeC07jXGz971EkLbWAJ83s4US2Tj9lEdnZ142UP5grN73H1Xd3HzrdbU5o9GYYP/y8F9ZSwLE9g==}
     deprecated: '`mdast` was renamed to `remark`'
 
+  mdn-data@2.12.2:
+    resolution: {integrity: sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==}
+
   media-typer@0.3.0:
     resolution: {integrity: sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==}
     engines: {node: '>= 0.6'}
@@ -7638,10 +7658,6 @@ packages:
     resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
     engines: {node: '>=4'}
 
-  postcss-selector-parser@7.1.0:
-    resolution: {integrity: sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==}
-    engines: {node: '>=4'}
-
   postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
 
@@ -8514,11 +8530,6 @@ packages:
     engines: {node: '>=14.0.0'}
     hasBin: true
 
-  tailwindcss@3.4.10:
-    resolution: {integrity: sha512-KWZkVPm7yJRhdu4SRSl9d4AK2wM3a50UsvgHZO7xY77NQr2V+fIrEuoDGQcbvswWvFGbS2f6e+jC/6WJm1Dl0w==}
-    engines: {node: '>=14.0.0'}
-    hasBin: true
-
   tailwindcss@3.4.3:
     resolution: {integrity: sha512-U7sxQk/n397Bmx4JHbJx/iSOOv5G+II3f1kpLpY2QeUv5DcPdcTsYLlusZfq1NthHS1c1cZoyFmmkex1rzke0A==}
     engines: {node: '>=14.0.0'}
@@ -9940,8 +9951,6 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
-  '@epic-web/invariant@1.0.0': {}
-
   '@esbuild/aix-ppc64@0.19.11':
     optional: true
 
@@ -12747,6 +12756,8 @@ snapshots:
     dependencies:
       '@types/node': 22.14.1
 
+  '@types/css-tree@2.3.10': {}
+
   '@types/debug@4.1.12':
     dependencies:
       '@types/ms': 2.1.0
@@ -13692,11 +13703,6 @@ snapshots:
     optionalDependencies:
       typescript: 5.8.3
 
-  cross-env@10.0.0:
-    dependencies:
-      '@epic-web/invariant': 1.0.0
-      cross-spawn: 7.0.6
-
   cross-env@7.0.3:
     dependencies:
       cross-spawn: 7.0.6
@@ -13723,6 +13729,11 @@ snapshots:
       domutils: 3.1.0
       nth-check: 2.1.1
 
+  css-tree@3.1.0:
+    dependencies:
+      mdn-data: 2.12.2
+      source-map-js: 1.2.1
+
   css-what@6.1.0: {}
 
   cssesc@3.0.0: {}
@@ -15721,6 +15732,8 @@ snapshots:
 
   mdast@3.0.0: {}
 
+  mdn-data@2.12.2: {}
+
   media-typer@0.3.0: {}
 
   merge-descriptors@1.0.3: {}
@@ -16620,11 +16633,6 @@ snapshots:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
 
-  postcss-selector-parser@7.1.0:
-    dependencies:
-      cssesc: 3.0.0
-      util-deprecate: 1.0.2
-
   postcss-value-parser@4.2.0: {}
 
   postcss@8.4.31:
@@ -17905,33 +17913,6 @@ snapshots:
     transitivePeerDependencies:
       - ts-node
 
-  tailwindcss@3.4.10:
-    dependencies:
-      '@alloc/quick-lru': 5.2.0
-      arg: 5.0.2
-      chokidar: 3.6.0
-      didyoumean: 1.2.2
-      dlv: 1.1.3
-      fast-glob: 3.3.2
-      glob-parent: 6.0.2
-      is-glob: 4.0.3
-      jiti: 1.21.7
-      lilconfig: 2.1.0
-      micromatch: 4.0.8
-      normalize-path: 3.0.0
-      object-hash: 3.0.0
-      picocolors: 1.1.1
-      postcss: 8.5.3
-      postcss-import: 15.1.0(postcss@8.5.3)
-      postcss-js: 4.0.1(postcss@8.5.3)
-      postcss-load-config: 4.0.2(postcss@8.5.3)
-      postcss-nested: 6.2.0(postcss@8.5.3)
-      postcss-selector-parser: 6.1.2
-      resolve: 1.22.9
-      sucrase: 3.35.0
-    transitivePeerDependencies:
-      - ts-node
-
   tailwindcss@3.4.3:
     dependencies:
       '@alloc/quick-lru': 5.2.0
@@ -18025,7 +18006,7 @@ snapshots:
   terser@5.37.0:
     dependencies:
       '@jridgewell/source-map': 0.3.6
-      acorn: 8.14.1
+      acorn: 8.15.0
       commander: 2.20.3
       source-map-support: 0.5.21
 

From 19de23f22c26ba504275d5f0f1c116c3d7122da2 Mon Sep 17 00:00:00 2001
From: gabriel miranda <gabrielmfern@outlook.com>
Date: Fri, 17 Oct 2025 17:13:19 -0300
Subject: [PATCH 06/33] chore(demo): use local tailwind version

---
 apps/demo/package.json |   2 +-
 pnpm-lock.yaml         | 259 +----------------------------------------
 2 files changed, 3 insertions(+), 258 deletions(-)

diff --git a/apps/demo/package.json b/apps/demo/package.json
index c5e35d446c..8469564f0f 100644
--- a/apps/demo/package.json
+++ b/apps/demo/package.json
@@ -9,7 +9,7 @@
     "export": "email-dev export"
   },
   "dependencies": {
-    "@react-email/components": "npm:@react-email/components@1.0.0-tailwindv4.5",
+    "@react-email/components": "workspace:*",
     "email-dev": "workspace:*",
     "react": "^19",
     "react-dom": "^19"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b7c86ed41f..276e18c1ff 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -57,8 +57,8 @@ importers:
   apps/demo:
     dependencies:
       '@react-email/components':
-        specifier: npm:@react-email/components@1.0.0-tailwindv4.5
-        version: 1.0.0-tailwindv4.5(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+        specifier: workspace:*
+        version: link:../../packages/components
       email-dev:
         specifier: workspace:*
         version: link:../../packages/react-email/dev
@@ -3708,100 +3708,6 @@ packages:
   '@radix-ui/rect@1.1.1':
     resolution: {integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==}
 
-  '@react-email/body@0.1.1-tailwindv4.0':
-    resolution: {integrity: sha512-9yWjQmQw6/XLeus6vnr4rB09hVlJUW0+MwCT8aqngfIfDNcxF0muzmGG4wyUwhtFtoxnECEaivVhjvuJDCEnuw==}
-    peerDependencies:
-      react: ^19.0.0
-
-  '@react-email/button@0.2.1-tailwindv4.0':
-    resolution: {integrity: sha512-Dl8JfMsYApz+Jd3z4TTHeeLVak0dxu8Ms7gWy8fwT9/tu49ULGYWf7t1AEYtHG1OH4HN2UrGIDErJn1ACMR8TQ==}
-    engines: {node: '>=18.0.0'}
-    peerDependencies:
-      react: ^19.0.0
-
-  '@react-email/code-block@0.1.1-tailwindv4.0':
-    resolution: {integrity: sha512-X9NV4lKKmGQobRU5t4B+OVe+RUtsOQ9Ej5HorFWFA0a3M0kaD8bbAvWgSD58S7mA2pFlwqhg7ti2ifMmQD+3Pw==}
-    engines: {node: '>=18.0.0'}
-    peerDependencies:
-      react: ^19.0.0
-
-  '@react-email/code-inline@0.0.6-tailwindv4.0':
-    resolution: {integrity: sha512-2cZ1tzmVfKe4O3Xom/yEgBfNGrGS763xDLnhCter8R2GYUNBUEjJjAz/pXLiFjpqvSWPPH3elwowqURIB3orjQ==}
-    engines: {node: '>=18.0.0'}
-    peerDependencies:
-      react: ^19.0.0
-
-  '@react-email/column@0.0.13':
-    resolution: {integrity: sha512-Lqq17l7ShzJG/d3b1w/+lVO+gp2FM05ZUo/nW0rjxB8xBICXOVv6PqjDnn3FXKssvhO5qAV20lHM6S+spRhEwQ==}
-    engines: {node: '>=18.0.0'}
-    peerDependencies:
-      react: ^19.0.0
-
-  '@react-email/components@1.0.0-tailwindv4.5':
-    resolution: {integrity: sha512-q12JqHQk0r1ET4g5TS9pETKz38NrNCzdQlUp4rilpdfO8D5Ivjd5ly6ft7jRN+op7H+bmBl+bDkSJq8qfncmzQ==}
-    engines: {node: '>=18.0.0'}
-    peerDependencies:
-      react: ^19.0.0
-
-  '@react-email/container@0.0.16-tailwindv4.0':
-    resolution: {integrity: sha512-RUgvF17EDOgjxwvPejNRf3j9w4PplHfBecRa/5vpL3QdTWrETIBIXDJCprStTNkjo81y+sD49iDwDcKuohMjWw==}
-    engines: {node: '>=18.0.0'}
-    peerDependencies:
-      react: ^19.0.0
-
-  '@react-email/font@0.0.9':
-    resolution: {integrity: sha512-4zjq23oT9APXkerqeslPH3OZWuh5X4crHK6nx82mVHV2SrLba8+8dPEnWbaACWTNjOCbcLIzaC9unk7Wq2MIXw==}
-    peerDependencies:
-      react: ^19.0.0
-
-  '@react-email/head@0.0.12':
-    resolution: {integrity: sha512-X2Ii6dDFMF+D4niNwMAHbTkeCjlYYnMsd7edXOsi0JByxt9wNyZ9EnhFiBoQdqkE+SMDcu8TlNNttMrf5sJeMA==}
-    engines: {node: '>=18.0.0'}
-    peerDependencies:
-      react: ^19.0.0
-
-  '@react-email/heading@0.0.16-tailwindv4.0':
-    resolution: {integrity: sha512-WbcKUHcCkyoaQZceNf/RmhSe/qqnRJnWrg13IFwCM3/7i7zFqMZz7XiLsyraOeqKPafb3K9/OZW3iM7oYy0TiA==}
-    engines: {node: '>=18.0.0'}
-    peerDependencies:
-      react: ^19.0.0
-
-  '@react-email/hr@0.0.12-tailwindv4.0':
-    resolution: {integrity: sha512-N4cmqCuNt/35WjwiTsAl2YjMn/0JEF5BIkgdW5NbT3bypJq9uD6IuDrZuoQdhQF/U6nXKoAnDDM0olOJI5Fvfg==}
-    engines: {node: '>=18.0.0'}
-    peerDependencies:
-      react: ^19.0.0
-
-  '@react-email/html@0.0.11':
-    resolution: {integrity: sha512-qJhbOQy5VW5qzU74AimjAR9FRFQfrMa7dn4gkEXKMB/S9xZN8e1yC1uA9C15jkXI/PzmJ0muDIWmFwatm5/+VA==}
-    engines: {node: '>=18.0.0'}
-    peerDependencies:
-      react: ^19.0.0
-
-  '@react-email/img@0.0.12-tailwindv4.0':
-    resolution: {integrity: sha512-fyux6rY919CvYyQ3naIwIFEFwWsLVhwOdUDOrVkpjypB/5f4E39niM74xaMr/u1CNcWsxINwxlryp44tjAHGhw==}
-    engines: {node: '>=18.0.0'}
-    peerDependencies:
-      react: ^19.0.0
-
-  '@react-email/link@0.0.13-tailwindv4.0':
-    resolution: {integrity: sha512-undFRiSltzPPdMmk/9OhAitDMqPxASiKo3ee9MSPUHyMz8VsaJmy8TPgOH/j6D30TObfcmH0fCQTrWH28qqbJw==}
-    engines: {node: '>=18.0.0'}
-    peerDependencies:
-      react: ^19.0.0
-
-  '@react-email/markdown@0.0.15':
-    resolution: {integrity: sha512-UQA9pVm5sbflgtg3EX3FquUP4aMBzmLReLbGJ6DZQZnAskBF36aI56cRykDq1o+1jT+CKIK1CducPYziaXliag==}
-    engines: {node: '>=18.0.0'}
-    peerDependencies:
-      react: ^19.0.0
-
-  '@react-email/preview@0.0.14-tailwindv4.0':
-    resolution: {integrity: sha512-20IIqdGeSGGWAy0hKvAS2XoQX1muE1K8wLYVyJBFNpX/ghuKUeSDno72Xb8egUFHGlDVwM5q735j7bXpH1/bgg==}
-    engines: {node: '>=18.0.0'}
-    peerDependencies:
-      react: ^19.0.0
-
   '@react-email/render@1.0.6':
     resolution: {integrity: sha512-zNueW5Wn/4jNC1c5LFgXzbUdv5Lhms+FWjOvWAhal7gx5YVf0q6dPJ0dnR70+ifo59gcMLwCZEaTS9EEuUhKvQ==}
     engines: {node: '>=18.0.0'}
@@ -3809,31 +3715,12 @@ packages:
       react: ^19.0.0
       react-dom: ^19.0.0
 
-  '@react-email/render@1.3.2':
-    resolution: {integrity: sha512-oq8/BD/I/YspeuBjjdLJG6xaf9tsPYk+VWu8/mX9xWbRN0t0ExKSVm9sEBL6RsCpndQA2jbY2VgPEreIrzUgqw==}
-    engines: {node: '>=18.0.0'}
-    peerDependencies:
-      react: ^19.0.0
-      react-dom: ^19.0.0
-
-  '@react-email/row@0.0.12':
-    resolution: {integrity: sha512-HkCdnEjvK3o+n0y0tZKXYhIXUNPDx+2vq1dJTmqappVHXS5tXS6W5JOPZr5j+eoZ8gY3PShI2LWj5rWF7ZEtIQ==}
-    engines: {node: '>=18.0.0'}
-    peerDependencies:
-      react: ^19.0.0
-
   '@react-email/section@0.0.14':
     resolution: {integrity: sha512-+fYWLb4tPU1A/+GE5J1+SEMA7/wR3V30lQ+OR9t2kAJqNrARDbMx0bLnYnR1QL5TiFRz0pCF05SQUobk6gHEDQ==}
     engines: {node: '>=18.0.0'}
     peerDependencies:
       react: ^19.0.0
 
-  '@react-email/section@0.0.16':
-    resolution: {integrity: sha512-FjqF9xQ8FoeUZYKSdt8sMIKvoT9XF8BrzhT3xiFKdEMwYNbsDflcjfErJe3jb7Wj/es/lKTbV5QR1dnLzGpL3w==}
-    engines: {node: '>=18.0.0'}
-    peerDependencies:
-      react: ^19.0.0
-
   '@react-email/tailwind@0.0.12':
     resolution: {integrity: sha512-s8Ch7GL30qRKScn9NWwItMqxjtzbyUtCnXfC6sL2YTVtulbfvZZ06W+aA0S6f7fdrVlOOlQzZuK/sVaQCHhcSw==}
     engines: {node: '>=18.0.0'}
@@ -3846,18 +3733,6 @@ packages:
     peerDependencies:
       react: ^19.0.0
 
-  '@react-email/tailwind@2.0.0-tailwindv4.3':
-    resolution: {integrity: sha512-uuTYJY+UZdq6mtq/wh2CANjsYv79DpcgVLFg5yBlME0DNHO+nQ5IHVNckVvWlvs2maS6IP8sUYWxuFgYqUvf6w==}
-    engines: {node: '>=18.0.0'}
-    peerDependencies:
-      react: ^19.0.0
-
-  '@react-email/text@0.1.6-tailwindv4.0':
-    resolution: {integrity: sha512-IVoq2zqCzokjbeEtpFw0VgfL2z7O2K+BTG8nWMZKofUf8UX66X3JwdOGRw/K6U3XS6IahE9gy3yycX7rqn3gKw==}
-    engines: {node: '>=18.0.0'}
-    peerDependencies:
-      react: ^19.0.0
-
   '@react-spring/animated@9.7.5':
     resolution: {integrity: sha512-Tqrwz7pIlsSDITzxoLS3n/v/YCUHQdOIKtOJf4yL6kYVSDTSmVK1LI1Q3M/uu2Sx4X3pIWF3xLUhlsA6SPNTNg==}
     peerDependencies:
@@ -6865,20 +6740,10 @@ packages:
     engines: {node: '>= 18'}
     hasBin: true
 
-  marked@7.0.4:
-    resolution: {integrity: sha512-t8eP0dXRJMtMvBojtkcsA7n48BkauktUKzfkPSCq85ZMTJ0v76Rke4DYz01omYpPTUh4p/f7HePgRo3ebG8+QQ==}
-    engines: {node: '>= 16'}
-    hasBin: true
-
   math-intrinsics@1.1.0:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
 
-  md-to-react-email@5.0.5:
-    resolution: {integrity: sha512-OvAXqwq57uOk+WZqFFNCMZz8yDp8BD3WazW1wAKHUrPbbdr89K9DWS6JXY09vd9xNdPNeurI8DU/X4flcfaD8A==}
-    peerDependencies:
-      react: ^19.0.0
-
   mdast-util-find-and-replace@3.0.2:
     resolution: {integrity: sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==}
 
@@ -12017,94 +11882,6 @@ snapshots:
 
   '@radix-ui/rect@1.1.1': {}
 
-  '@react-email/body@0.1.1-tailwindv4.0(react@19.0.0)':
-    dependencies:
-      react: 19.0.0
-
-  '@react-email/button@0.2.1-tailwindv4.0(react@19.0.0)':
-    dependencies:
-      react: 19.0.0
-
-  '@react-email/code-block@0.1.1-tailwindv4.0(react@19.0.0)':
-    dependencies:
-      prismjs: 1.30.0
-      react: 19.0.0
-
-  '@react-email/code-inline@0.0.6-tailwindv4.0(react@19.0.0)':
-    dependencies:
-      react: 19.0.0
-
-  '@react-email/column@0.0.13(react@19.0.0)':
-    dependencies:
-      react: 19.0.0
-
-  '@react-email/components@1.0.0-tailwindv4.5(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
-    dependencies:
-      '@react-email/body': 0.1.1-tailwindv4.0(react@19.0.0)
-      '@react-email/button': 0.2.1-tailwindv4.0(react@19.0.0)
-      '@react-email/code-block': 0.1.1-tailwindv4.0(react@19.0.0)
-      '@react-email/code-inline': 0.0.6-tailwindv4.0(react@19.0.0)
-      '@react-email/column': 0.0.13(react@19.0.0)
-      '@react-email/container': 0.0.16-tailwindv4.0(react@19.0.0)
-      '@react-email/font': 0.0.9(react@19.0.0)
-      '@react-email/head': 0.0.12(react@19.0.0)
-      '@react-email/heading': 0.0.16-tailwindv4.0(react@19.0.0)
-      '@react-email/hr': 0.0.12-tailwindv4.0(react@19.0.0)
-      '@react-email/html': 0.0.11(react@19.0.0)
-      '@react-email/img': 0.0.12-tailwindv4.0(react@19.0.0)
-      '@react-email/link': 0.0.13-tailwindv4.0(react@19.0.0)
-      '@react-email/markdown': 0.0.15(react@19.0.0)
-      '@react-email/preview': 0.0.14-tailwindv4.0(react@19.0.0)
-      '@react-email/render': 1.3.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
-      '@react-email/row': 0.0.12(react@19.0.0)
-      '@react-email/section': 0.0.16(react@19.0.0)
-      '@react-email/tailwind': 2.0.0-tailwindv4.3(react@19.0.0)
-      '@react-email/text': 0.1.6-tailwindv4.0(react@19.0.0)
-      react: 19.0.0
-    transitivePeerDependencies:
-      - react-dom
-
-  '@react-email/container@0.0.16-tailwindv4.0(react@19.0.0)':
-    dependencies:
-      react: 19.0.0
-
-  '@react-email/font@0.0.9(react@19.0.0)':
-    dependencies:
-      react: 19.0.0
-
-  '@react-email/head@0.0.12(react@19.0.0)':
-    dependencies:
-      react: 19.0.0
-
-  '@react-email/heading@0.0.16-tailwindv4.0(react@19.0.0)':
-    dependencies:
-      react: 19.0.0
-
-  '@react-email/hr@0.0.12-tailwindv4.0(react@19.0.0)':
-    dependencies:
-      react: 19.0.0
-
-  '@react-email/html@0.0.11(react@19.0.0)':
-    dependencies:
-      react: 19.0.0
-
-  '@react-email/img@0.0.12-tailwindv4.0(react@19.0.0)':
-    dependencies:
-      react: 19.0.0
-
-  '@react-email/link@0.0.13-tailwindv4.0(react@19.0.0)':
-    dependencies:
-      react: 19.0.0
-
-  '@react-email/markdown@0.0.15(react@19.0.0)':
-    dependencies:
-      md-to-react-email: 5.0.5(react@19.0.0)
-      react: 19.0.0
-
-  '@react-email/preview@0.0.14-tailwindv4.0(react@19.0.0)':
-    dependencies:
-      react: 19.0.0
-
   '@react-email/render@1.0.6(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
     dependencies:
       html-to-text: 9.0.5
@@ -12113,26 +11890,10 @@ snapshots:
       react-dom: 19.0.0(react@19.0.0)
       react-promise-suspense: 0.3.4
 
-  '@react-email/render@1.3.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
-    dependencies:
-      html-to-text: 9.0.5
-      prettier: 3.5.3
-      react: 19.0.0
-      react-dom: 19.0.0(react@19.0.0)
-      react-promise-suspense: 0.3.4
-
-  '@react-email/row@0.0.12(react@19.0.0)':
-    dependencies:
-      react: 19.0.0
-
   '@react-email/section@0.0.14(react@19.0.0)':
     dependencies:
       react: 19.0.0
 
-  '@react-email/section@0.0.16(react@19.0.0)':
-    dependencies:
-      react: 19.0.0
-
   '@react-email/tailwind@0.0.12(react@19.0.0)':
     dependencies:
       react: 19.0.0
@@ -12145,15 +11906,6 @@ snapshots:
     dependencies:
       react: 19.0.0
 
-  '@react-email/tailwind@2.0.0-tailwindv4.3(react@19.0.0)':
-    dependencies:
-      react: 19.0.0
-      tailwindcss: 4.1.12
-
-  '@react-email/text@0.1.6-tailwindv4.0(react@19.0.0)':
-    dependencies:
-      react: 19.0.0
-
   '@react-spring/animated@9.7.5(react@19.0.0)':
     dependencies:
       '@react-spring/shared': 9.7.5(react@19.0.0)
@@ -15535,15 +15287,8 @@ snapshots:
 
   marked@15.0.12: {}
 
-  marked@7.0.4: {}
-
   math-intrinsics@1.1.0: {}
 
-  md-to-react-email@5.0.5(react@19.0.0):
-    dependencies:
-      marked: 7.0.4
-      react: 19.0.0
-
   mdast-util-find-and-replace@3.0.2:
     dependencies:
       '@types/mdast': 4.0.4

From 9360e39ef51cdb62cfa04cd31e88714507efbdb8 Mon Sep 17 00:00:00 2001
From: gabriel miranda <gabrielmfern@outlook.com>
Date: Fri, 17 Oct 2025 17:34:56 -0300
Subject: [PATCH 07/33] chore: remove preview version and add changeset

---
 .changeset/pink-rabbits-deny.md  | 5 +++++
 .changeset/rich-files-stick.md   | 6 ++++++
 packages/components/package.json | 4 ++--
 packages/tailwind/package.json   | 2 +-
 4 files changed, 14 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/pink-rabbits-deny.md
 create mode 100644 .changeset/rich-files-stick.md

diff --git a/.changeset/pink-rabbits-deny.md b/.changeset/pink-rabbits-deny.md
new file mode 100644
index 0000000000..043905ec10
--- /dev/null
+++ b/.changeset/pink-rabbits-deny.md
@@ -0,0 +1,5 @@
+---
+"@react-email/components": major
+---
+
+tailwind: update to using tailwindcss@v4
diff --git a/.changeset/rich-files-stick.md b/.changeset/rich-files-stick.md
new file mode 100644
index 0000000000..9f5ca355a2
--- /dev/null
+++ b/.changeset/rich-files-stick.md
@@ -0,0 +1,6 @@
+---
+"@react-email/tailwind": major
+---
+
+update to using tailwindcss@v4
+
diff --git a/packages/components/package.json b/packages/components/package.json
index e626d21ebd..b93416d43f 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@react-email/components",
-  "version": "1.0.0-tailwindv4.6",
+  "version": "0.5.7",
   "description": "A collection of all components React Email.",
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -58,7 +58,7 @@
     "@react-email/render": "workspace:1.4.0",
     "@react-email/row": "workspace:0.0.12",
     "@react-email/section": "workspace:0.0.16",
-    "@react-email/tailwind": "workspace:2.0.0-tailwindv4.4",
+    "@react-email/tailwind": "workspace:1.2.",
     "@react-email/text": "workspace:0.1.5"
   },
   "peerDependencies": {
diff --git a/packages/tailwind/package.json b/packages/tailwind/package.json
index 7838e65955..3750f02e98 100644
--- a/packages/tailwind/package.json
+++ b/packages/tailwind/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@react-email/tailwind",
-  "version": "2.0.0-tailwindv4.4",
+  "version": "1.2.2",
   "description": "A React component to wrap emails with Tailwind CSS",
   "sideEffects": false,
   "main": "./dist/index.js",

From 26ee9209f4a9c741e472efb662fe3bbdffd2bad8 Mon Sep 17 00:00:00 2001
From: gabriel miranda <gabrielmfern@outlook.com>
Date: Fri, 17 Oct 2025 17:37:38 -0300
Subject: [PATCH 08/33] chore: update lockfile

---
 packages/components/package.json | 2 +-
 pnpm-lock.yaml                   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/package.json b/packages/components/package.json
index b93416d43f..059c8d9742 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -58,7 +58,7 @@
     "@react-email/render": "workspace:1.4.0",
     "@react-email/row": "workspace:0.0.12",
     "@react-email/section": "workspace:0.0.16",
-    "@react-email/tailwind": "workspace:1.2.",
+    "@react-email/tailwind": "workspace:1.2.2",
     "@react-email/text": "workspace:0.1.5"
   },
   "peerDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 276e18c1ff..9d0e5edc94 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -417,7 +417,7 @@ importers:
         specifier: workspace:0.0.16
         version: link:../section
       '@react-email/tailwind':
-        specifier: workspace:2.0.0-tailwindv4.4
+        specifier: workspace:1.2.2
         version: link:../tailwind
       '@react-email/text':
         specifier: workspace:0.1.5

From 3c8938f8c6b3b06fd74eec72d3b084bb1dca8297 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Fri, 17 Oct 2025 17:44:21 -0300
Subject: [PATCH 09/33] chore(root): version packages (canary) (#2578)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/pre.json              | 39 ++++++++++++++++++++++++++++++++
 packages/components/CHANGELOG.md | 11 +++++++++
 packages/components/package.json |  4 ++--
 packages/tailwind/CHANGELOG.md   |  6 +++++
 packages/tailwind/package.json   |  2 +-
 pnpm-lock.yaml                   |  2 +-
 6 files changed, 60 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/pre.json

diff --git a/.changeset/pre.json b/.changeset/pre.json
new file mode 100644
index 0000000000..47636f018f
--- /dev/null
+++ b/.changeset/pre.json
@@ -0,0 +1,39 @@
+{
+  "mode": "pre",
+  "tag": "canary",
+  "initialVersions": {
+    "demo": "0.0.0",
+    "docs": "0.0.0",
+    "web": "0.0.0",
+    "@benchmarks/preview-server": "0.0.0",
+    "@benchmarks/tailwind-component": "0.0.0",
+    "@react-email/body": "0.1.0",
+    "@react-email/button": "0.2.0",
+    "@react-email/code-block": "0.1.0",
+    "@react-email/code-inline": "0.0.5",
+    "@react-email/column": "0.0.13",
+    "@react-email/components": "0.5.7",
+    "@react-email/container": "0.0.15",
+    "create-email": "1.2.2",
+    "@react-email/font": "0.0.9",
+    "@react-email/head": "0.0.12",
+    "@react-email/heading": "0.0.15",
+    "@react-email/hr": "0.0.11",
+    "@react-email/html": "0.0.11",
+    "@react-email/img": "0.0.11",
+    "@react-email/link": "0.0.12",
+    "@react-email/markdown": "0.0.16",
+    "@react-email/preview": "0.0.13",
+    "@react-email/preview-server": "4.3.1",
+    "react-email": "4.3.1",
+    "email-dev": "0.0.2",
+    "@react-email/render": "1.4.0",
+    "@react-email/row": "0.0.12",
+    "@react-email/section": "0.0.16",
+    "@react-email/tailwind": "1.2.2",
+    "@react-email/text": "0.1.5",
+    "tsconfig": "0.0.0",
+    "playground": "0.0.9"
+  },
+  "changesets": ["pink-rabbits-deny", "rich-files-stick"]
+}
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 109fc2eef2..bc054b60e0 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -1,5 +1,16 @@
 # @react-email/components
 
+## 1.0.0-canary.0
+
+### Major Changes
+
+- 9360e39: tailwind: update to using tailwindcss@v4
+
+### Patch Changes
+
+- Updated dependencies [9360e39]
+  - @react-email/tailwind@2.0.0-canary.0
+
 ## 0.5.7
 
 ### Patch Changes
diff --git a/packages/components/package.json b/packages/components/package.json
index 059c8d9742..9fbc0ca175 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@react-email/components",
-  "version": "0.5.7",
+  "version": "1.0.0-canary.0",
   "description": "A collection of all components React Email.",
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -58,7 +58,7 @@
     "@react-email/render": "workspace:1.4.0",
     "@react-email/row": "workspace:0.0.12",
     "@react-email/section": "workspace:0.0.16",
-    "@react-email/tailwind": "workspace:1.2.2",
+    "@react-email/tailwind": "workspace:2.0.0-canary.0",
     "@react-email/text": "workspace:0.1.5"
   },
   "peerDependencies": {
diff --git a/packages/tailwind/CHANGELOG.md b/packages/tailwind/CHANGELOG.md
index c5b4772b9f..842ec54e5e 100644
--- a/packages/tailwind/CHANGELOG.md
+++ b/packages/tailwind/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @react-email/tailwind
 
+## 2.0.0-canary.0
+
+### Major Changes
+
+- 9360e39: update to using tailwindcss@v4
+
 ## 1.2.2
 
 ### Patch Changes
diff --git a/packages/tailwind/package.json b/packages/tailwind/package.json
index 3750f02e98..45dbd8249e 100644
--- a/packages/tailwind/package.json
+++ b/packages/tailwind/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@react-email/tailwind",
-  "version": "1.2.2",
+  "version": "2.0.0-canary.0",
   "description": "A React component to wrap emails with Tailwind CSS",
   "sideEffects": false,
   "main": "./dist/index.js",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9d0e5edc94..6ebc1c15a8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -417,7 +417,7 @@ importers:
         specifier: workspace:0.0.16
         version: link:../section
       '@react-email/tailwind':
-        specifier: workspace:1.2.2
+        specifier: workspace:2.0.0-canary.0
         version: link:../tailwind
       '@react-email/text':
         specifier: workspace:0.1.5

From 733dc39662824a1c30e5dbcef76919dd8da16706 Mon Sep 17 00:00:00 2001
From: Gabriel Miranda <gabrielmfern@outlook.com>
Date: Wed, 22 Oct 2025 10:50:14 -0300
Subject: [PATCH 10/33] feat(tailwind): test non-inlinable custom utilities
 (#2586)

---
 .../src/__snapshots__/tailwind.spec.tsx.snap  | 17 +++++++++++
 packages/tailwind/src/tailwind.spec.tsx       | 28 +++++++++++++++++++
 2 files changed, 45 insertions(+)

diff --git a/packages/tailwind/src/__snapshots__/tailwind.spec.tsx.snap b/packages/tailwind/src/__snapshots__/tailwind.spec.tsx.snap
index c6edea3134..8e7dbf3d32 100644
--- a/packages/tailwind/src/__snapshots__/tailwind.spec.tsx.snap
+++ b/packages/tailwind/src/__snapshots__/tailwind.spec.tsx.snap
@@ -140,6 +140,23 @@ exports[`Tailwind component > with non-inlinable styles > adds css to <head/> an
 "
 `;
 
+exports[`Tailwind component > with non-inlinable styles > handles non-inlinable styles in custom utilities 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>
+      .text-body{color:green!important;@media (width>=40rem){color:darkgreen!important}}
+    </style>
+  </head>
+  <body>
+    <div class="text-body"></div>
+    <!--/$-->
+  </body>
+</html>
+"
+`;
+
 exports[`Tailwind component > with non-inlinable styles > persists 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">
diff --git a/packages/tailwind/src/tailwind.spec.tsx b/packages/tailwind/src/tailwind.spec.tsx
index 292521e000..65e9299e5c 100644
--- a/packages/tailwind/src/tailwind.spec.tsx
+++ b/packages/tailwind/src/tailwind.spec.tsx
@@ -378,6 +378,34 @@ describe('Tailwind component', () => {
       ).toMatchSnapshot();
     });
 
+    it('handles non-inlinable styles in custom utilities', async () => {
+      const actualOutput = await render(
+        <html lang="en">
+          <Tailwind
+            config={{
+              plugins: [
+                {
+                  handler: (api) => {
+                    api.addUtilities({
+                      '.text-body': {
+                        '@apply text-[green] sm:text-[darkgreen]': {},
+                      },
+                    });
+                  },
+                },
+              ],
+            }}
+          >
+            <head />
+            <body>
+              <div className="text-body" />
+            </body>
+          </Tailwind>
+        </html>,
+      ).then(pretty);
+      expect(actualOutput).toMatchSnapshot();
+    });
+
     it('adds css to <head/> and keep class names', async () => {
       const actualOutput = await render(
         <html lang="en">

From add45398df05b7d50f76db2b18cb45db9d3d71fd Mon Sep 17 00:00:00 2001
From: gabriel miranda <gabrielmfern@outlook.com>
Date: Thu, 23 Oct 2025 13:57:09 -0300
Subject: [PATCH 11/33] wip

---
 packages/preview-server/package.json          |   1 +
 .../src/app/preview/[...slug]/email-frame.tsx |   0
 .../src/hooks/use-iframe-color-scheme.ts      |  84 ++++++--
 pnpm-lock.yaml                                | 191 ++++++++++--------
 4 files changed, 182 insertions(+), 94 deletions(-)
 create mode 100644 packages/preview-server/src/app/preview/[...slug]/email-frame.tsx

diff --git a/packages/preview-server/package.json b/packages/preview-server/package.json
index 6a5146a175..ccef00ca09 100644
--- a/packages/preview-server/package.json
+++ b/packages/preview-server/package.json
@@ -32,6 +32,7 @@
     "@types/webpack": "5.28.5",
     "autoprefixer": "10.4.21",
     "clsx": "2.1.1",
+    "color": "5.0.2",
     "esbuild": "0.25.10",
     "framer-motion": "12.23.22",
     "json5": "2.2.3",
diff --git a/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx b/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/preview-server/src/hooks/use-iframe-color-scheme.ts b/packages/preview-server/src/hooks/use-iframe-color-scheme.ts
index 33e05a05c3..4ff1aa6a78 100644
--- a/packages/preview-server/src/hooks/use-iframe-color-scheme.ts
+++ b/packages/preview-server/src/hooks/use-iframe-color-scheme.ts
@@ -1,28 +1,88 @@
 import * as React from 'react';
+import Color from 'color';
+
+function* walkDOM(element: Element): Generator<Element> {
+  if (element.children.length > 0) {
+    for (let i = 0; i < element.children.length; i++) {
+      const child = element.children.item(i)!;
+      yield child;
+      yield* walkDOM(child);
+    }
+  }
+}
+
+function invertColor(colorString: string, mode: 'foreground' | 'background') {
+  const color = Color(colorString);
+
+  let lightness = color.lightness();
+  if (mode === 'foreground') {
+    if (lightness < 50) {
+      lightness = 100 - lightness;
+    }
+  } else if (mode === 'background') {
+    if (lightness >= 50) {
+      lightness = 100 - lightness;
+    }
+  }
+
+  return Color.hsl(color.hue(), color.saturationl(), lightness).string();
+}
+
+const colorRegex =
+  /#[0-9a-zA-Z]{0,8}|rgba?\(.*?\)|hsl\(.*?\)|hsv\(.*?\)|oklab\(.*?\)|oklch\(.*?\)/g;
+
+function applyColorInversion(iframe: HTMLIFrameElement) {
+  const { contentDocument, contentWindow } = iframe;
+  if (!contentDocument || !contentWindow) return;
+
+  for (const element of walkDOM(contentDocument.documentElement)) {
+    if (
+      element instanceof
+      (contentWindow as unknown as typeof globalThis).HTMLElement
+    ) {
+      if (element.style.color) {
+        element.style.color = element.style.color.replaceAll(
+          colorRegex,
+          (color) => invertColor(color, 'foreground'),
+        );
+        colorRegex.lastIndex = 0;
+      }
+      if (element.style.backgroundColor) {
+        element.style.backgroundColor =
+          element.style.backgroundColor.replaceAll(colorRegex, (color) =>
+            invertColor(color, 'background'),
+          );
+        colorRegex.lastIndex = 0;
+      }
+      if (element.style.borderColor) {
+        element.style.borderColor = element.style.borderColor.replaceAll(
+          colorRegex,
+          (color) => invertColor(color, 'background'),
+        );
+        colorRegex.lastIndex = 0;
+      }
+    }
+  }
+}
 
 export function useIframeColorScheme(
   iframeRef: React.RefObject<HTMLIFrameElement | null>,
-  theme: string,
+  theme: 'dark' | 'light',
 ) {
   React.useEffect(() => {
     const iframe = iframeRef.current;
 
     if (!iframe) return;
 
-    // Set on iframe element itself
-    iframe.style.colorScheme = theme;
-
-    // Set on iframe's document if available
-    if (iframe.contentDocument) {
-      iframe.contentDocument.documentElement.style.colorScheme = theme;
-      iframe.contentDocument.body.style.colorScheme = theme;
+    if (theme === 'dark') {
+      console.log('applying color inversion');
+      applyColorInversion(iframe);
     }
 
-    // Ensure styles are applied after it loads
     const handleLoad = () => {
-      if (iframe.contentDocument) {
-        iframe.contentDocument.documentElement.style.colorScheme = theme;
-        iframe.contentDocument.body.style.colorScheme = theme;
+      if (theme === 'dark') {
+        console.log('applying color inversion');
+        applyColorInversion(iframe);
       }
     };
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b93c205785..6f73304edf 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -680,6 +680,9 @@ importers:
       clsx:
         specifier: 2.1.1
         version: 2.1.1
+      color:
+        specifier: 5.0.2
+        version: 5.0.2
       esbuild:
         specifier: 0.25.10
         version: 0.25.10
@@ -2447,8 +2450,8 @@ packages:
     peerDependencies:
       three: '>= 0.159.0'
 
-  '@napi-rs/wasm-runtime@1.0.6':
-    resolution: {integrity: sha512-DXj75ewm11LIWUk198QSKUTxjyRjsBwk09MuMk5DGK+GDUtyPhhEHOGP/Xwwj3DjQXXkivoBirmOnKrLfc0+9g==}
+  '@napi-rs/wasm-runtime@1.0.7':
+    resolution: {integrity: sha512-SeDnOO0Tk7Okiq6DbXmmBODgOAb9dp9gjlphokTUxmt8U3liIP1ZsozBahH69j/RJv+Rfs6IwUKHTgQYJ/HBAw==}
 
   '@next/env@14.2.3':
     resolution: {integrity: sha512-W7fd7IbkfmeeY2gXrzJYDx8D2lWKbVoTIj1o1ScPHNzvp30s1AuoEFSdr39bC5sjxJaxTtq3OTCZboNp0lNWHA==}
@@ -2683,8 +2686,8 @@ packages:
   '@openapi-contrib/openapi-schema-to-json-schema@3.2.0':
     resolution: {integrity: sha512-Gj6C0JwCr8arj0sYuslWXUBSP/KnUlEGnPW4qxlXvAl543oaNQgMgIgkQUA6vs5BCCvwTEiL8m/wdWzfl4UvSw==}
 
-  '@oxc-project/types@0.94.0':
-    resolution: {integrity: sha512-+UgQT/4o59cZfH6Cp7G0hwmqEQ0wE+AdIwhikdwnhWI9Dp8CgSY081+Q3O67/wq3VJu8mgUEB93J9EHHn70fOw==}
+  '@oxc-project/types@0.95.0':
+    resolution: {integrity: sha512-vACy7vhpMPhjEJhULNxrdR0D943TkA/MigMpJCHmBHvMXxRStRi/dPtTlfQ3uDwWSzRpT8z+7ImjZVf8JWBocQ==}
 
   '@pkgjs/parseargs@0.11.0':
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
@@ -3606,91 +3609,91 @@ packages:
     peerDependencies:
       react: ^19.0.0
 
-  '@rolldown/binding-android-arm64@1.0.0-beta.42':
-    resolution: {integrity: sha512-W5ZKF3TP3bOWuBfotAGp+UGjxOkGV7jRmIRbBA7NFjggx7Oi6vOmGDqpHEIX7kDCiry1cnIsWQaxNvWbMdkvzQ==}
+  '@rolldown/binding-android-arm64@1.0.0-beta.44':
+    resolution: {integrity: sha512-g9ejDOehJFhxC1DIXQuZQ9bKv4lRDioOTL42cJjFjqKPl1L7DVb9QQQE1FxokGEIMr6FezLipxwnzOXWe7DNPg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [android]
 
-  '@rolldown/binding-darwin-arm64@1.0.0-beta.42':
-    resolution: {integrity: sha512-abw/wtgJA8OCgaTlL+xJxnN/Z01BwV1rfzIp5Hh9x+IIO6xOBfPsQ0nzi0+rWx3TyZ9FZXyC7bbC+5NpQ9EaXQ==}
+  '@rolldown/binding-darwin-arm64@1.0.0-beta.44':
+    resolution: {integrity: sha512-PxAW1PXLPmCzfhfKIS53kwpjLGTUdIfX4Ht+l9mj05C3lYCGaGowcNsYi2rdxWH24vSTmeK+ajDNRmmmrK0M7g==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [darwin]
 
-  '@rolldown/binding-darwin-x64@1.0.0-beta.42':
-    resolution: {integrity: sha512-Y/UrZIRVr8CvXVEB88t6PeC46r1K9/QdPEo2ASE/b/KBEyXIx+QbM6kv9QfQVWU2Atly2+SVsQzxQsIvuk3lZQ==}
+  '@rolldown/binding-darwin-x64@1.0.0-beta.44':
+    resolution: {integrity: sha512-/CtQqs1oO9uSb5Ju60rZvsdjE7Pzn8EK2ISAdl2jedjMzeD/4neNyCbwyJOAPzU+GIQTZVyrFZJX+t7HXR1R/g==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [darwin]
 
-  '@rolldown/binding-freebsd-x64@1.0.0-beta.42':
-    resolution: {integrity: sha512-zRM0oOk7BZiy6DoWBvdV4hyEg+j6+WcBZIMHVirMEZRu8hd18kZdJkg+bjVMfCEhwpWeFUfBfZ1qcaZ5UdYzlQ==}
+  '@rolldown/binding-freebsd-x64@1.0.0-beta.44':
+    resolution: {integrity: sha512-V5Q5W9c4+2GJ4QabmjmVV6alY97zhC/MZBaLkDtHwGy3qwzbM4DYgXUbun/0a8AH5hGhuU27tUIlYz6ZBlvgOA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [freebsd]
 
-  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-beta.42':
-    resolution: {integrity: sha512-6RjFaC52QNwo7ilU8C5H7swbGlgfTkG9pudXwzr3VYyT18s0C9gLg3mvc7OMPIGqNxnQ0M5lU8j6aQCk2DTRVg==}
+  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-beta.44':
+    resolution: {integrity: sha512-X6adjkHeFqKsTU0FXdNN9HY4LDozPqIfHcnXovE5RkYLWIjMWuc489mIZ6iyhrMbCqMUla9IOsh5dvXSGT9o9A==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
-  '@rolldown/binding-linux-arm64-gnu@1.0.0-beta.42':
-    resolution: {integrity: sha512-LMYHM5Sf6ROq+VUwHMDVX2IAuEsWTv4SnlFEedBnMGpvRuQ14lCmD4m5Q8sjyAQCgyha9oghdGoK8AEg1sXZKg==}
+  '@rolldown/binding-linux-arm64-gnu@1.0.0-beta.44':
+    resolution: {integrity: sha512-kRRKGZI4DXWa6ANFr3dLA85aSVkwPdgXaRjfanwY84tfc3LncDiIjyWCb042e3ckPzYhHSZ3LmisO+cdOIYL6Q==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
 
-  '@rolldown/binding-linux-arm64-musl@1.0.0-beta.42':
-    resolution: {integrity: sha512-/bNTYb9aKNhzdbPn3O4MK2aLv55AlrkUKPE4KNfBYjkoZUfDr4jWp7gsSlvTc5A/99V1RCm9axvt616ZzeXGyA==}
+  '@rolldown/binding-linux-arm64-musl@1.0.0-beta.44':
+    resolution: {integrity: sha512-hMtiN9xX1NhxXBa2U3Up4XkVcsVp2h73yYtMDY59z9CDLEZLrik9RVLhBL5QtoX4zZKJ8HZKJtWuGYvtmkCbIQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
 
-  '@rolldown/binding-linux-x64-gnu@1.0.0-beta.42':
-    resolution: {integrity: sha512-n/SLa4h342oyeGykZdch7Y3GNCNliRPL4k5wkeZ/5eQZs+c6/ZG1SHCJQoy7bZcmxiMyaXs9HoFmv1PEKrZgWg==}
+  '@rolldown/binding-linux-x64-gnu@1.0.0-beta.44':
+    resolution: {integrity: sha512-rd1LzbpXQuR8MTG43JB9VyXDjG7ogSJbIkBpZEHJ8oMKzL6j47kQT5BpIXrg3b5UVygW9QCI2fpFdMocT5Kudg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
 
-  '@rolldown/binding-linux-x64-musl@1.0.0-beta.42':
-    resolution: {integrity: sha512-4PSd46sFzqpLHSGdaSViAb1mk55sCUMpJg+X8ittXaVocQsV3QLG/uydSH8RyL0ngHX5fy3D70LcCzlB15AgHw==}
+  '@rolldown/binding-linux-x64-musl@1.0.0-beta.44':
+    resolution: {integrity: sha512-qI2IiPqmPRW25exXkuQr3TlweCDc05YvvbSDRPCuPsWkwb70dTiSoXn8iFxT4PWqTi71wWHg1Wyta9PlVhX5VA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
 
-  '@rolldown/binding-openharmony-arm64@1.0.0-beta.42':
-    resolution: {integrity: sha512-BmWoeJJyeZXmZBcfoxG6J9+rl2G7eO47qdTkAzEegj4n3aC6CBIHOuDcbE8BvhZaEjQR0nh0nJrtEDlt65Q7Sw==}
+  '@rolldown/binding-openharmony-arm64@1.0.0-beta.44':
+    resolution: {integrity: sha512-+vHvEc1pL5iJRFlldLC8mjm6P4Qciyfh2bh5ZI6yxDQKbYhCHRKNURaKz1mFcwxhVL5YMYsLyaqM3qizVif9MQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [openharmony]
 
-  '@rolldown/binding-wasm32-wasi@1.0.0-beta.42':
-    resolution: {integrity: sha512-2Ft32F7uiDTrGZUKws6CLNTlvTWHC33l4vpXrzUucf9rYtUThAdPCOt89Pmn13tNX6AulxjGEP2R0nZjTSW3eQ==}
+  '@rolldown/binding-wasm32-wasi@1.0.0-beta.44':
+    resolution: {integrity: sha512-XSgLxRrtFj6RpTeMYmmQDAwHjKseYGKUn5LPiIdW4Cq+f5SBSStL2ToBDxkbdxKPEbCZptnLPQ/nfKcAxrC8Xg==}
     engines: {node: '>=14.0.0'}
     cpu: [wasm32]
 
-  '@rolldown/binding-win32-arm64-msvc@1.0.0-beta.42':
-    resolution: {integrity: sha512-hC1kShXW/z221eG+WzQMN06KepvPbMBknF0iGR3VMYJLOe9gwnSTfGxFT5hf8XrPv7CEZqTWRd0GQpkSHRbGsw==}
+  '@rolldown/binding-win32-arm64-msvc@1.0.0-beta.44':
+    resolution: {integrity: sha512-cF1LJdDIX02cJrFrX3wwQ6IzFM7I74BYeKFkzdcIA4QZ0+2WA7/NsKIgjvrunupepWb1Y6PFWdRlHSaz5AW1Wg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [win32]
 
-  '@rolldown/binding-win32-ia32-msvc@1.0.0-beta.42':
-    resolution: {integrity: sha512-AICBYromawouGjj+GS33369E8Vwhy6UwhQEhQ5evfS8jPCsyVvoICJatbDGDGH01dwtVGLD5eDFzPicUOVpe4g==}
+  '@rolldown/binding-win32-ia32-msvc@1.0.0-beta.44':
+    resolution: {integrity: sha512-5uaJonDafhHiMn+iEh7qUp3QQ4Gihv3lEOxKfN8Vwadpy0e+5o28DWI42DpJ9YBYMrVy4JOWJ/3etB/sptpUwA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [ia32]
     os: [win32]
 
-  '@rolldown/binding-win32-x64-msvc@1.0.0-beta.42':
-    resolution: {integrity: sha512-XpZ0M+tjoEiSc9c+uZR7FCnOI0uxDRNs1elGOMjeB0pUP1QmvVbZGYNsyLbLoP4u7e3VQN8rie1OQ8/mB6rcJg==}
+  '@rolldown/binding-win32-x64-msvc@1.0.0-beta.44':
+    resolution: {integrity: sha512-vsqhWAFJkkmgfBN/lkLCWTXF1PuPhMjfnAyru48KvF7mVh2+K7WkKYHezF3Fjz4X/mPScOcIv+g6cf6wnI6eWg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [win32]
 
-  '@rolldown/pluginutils@1.0.0-beta.42':
-    resolution: {integrity: sha512-N7pQzk9CyE7q0bBN/q0J8s6Db279r5kUZc6d7/wWRe9/zXqC52HQovVyu6iXPIDY4BEzzgbVLhVFXrOuGJ22ZQ==}
+  '@rolldown/pluginutils@1.0.0-beta.44':
+    resolution: {integrity: sha512-g6eW7Zwnr2c5RADIoqziHoVs6b3W5QTQ4+qbpfjbkMJ9x+8Og211VW/oot2dj9dVwaK/UyC6Yo+02gV+wWQVNg==}
 
   '@rollup/pluginutils@5.1.4':
     resolution: {integrity: sha512-USm05zrsFxYLPdWWq+K3STlWiT/3ELn3RcV5hJMghpeAIhxfsUIg6mt12CBJBInWMV4VneoV7SfGv8xIwo2qNQ==}
@@ -4504,10 +4507,6 @@ packages:
     resolution: {integrity: sha512-BGcItUBWSMRgOCe+SVZJ+S7yTRG0eGt9cXAHev72yuGcY23hnLA7Bky5L/xLyPINoSN95geovfBkqoTlNZYa7w==}
     engines: {node: '>=14'}
 
-  ansis@4.2.0:
-    resolution: {integrity: sha512-HqZ5rWlFjGiV0tDm3UxxgNRqsOTniqoKZu0pIAfh7TZQMGuZK+hH0drySty0si0QXj1ieop4+SkSfPZBPPkHig==}
-    engines: {node: '>=14'}
-
   any-promise@1.3.0:
     resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
 
@@ -4885,16 +4884,32 @@ packages:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
 
+  color-convert@3.1.2:
+    resolution: {integrity: sha512-UNqkvCDXstVck3kdowtOTWROIJQwafjOfXSmddoDrXo4cewMKmusCeF22Q24zvjR8nwWib/3S/dfyzPItPEiJg==}
+    engines: {node: '>=14.6'}
+
   color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
+  color-name@2.0.2:
+    resolution: {integrity: sha512-9vEt7gE16EW7Eu7pvZnR0abW9z6ufzhXxGXZEVU9IqPdlsUiMwJeJfRtq0zePUmnbHGT9zajca7mX8zgoayo4A==}
+    engines: {node: '>=12.20'}
+
   color-string@1.9.1:
     resolution: {integrity: sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==}
 
+  color-string@2.1.2:
+    resolution: {integrity: sha512-RxmjYxbWemV9gKu4zPgiZagUxbH3RQpEIO77XoSSX0ivgABDZ+h8Zuash/EMFLTI4N9QgFPOJ6JQpPZKFxa+dA==}
+    engines: {node: '>=18'}
+
   color@4.2.3:
     resolution: {integrity: sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==}
     engines: {node: '>=12.5.0'}
 
+  color@5.0.2:
+    resolution: {integrity: sha512-e2hz5BzbUPcYlIRHo8ieAhYgoajrJr+hWoceg6E345TPsATMUKqDgzt8fSXZJJbxfpiPzkWyphz8yn8At7q3fA==}
+    engines: {node: '>=18'}
+
   combined-stream@1.0.8:
     resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
     engines: {node: '>= 0.8'}
@@ -7743,8 +7758,8 @@ packages:
       vue-tsc:
         optional: true
 
-  rolldown@1.0.0-beta.42:
-    resolution: {integrity: sha512-xaPcckj+BbJhYLsv8gOqezc8EdMcKKe/gk8v47B0KPvgABDrQ0qmNPAiT/gh9n9Foe0bUkEv2qzj42uU5q1WRg==}
+  rolldown@1.0.0-beta.44:
+    resolution: {integrity: sha512-gcqgyCi3g93Fhr49PKvymE8PoaGS0sf6ajQrsYaQ8o5de6aUEbD6rJZiJbhOfpcqOnycgsAsUNPYri1h25NgsQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
 
@@ -10594,7 +10609,7 @@ snapshots:
       promise-worker-transferable: 1.0.4
       three: 0.170.0
 
-  '@napi-rs/wasm-runtime@1.0.6':
+  '@napi-rs/wasm-runtime@1.0.7':
     dependencies:
       '@emnapi/core': 1.5.0
       '@emnapi/runtime': 1.5.0
@@ -10772,7 +10787,7 @@ snapshots:
     dependencies:
       fast-deep-equal: 3.1.3
 
-  '@oxc-project/types@0.94.0': {}
+  '@oxc-project/types@0.95.0': {}
 
   '@pkgjs/parseargs@0.11.0':
     optional: true
@@ -11692,51 +11707,51 @@ snapshots:
       '@react-email/section': 0.0.14(react@19.0.0)
       react: 19.0.0
 
-  '@rolldown/binding-android-arm64@1.0.0-beta.42':
+  '@rolldown/binding-android-arm64@1.0.0-beta.44':
     optional: true
 
-  '@rolldown/binding-darwin-arm64@1.0.0-beta.42':
+  '@rolldown/binding-darwin-arm64@1.0.0-beta.44':
     optional: true
 
-  '@rolldown/binding-darwin-x64@1.0.0-beta.42':
+  '@rolldown/binding-darwin-x64@1.0.0-beta.44':
     optional: true
 
-  '@rolldown/binding-freebsd-x64@1.0.0-beta.42':
+  '@rolldown/binding-freebsd-x64@1.0.0-beta.44':
     optional: true
 
-  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-beta.42':
+  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-beta.44':
     optional: true
 
-  '@rolldown/binding-linux-arm64-gnu@1.0.0-beta.42':
+  '@rolldown/binding-linux-arm64-gnu@1.0.0-beta.44':
     optional: true
 
-  '@rolldown/binding-linux-arm64-musl@1.0.0-beta.42':
+  '@rolldown/binding-linux-arm64-musl@1.0.0-beta.44':
     optional: true
 
-  '@rolldown/binding-linux-x64-gnu@1.0.0-beta.42':
+  '@rolldown/binding-linux-x64-gnu@1.0.0-beta.44':
     optional: true
 
-  '@rolldown/binding-linux-x64-musl@1.0.0-beta.42':
+  '@rolldown/binding-linux-x64-musl@1.0.0-beta.44':
     optional: true
 
-  '@rolldown/binding-openharmony-arm64@1.0.0-beta.42':
+  '@rolldown/binding-openharmony-arm64@1.0.0-beta.44':
     optional: true
 
-  '@rolldown/binding-wasm32-wasi@1.0.0-beta.42':
+  '@rolldown/binding-wasm32-wasi@1.0.0-beta.44':
     dependencies:
-      '@napi-rs/wasm-runtime': 1.0.6
+      '@napi-rs/wasm-runtime': 1.0.7
     optional: true
 
-  '@rolldown/binding-win32-arm64-msvc@1.0.0-beta.42':
+  '@rolldown/binding-win32-arm64-msvc@1.0.0-beta.44':
     optional: true
 
-  '@rolldown/binding-win32-ia32-msvc@1.0.0-beta.42':
+  '@rolldown/binding-win32-ia32-msvc@1.0.0-beta.44':
     optional: true
 
-  '@rolldown/binding-win32-x64-msvc@1.0.0-beta.42':
+  '@rolldown/binding-win32-x64-msvc@1.0.0-beta.44':
     optional: true
 
-  '@rolldown/pluginutils@1.0.0-beta.42': {}
+  '@rolldown/pluginutils@1.0.0-beta.44': {}
 
   '@rollup/pluginutils@5.1.4(rollup@4.52.2)':
     dependencies:
@@ -12675,8 +12690,6 @@ snapshots:
 
   ansis@4.1.0: {}
 
-  ansis@4.2.0: {}
-
   any-promise@1.3.0: {}
 
   anymatch@3.1.3:
@@ -13069,18 +13082,33 @@ snapshots:
     dependencies:
       color-name: 1.1.4
 
+  color-convert@3.1.2:
+    dependencies:
+      color-name: 2.0.2
+
   color-name@1.1.4: {}
 
+  color-name@2.0.2: {}
+
   color-string@1.9.1:
     dependencies:
       color-name: 1.1.4
       simple-swizzle: 0.2.2
 
+  color-string@2.1.2:
+    dependencies:
+      color-name: 2.0.2
+
   color@4.2.3:
     dependencies:
       color-convert: 2.0.1
       color-string: 1.9.1
 
+  color@5.0.2:
+    dependencies:
+      color-convert: 3.1.2
+      color-string: 2.1.2
+
   combined-stream@1.0.8:
     dependencies:
       delayed-stream: 1.0.0
@@ -16626,7 +16654,7 @@ snapshots:
     dependencies:
       glob: 7.2.3
 
-  rolldown-plugin-dts@0.16.5(rolldown@1.0.0-beta.42)(typescript@5.8.3):
+  rolldown-plugin-dts@0.16.5(rolldown@1.0.0-beta.44)(typescript@5.8.3):
     dependencies:
       '@babel/generator': 7.28.3
       '@babel/parser': 7.28.4
@@ -16637,33 +16665,32 @@ snapshots:
       dts-resolver: 2.1.2
       get-tsconfig: 4.10.1
       magic-string: 0.30.19
-      rolldown: 1.0.0-beta.42
+      rolldown: 1.0.0-beta.44
     optionalDependencies:
       typescript: 5.8.3
     transitivePeerDependencies:
       - oxc-resolver
       - supports-color
 
-  rolldown@1.0.0-beta.42:
+  rolldown@1.0.0-beta.44:
     dependencies:
-      '@oxc-project/types': 0.94.0
-      '@rolldown/pluginutils': 1.0.0-beta.42
-      ansis: 4.2.0
+      '@oxc-project/types': 0.95.0
+      '@rolldown/pluginutils': 1.0.0-beta.44
     optionalDependencies:
-      '@rolldown/binding-android-arm64': 1.0.0-beta.42
-      '@rolldown/binding-darwin-arm64': 1.0.0-beta.42
-      '@rolldown/binding-darwin-x64': 1.0.0-beta.42
-      '@rolldown/binding-freebsd-x64': 1.0.0-beta.42
-      '@rolldown/binding-linux-arm-gnueabihf': 1.0.0-beta.42
-      '@rolldown/binding-linux-arm64-gnu': 1.0.0-beta.42
-      '@rolldown/binding-linux-arm64-musl': 1.0.0-beta.42
-      '@rolldown/binding-linux-x64-gnu': 1.0.0-beta.42
-      '@rolldown/binding-linux-x64-musl': 1.0.0-beta.42
-      '@rolldown/binding-openharmony-arm64': 1.0.0-beta.42
-      '@rolldown/binding-wasm32-wasi': 1.0.0-beta.42
-      '@rolldown/binding-win32-arm64-msvc': 1.0.0-beta.42
-      '@rolldown/binding-win32-ia32-msvc': 1.0.0-beta.42
-      '@rolldown/binding-win32-x64-msvc': 1.0.0-beta.42
+      '@rolldown/binding-android-arm64': 1.0.0-beta.44
+      '@rolldown/binding-darwin-arm64': 1.0.0-beta.44
+      '@rolldown/binding-darwin-x64': 1.0.0-beta.44
+      '@rolldown/binding-freebsd-x64': 1.0.0-beta.44
+      '@rolldown/binding-linux-arm-gnueabihf': 1.0.0-beta.44
+      '@rolldown/binding-linux-arm64-gnu': 1.0.0-beta.44
+      '@rolldown/binding-linux-arm64-musl': 1.0.0-beta.44
+      '@rolldown/binding-linux-x64-gnu': 1.0.0-beta.44
+      '@rolldown/binding-linux-x64-musl': 1.0.0-beta.44
+      '@rolldown/binding-openharmony-arm64': 1.0.0-beta.44
+      '@rolldown/binding-wasm32-wasi': 1.0.0-beta.44
+      '@rolldown/binding-win32-arm64-msvc': 1.0.0-beta.44
+      '@rolldown/binding-win32-ia32-msvc': 1.0.0-beta.44
+      '@rolldown/binding-win32-x64-msvc': 1.0.0-beta.44
 
   rollup@4.52.2:
     dependencies:
@@ -17565,8 +17592,8 @@ snapshots:
       diff: 8.0.2
       empathic: 2.0.0
       hookable: 5.5.3
-      rolldown: 1.0.0-beta.42
-      rolldown-plugin-dts: 0.16.5(rolldown@1.0.0-beta.42)(typescript@5.8.3)
+      rolldown: 1.0.0-beta.44
+      rolldown-plugin-dts: 0.16.5(rolldown@1.0.0-beta.44)(typescript@5.8.3)
       semver: 7.7.2
       tinyexec: 1.0.1
       tinyglobby: 0.2.15

From 84b0727e6fa45c7d30fcc8ae8d88f6e0354d1adc Mon Sep 17 00:00:00 2001
From: gabriel miranda <gabrielmfern@outlook.com>
Date: Thu, 23 Oct 2025 15:01:13 -0300
Subject: [PATCH 12/33] first working version! keying the iframe with the theme

---
 .../src/app/preview/[...slug]/email-frame.tsx | 120 ++++++++++++++++++
 .../src/app/preview/[...slug]/preview.tsx     |  21 +--
 .../src/hooks/use-iframe-color-scheme.ts      |  95 --------------
 3 files changed, 126 insertions(+), 110 deletions(-)
 delete mode 100644 packages/preview-server/src/hooks/use-iframe-color-scheme.ts

diff --git a/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx b/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx
index e69de29bb2..5f6617b99a 100644
--- a/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx
+++ b/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx
@@ -0,0 +1,120 @@
+import Color from 'color';
+import { type RefObject, useRef, ComponentProps } from 'react';
+import { makeIframeDocumentBubbleEvents } from '../../../components/resizable-wrapper';
+
+function* walkDOM(element: Element): Generator<Element> {
+  if (element.children.length > 0) {
+    for (let i = 0; i < element.children.length; i++) {
+      const child = element.children.item(i)!;
+      yield child;
+      yield* walkDOM(child);
+    }
+  }
+}
+
+function invertColor(colorString: string, mode: 'foreground' | 'background') {
+  const color = Color(colorString);
+
+  let lightness = color.lightness();
+  if (mode === 'foreground') {
+    if (lightness < 50) {
+      lightness = 100 - lightness;
+    }
+  } else if (mode === 'background') {
+    if (lightness >= 50) {
+      lightness = 100 - lightness;
+    }
+  }
+
+  return Color.hsl(color.hue(), color.saturationl(), lightness).string();
+}
+
+const colorRegex =
+  /#[0-9a-zA-Z]{0,8}|rgba?\(.*?\)|hsl\(.*?\)|hsv\(.*?\)|oklab\(.*?\)|oklch\(.*?\)/g;
+
+function applyColorInversion(iframe: HTMLIFrameElement) {
+  const { contentDocument, contentWindow } = iframe;
+  if (!contentDocument || !contentWindow) return;
+
+  for (const element of walkDOM(contentDocument.documentElement)) {
+    if (
+      element instanceof
+      (contentWindow as unknown as typeof globalThis).HTMLElement
+    ) {
+      if (element.style.color) {
+        element.style.color = element.style.color.replaceAll(
+          colorRegex,
+          (color) => invertColor(color, 'foreground'),
+        );
+        colorRegex.lastIndex = 0;
+      }
+      if (element.style.backgroundColor) {
+        element.style.backgroundColor =
+          element.style.backgroundColor.replaceAll(colorRegex, (color) =>
+            invertColor(color, 'background'),
+          );
+        colorRegex.lastIndex = 0;
+      }
+      if (element.style.borderColor) {
+        element.style.borderColor = element.style.borderColor.replaceAll(
+          colorRegex,
+          (color) => invertColor(color, 'background'),
+        );
+        colorRegex.lastIndex = 0;
+      }
+    }
+  }
+}
+
+interface EmailFrameProps extends Omit<ComponentProps<'iframe'>, 'ref'> {
+  markup: string;
+  width: number;
+  height: number;
+  theme: 'dark' | 'light';
+}
+
+export function EmailFrame({
+  markup,
+  width,
+  height,
+  theme,
+  ...rest
+}: EmailFrameProps) {
+
+  return (
+    <iframe
+      srcDoc={markup}
+      width={width}
+      height={height}
+      {...rest}
+      key={`iframe-on-${theme}-mode`}
+      ref={(iframe) => {
+        if (!iframe) return;
+
+        if (theme === 'dark') {
+          applyColorInversion(iframe);
+        }
+
+        const handleLoad = () => {
+          if (theme === 'dark') {
+            applyColorInversion(iframe);
+          }
+        };
+
+        iframe.addEventListener('load', handleLoad);
+
+        let callback: () => void;
+        if (iframe) {
+          callback = makeIframeDocumentBubbleEvents(iframe);
+        }
+
+        return () => {
+          callback?.();
+          if (iframe) {
+            iframe.removeEventListener('load', handleLoad);
+          }
+        };
+      }}
+    />
+  );
+}
diff --git a/packages/preview-server/src/app/preview/[...slug]/preview.tsx b/packages/preview-server/src/app/preview/[...slug]/preview.tsx
index ea24ccd0c7..95deb562ee 100644
--- a/packages/preview-server/src/app/preview/[...slug]/preview.tsx
+++ b/packages/preview-server/src/app/preview/[...slug]/preview.tsx
@@ -22,6 +22,7 @@ import { useClampedState } from '../../../hooks/use-clamped-state';
 import { useIframeColorScheme } from '../../../hooks/use-iframe-color-scheme';
 import { cn } from '../../../utils';
 import { ErrorOverlay } from './error-overlay';
+import { EmailFrame } from './email-frame';
 
 interface PreviewProps extends React.ComponentProps<'div'> {
   emailTitle: string;
@@ -61,9 +62,6 @@ const Preview = ({ emailTitle, className, ...props }: PreviewProps) => {
     );
   };
 
-  const iframeRef = useRef<HTMLIFrameElement>(null);
-  useIframeColorScheme(iframeRef, activeTheme);
-
   const hasRenderingMetadata = typeof renderedEmailMetadata !== 'undefined';
   const hasErrors = 'error' in renderingResult;
 
@@ -184,19 +182,12 @@ const Preview = ({ emailTitle, className, ...props }: PreviewProps) => {
                 }}
                 width={width}
               >
-                <iframe
+                <EmailFrame
                   className="max-h-full rounded-lg bg-white [color-scheme:auto]"
-                  ref={(iframe) => {
-                    iframeRef.current = iframe;
-                    if (iframe) {
-                      return makeIframeDocumentBubbleEvents(iframe);
-                    }
-                  }}
-                  srcDoc={renderedEmailMetadata.markup}
-                  style={{
-                    width: `${width}px`,
-                    height: `${height}px`,
-                  }}
+                  theme={activeTheme}
+                  markup={renderedEmailMetadata.markup}
+                  width={width}
+                  height={height}
                   title={emailTitle}
                 />
               </ResizableWrapper>
diff --git a/packages/preview-server/src/hooks/use-iframe-color-scheme.ts b/packages/preview-server/src/hooks/use-iframe-color-scheme.ts
deleted file mode 100644
index 4ff1aa6a78..0000000000
--- a/packages/preview-server/src/hooks/use-iframe-color-scheme.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-import * as React from 'react';
-import Color from 'color';
-
-function* walkDOM(element: Element): Generator<Element> {
-  if (element.children.length > 0) {
-    for (let i = 0; i < element.children.length; i++) {
-      const child = element.children.item(i)!;
-      yield child;
-      yield* walkDOM(child);
-    }
-  }
-}
-
-function invertColor(colorString: string, mode: 'foreground' | 'background') {
-  const color = Color(colorString);
-
-  let lightness = color.lightness();
-  if (mode === 'foreground') {
-    if (lightness < 50) {
-      lightness = 100 - lightness;
-    }
-  } else if (mode === 'background') {
-    if (lightness >= 50) {
-      lightness = 100 - lightness;
-    }
-  }
-
-  return Color.hsl(color.hue(), color.saturationl(), lightness).string();
-}
-
-const colorRegex =
-  /#[0-9a-zA-Z]{0,8}|rgba?\(.*?\)|hsl\(.*?\)|hsv\(.*?\)|oklab\(.*?\)|oklch\(.*?\)/g;
-
-function applyColorInversion(iframe: HTMLIFrameElement) {
-  const { contentDocument, contentWindow } = iframe;
-  if (!contentDocument || !contentWindow) return;
-
-  for (const element of walkDOM(contentDocument.documentElement)) {
-    if (
-      element instanceof
-      (contentWindow as unknown as typeof globalThis).HTMLElement
-    ) {
-      if (element.style.color) {
-        element.style.color = element.style.color.replaceAll(
-          colorRegex,
-          (color) => invertColor(color, 'foreground'),
-        );
-        colorRegex.lastIndex = 0;
-      }
-      if (element.style.backgroundColor) {
-        element.style.backgroundColor =
-          element.style.backgroundColor.replaceAll(colorRegex, (color) =>
-            invertColor(color, 'background'),
-          );
-        colorRegex.lastIndex = 0;
-      }
-      if (element.style.borderColor) {
-        element.style.borderColor = element.style.borderColor.replaceAll(
-          colorRegex,
-          (color) => invertColor(color, 'background'),
-        );
-        colorRegex.lastIndex = 0;
-      }
-    }
-  }
-}
-
-export function useIframeColorScheme(
-  iframeRef: React.RefObject<HTMLIFrameElement | null>,
-  theme: 'dark' | 'light',
-) {
-  React.useEffect(() => {
-    const iframe = iframeRef.current;
-
-    if (!iframe) return;
-
-    if (theme === 'dark') {
-      console.log('applying color inversion');
-      applyColorInversion(iframe);
-    }
-
-    const handleLoad = () => {
-      if (theme === 'dark') {
-        console.log('applying color inversion');
-        applyColorInversion(iframe);
-      }
-    };
-
-    iframe.addEventListener('load', handleLoad);
-
-    return () => {
-      iframe.removeEventListener('load', handleLoad);
-    };
-  }, [theme, iframeRef]);
-}

From 358ac3abc5b6509c0dd95adacad8d2950c0568a8 Mon Sep 17 00:00:00 2001
From: gabriel miranda <gabrielmfern@outlook.com>
Date: Thu, 23 Oct 2025 15:02:30 -0300
Subject: [PATCH 13/33] add comment

---
 .../preview-server/src/app/preview/[...slug]/email-frame.tsx   | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx b/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx
index 5f6617b99a..4776bfb553 100644
--- a/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx
+++ b/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx
@@ -80,13 +80,14 @@ export function EmailFrame({
   theme,
   ...rest
 }: EmailFrameProps) {
-
   return (
     <iframe
       srcDoc={markup}
       width={width}
       height={height}
       {...rest}
+      // This key makes sure that the iframe itself remounts to the DOM when theme changes, so
+      // that the color changes in dark mode can be easily undone when switching to light mode.
       key={`iframe-on-${theme}-mode`}
       ref={(iframe) => {
         if (!iframe) return;

From 52643e5165fee76ce6ab3c24de7e8eff7d265051 Mon Sep 17 00:00:00 2001
From: gabriel miranda <gabrielmfern@outlook.com>
Date: Thu, 23 Oct 2025 15:02:43 -0300
Subject: [PATCH 14/33] lint

---
 .../preview-server/src/app/preview/[...slug]/email-frame.tsx    | 2 +-
 packages/preview-server/src/app/preview/[...slug]/preview.tsx   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx b/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx
index 4776bfb553..25c827a802 100644
--- a/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx
+++ b/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx
@@ -1,5 +1,5 @@
 import Color from 'color';
-import { type RefObject, useRef, ComponentProps } from 'react';
+import { type ComponentProps, type RefObject, useRef } from 'react';
 import { makeIframeDocumentBubbleEvents } from '../../../components/resizable-wrapper';
 
 function* walkDOM(element: Element): Generator<Element> {
diff --git a/packages/preview-server/src/app/preview/[...slug]/preview.tsx b/packages/preview-server/src/app/preview/[...slug]/preview.tsx
index 95deb562ee..57c4ce4f7a 100644
--- a/packages/preview-server/src/app/preview/[...slug]/preview.tsx
+++ b/packages/preview-server/src/app/preview/[...slug]/preview.tsx
@@ -21,8 +21,8 @@ import { usePreviewContext } from '../../../contexts/preview';
 import { useClampedState } from '../../../hooks/use-clamped-state';
 import { useIframeColorScheme } from '../../../hooks/use-iframe-color-scheme';
 import { cn } from '../../../utils';
-import { ErrorOverlay } from './error-overlay';
 import { EmailFrame } from './email-frame';
+import { ErrorOverlay } from './error-overlay';
 
 interface PreviewProps extends React.ComponentProps<'div'> {
   emailTitle: string;

From 09145b040ca05033662170aa8dc154bc128a7bc3 Mon Sep 17 00:00:00 2001
From: gabriel miranda <gabrielmfern@outlook.com>
Date: Thu, 23 Oct 2025 15:54:40 -0300
Subject: [PATCH 15/33] fix ts issue

---
 packages/preview-server/src/app/preview/[...slug]/preview.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/preview-server/src/app/preview/[...slug]/preview.tsx b/packages/preview-server/src/app/preview/[...slug]/preview.tsx
index 57c4ce4f7a..5a5d98f71c 100644
--- a/packages/preview-server/src/app/preview/[...slug]/preview.tsx
+++ b/packages/preview-server/src/app/preview/[...slug]/preview.tsx
@@ -19,7 +19,6 @@ import { ThemeToggleGroup } from '../../../components/topbar/theme-toggle-group'
 import { ViewSizeControls } from '../../../components/topbar/view-size-controls';
 import { usePreviewContext } from '../../../contexts/preview';
 import { useClampedState } from '../../../hooks/use-clamped-state';
-import { useIframeColorScheme } from '../../../hooks/use-iframe-color-scheme';
 import { cn } from '../../../utils';
 import { EmailFrame } from './email-frame';
 import { ErrorOverlay } from './error-overlay';

From 8783f0a8573f68a39b7a8555cb3d8e8c939db310 Mon Sep 17 00:00:00 2001
From: gabriel miranda <gabrielmfern@outlook.com>
Date: Thu, 23 Oct 2025 15:56:30 -0300
Subject: [PATCH 16/33] invert main body text color, and invert border,
 background

---
 .../src/app/preview/[...slug]/email-frame.tsx | 38 ++++++++++++-------
 1 file changed, 25 insertions(+), 13 deletions(-)

diff --git a/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx b/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx
index 25c827a802..2530202253 100644
--- a/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx
+++ b/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx
@@ -1,5 +1,5 @@
 import Color from 'color';
-import { type ComponentProps, type RefObject, useRef } from 'react';
+import type { ComponentProps } from 'react';
 import { makeIframeDocumentBubbleEvents } from '../../../components/resizable-wrapper';
 
 function* walkDOM(element: Element): Generator<Element> {
@@ -36,6 +36,13 @@ function applyColorInversion(iframe: HTMLIFrameElement) {
   const { contentDocument, contentWindow } = iframe;
   if (!contentDocument || !contentWindow) return;
 
+  if (!contentDocument.body.style.color) {
+    contentDocument.body.style.color = invertColor(
+      'rgb(0, 0, 0)',
+      'foreground',
+    );
+  }
+
   for (const element of walkDOM(contentDocument.documentElement)) {
     if (
       element instanceof
@@ -48,6 +55,13 @@ function applyColorInversion(iframe: HTMLIFrameElement) {
         );
         colorRegex.lastIndex = 0;
       }
+      if (element.style.background) {
+        element.style.background =
+          element.style.background.replaceAll(colorRegex, (color) =>
+            invertColor(color, 'background'),
+          );
+        colorRegex.lastIndex = 0;
+      }
       if (element.style.backgroundColor) {
         element.style.backgroundColor =
           element.style.backgroundColor.replaceAll(colorRegex, (color) =>
@@ -62,6 +76,13 @@ function applyColorInversion(iframe: HTMLIFrameElement) {
         );
         colorRegex.lastIndex = 0;
       }
+      if (element.style.border) {
+        element.style.border = element.style.border.replaceAll(
+          colorRegex,
+          (color) => invertColor(color, 'background'),
+        );
+        colorRegex.lastIndex = 0;
+      }
     }
   }
 }
@@ -92,10 +113,6 @@ export function EmailFrame({
       ref={(iframe) => {
         if (!iframe) return;
 
-        if (theme === 'dark') {
-          applyColorInversion(iframe);
-        }
-
         const handleLoad = () => {
           if (theme === 'dark') {
             applyColorInversion(iframe);
@@ -104,16 +121,11 @@ export function EmailFrame({
 
         iframe.addEventListener('load', handleLoad);
 
-        let callback: () => void;
-        if (iframe) {
-          callback = makeIframeDocumentBubbleEvents(iframe);
-        }
+        const cleanupEventBubbling = makeIframeDocumentBubbleEvents(iframe);
 
         return () => {
-          callback?.();
-          if (iframe) {
-            iframe.removeEventListener('load', handleLoad);
-          }
+          cleanupEventBubbling();
+          iframe.removeEventListener('load', handleLoad);
         };
       }}
     />

From 4859be22e5e79eb3bb4527b698b9173ab80c0eb4 Mon Sep 17 00:00:00 2001
From: gabriel miranda <gabrielmfern@outlook.com>
Date: Thu, 23 Oct 2025 16:09:52 -0300
Subject: [PATCH 17/33] add missing darkmode applying

---
 .../preview-server/src/app/preview/[...slug]/email-frame.tsx  | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx b/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx
index 2530202253..3758769b40 100644
--- a/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx
+++ b/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx
@@ -113,6 +113,10 @@ export function EmailFrame({
       ref={(iframe) => {
         if (!iframe) return;
 
+        if (theme === 'dark') {
+          applyColorInversion(iframe);
+        }
+
         const handleLoad = () => {
           if (theme === 'dark') {
             applyColorInversion(iframe);

From 42e9499f5e1c4db313f71f247b824dd0ffdd7700 Mon Sep 17 00:00:00 2001
From: gabriel miranda <gabrielmfern@outlook.com>
Date: Thu, 23 Oct 2025 16:29:40 -0300
Subject: [PATCH 18/33] improve inversion function

---
 .../preview-server/src/app/preview/[...slug]/email-frame.tsx  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx b/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx
index 3758769b40..9926736dc5 100644
--- a/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx
+++ b/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx
@@ -18,11 +18,11 @@ function invertColor(colorString: string, mode: 'foreground' | 'background') {
   let lightness = color.lightness();
   if (mode === 'foreground') {
     if (lightness < 50) {
-      lightness = 100 - lightness;
+      lightness = 100 - lightness * 0.75;
     }
   } else if (mode === 'background') {
     if (lightness >= 50) {
-      lightness = 100 - lightness;
+      lightness = 100 - lightness * 0.75;
     }
   }
 

From 27a7100587ad913b3aeeae0cd3a3e50cfd4d1da2 Mon Sep 17 00:00:00 2001
From: gabriel miranda <gabrielmfern@outlook.com>
Date: Thu, 23 Oct 2025 16:30:17 -0300
Subject: [PATCH 19/33] add changeset

---
 .changeset/flat-masks-take.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/flat-masks-take.md

diff --git a/.changeset/flat-masks-take.md b/.changeset/flat-masks-take.md
new file mode 100644
index 0000000000..27b4d1c380
--- /dev/null
+++ b/.changeset/flat-masks-take.md
@@ -0,0 +1,6 @@
+---
+"@react-email/preview-server": minor
+"react-email": minor
+---
+
+Dark mode switcher emulating email client color inversion

From aad374b7d07015123ddcfe01c7922f59206c9e43 Mon Sep 17 00:00:00 2001
From: gabriel miranda <gabrielmfern@outlook.com>
Date: Thu, 23 Oct 2025 16:53:02 -0300
Subject: [PATCH 20/33] fix acronyms

---
 .../src/app/preview/[...slug]/email-frame.tsx               | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx b/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx
index 3b4cdd4d64..fed629f899 100644
--- a/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx
+++ b/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx
@@ -2,12 +2,12 @@ import Color from 'color';
 import type { ComponentProps } from 'react';
 import { makeIframeDocumentBubbleEvents } from '../../../components/resizable-wrapper';
 
-function* walkDOM(element: Element): Generator<Element> {
+function* walkDom(element: Element): Generator<Element> {
   if (element.children.length > 0) {
     for (let i = 0; i < element.children.length; i++) {
       const child = element.children.item(i)!;
       yield child;
-      yield* walkDOM(child);
+      yield* walkDom(child);
     }
   }
 }
@@ -43,7 +43,7 @@ function applyColorInversion(iframe: HTMLIFrameElement) {
     );
   }
 
-  for (const element of walkDOM(contentDocument.documentElement)) {
+  for (const element of walkDom(contentDocument.documentElement)) {
     if (
       element instanceof
       (contentWindow as unknown as typeof globalThis).HTMLElement

From 0864ba851200407661749c36507600e22e9b660f Mon Sep 17 00:00:00 2001
From: gabriel miranda <gabrielmfern@outlook.com>
Date: Thu, 23 Oct 2025 16:53:30 -0300
Subject: [PATCH 21/33] add types for color

---
 packages/preview-server/package.json |  1 +
 pnpm-lock.yaml                       | 22 ++++++++++++++++++++++
 2 files changed, 23 insertions(+)

diff --git a/packages/preview-server/package.json b/packages/preview-server/package.json
index 8c3ccde203..58262d1499 100644
--- a/packages/preview-server/package.json
+++ b/packages/preview-server/package.json
@@ -60,6 +60,7 @@
     "@react-email/components": "workspace:*",
     "@types/babel__core": "7.20.5",
     "@types/babel__traverse": "7.20.7",
+    "@types/color": "4.2.0",
     "@types/fs-extra": "11.0.1",
     "@types/mime-types": "2.1.4",
     "@types/node": "22.10.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f50c1d0aab..272570814d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -759,6 +759,9 @@ importers:
       '@types/babel__traverse':
         specifier: 7.20.7
         version: 7.20.7
+      '@types/color':
+        specifier: 4.2.0
+        version: 4.2.0
       '@types/fs-extra':
         specifier: 11.0.1
         version: 11.0.1
@@ -4280,6 +4283,15 @@ packages:
   '@types/chai@5.2.2':
     resolution: {integrity: sha512-8kB30R7Hwqf40JPiKhVzodJs2Qc1ZJ5zuT3uzw5Hq/dhNCl3G3l83jfpdI1e20BP348+fV7VIL/+FxaXkqBmWg==}
 
+  '@types/color-convert@2.0.4':
+    resolution: {integrity: sha512-Ub1MmDdyZ7mX//g25uBAoH/mWGd9swVbt8BseymnaE18SU4po/PjmCrHxqIIRjBo3hV/vh1KGr0eMxUhp+t+dQ==}
+
+  '@types/color-name@1.1.5':
+    resolution: {integrity: sha512-j2K5UJqGTxeesj6oQuGpMgifpT5k9HprgQd8D1Y0lOFqKHl3PJu5GMeS4Y5EgjS55AE6OQxf8mPED9uaGbf4Cg==}
+
+  '@types/color@4.2.0':
+    resolution: {integrity: sha512-6+xrIRImMtGAL2X3qYkd02Mgs+gFGs+WsK0b7VVMaO4mYRISwyTjcqNrO0mNSmYEoq++rSLDB2F5HDNmqfOe+A==}
+
   '@types/cookie@0.4.1':
     resolution: {integrity: sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==}
 
@@ -12517,6 +12529,16 @@ snapshots:
     dependencies:
       '@types/deep-eql': 4.0.2
 
+  '@types/color-convert@2.0.4':
+    dependencies:
+      '@types/color-name': 1.1.5
+
+  '@types/color-name@1.1.5': {}
+
+  '@types/color@4.2.0':
+    dependencies:
+      '@types/color-convert': 2.0.4
+
   '@types/cookie@0.4.1': {}
 
   '@types/cors@2.8.17':

From 5bc245dd0894e438590f4265da0f57e54df423ac Mon Sep 17 00:00:00 2001
From: gabriel miranda <gabrielmfern@outlook.com>
Date: Thu, 23 Oct 2025 17:10:01 -0300
Subject: [PATCH 22/33] add aria-labels, improve accessibility

---
 .../components/topbar/theme-toggle-group.tsx  | 112 +++++++++---------
 1 file changed, 56 insertions(+), 56 deletions(-)

diff --git a/packages/preview-server/src/components/topbar/theme-toggle-group.tsx b/packages/preview-server/src/components/topbar/theme-toggle-group.tsx
index 517f84bc9a..d4ffa403a8 100644
--- a/packages/preview-server/src/components/topbar/theme-toggle-group.tsx
+++ b/packages/preview-server/src/components/topbar/theme-toggle-group.tsx
@@ -28,62 +28,62 @@ export const ThemeToggleGroup = ({
       type="single"
       value={active}
     >
-      <ToggleGroup.Item value="light">
-        <Tooltip>
-          <Tooltip.Trigger asChild>
-            <div
-              className={cn(
-                'relative px-3 py-2 transition duration-200 ease-in-out hover:text-slate-12',
-                {
-                  'text-slate-11': active !== 'light',
-                  'text-slate-12': active === 'light',
-                },
-              )}
-            >
-              {active === 'light' && (
-                <motion.span
-                  animate={{ opacity: 1 }}
-                  className="absolute top-0 right-0 bottom-0 left-0 bg-slate-4"
-                  exit={{ opacity: 0 }}
-                  initial={{ opacity: 0 }}
-                  layoutId="topbar-theme-tabs"
-                  transition={tabTransition}
-                />
-              )}
-              <IconSun />
-            </div>
-          </Tooltip.Trigger>
-          <Tooltip.Content>Light</Tooltip.Content>
-        </Tooltip>
-      </ToggleGroup.Item>
-      <ToggleGroup.Item value="dark">
-        <Tooltip>
-          <Tooltip.Trigger asChild>
-            <div
-              className={cn(
-                'relative px-3 py-2 transition duration-200 ease-in-out hover:text-slate-12',
-                {
-                  'text-slate-11': active !== 'dark',
-                  'text-slate-12': active === 'dark',
-                },
-              )}
-            >
-              {active === 'dark' && (
-                <motion.span
-                  animate={{ opacity: 1 }}
-                  className="absolute top-0 right-0 bottom-0 left-0 bg-slate-4"
-                  exit={{ opacity: 0 }}
-                  initial={{ opacity: 0 }}
-                  layoutId="topbar-theme-tabs"
-                  transition={tabTransition}
-                />
-              )}
-              <IconMoon />
-            </div>
-          </Tooltip.Trigger>
-          <Tooltip.Content>Dark</Tooltip.Content>
-        </Tooltip>
-      </ToggleGroup.Item>
+      <Tooltip>
+        <Tooltip.Trigger asChild>
+          <ToggleGroup.Item
+            value="light"
+            aria-label="Enable light mode"
+            className={cn(
+              'relative px-3 py-2 transition duration-200 ease-in-out hover:text-slate-12',
+              {
+                'text-slate-11': active !== 'light',
+                'text-slate-12': active === 'light',
+              },
+            )}
+          >
+            {active === 'light' && (
+              <motion.span
+                animate={{ opacity: 1 }}
+                className="absolute top-0 right-0 bottom-0 left-0 bg-slate-4"
+                exit={{ opacity: 0 }}
+                initial={{ opacity: 0 }}
+                layoutId="topbar-theme-tabs"
+                transition={tabTransition}
+              />
+            )}
+            <IconSun />
+          </ToggleGroup.Item>
+        </Tooltip.Trigger>
+        <Tooltip.Content>System</Tooltip.Content>
+      </Tooltip>
+      <Tooltip>
+        <Tooltip.Trigger asChild>
+          <ToggleGroup.Item
+            aria-label="Enable dark mode"
+            value="dark"
+            className={cn(
+              'relative px-3 py-2 transition duration-200 ease-in-out hover:text-slate-12',
+              {
+                'text-slate-11': active !== 'dark',
+                'text-slate-12': active === 'dark',
+              },
+            )}
+          >
+            {active === 'dark' && (
+              <motion.span
+                animate={{ opacity: 1 }}
+                className="absolute top-0 right-0 bottom-0 left-0 bg-slate-4"
+                exit={{ opacity: 0 }}
+                initial={{ opacity: 0 }}
+                layoutId="topbar-theme-tabs"
+                transition={tabTransition}
+              />
+            )}
+            <IconMoon />
+          </ToggleGroup.Item>
+        </Tooltip.Trigger>
+        <Tooltip.Content>Emulated Dark</Tooltip.Content>
+      </Tooltip>
     </ToggleGroup.Root>
   );
 };

From e01c08677aa0ac8912059124357ae4c9ae823aa3 Mon Sep 17 00:00:00 2001
From: gabriel miranda <gabrielmfern@outlook.com>
Date: Thu, 23 Oct 2025 17:10:42 -0300
Subject: [PATCH 23/33] preserve hash on theme change

---
 packages/preview-server/src/app/preview/[...slug]/preview.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/preview-server/src/app/preview/[...slug]/preview.tsx b/packages/preview-server/src/app/preview/[...slug]/preview.tsx
index 5a5d98f71c..46495e30cf 100644
--- a/packages/preview-server/src/app/preview/[...slug]/preview.tsx
+++ b/packages/preview-server/src/app/preview/[...slug]/preview.tsx
@@ -42,7 +42,7 @@ const Preview = ({ emailTitle, className, ...props }: PreviewProps) => {
   const handleThemeChange = (theme: 'dark' | 'light') => {
     const params = new URLSearchParams(searchParams);
     params.set('theme', theme);
-    router.push(`${pathname}?${params.toString()}`);
+    router.push(`${pathname}?${params.toString()}${location.hash}`);
   };
 
   const handleViewChange = (view: string) => {

From 231ef5514518a38d10f6104bd166437825f89627 Mon Sep 17 00:00:00 2001
From: gabriel miranda <gabrielmfern@outlook.com>
Date: Thu, 23 Oct 2025 17:11:56 -0300
Subject: [PATCH 24/33] improve hex regex

---
 .../preview-server/src/app/preview/[...slug]/email-frame.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx b/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx
index fed629f899..fa7d9221a0 100644
--- a/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx
+++ b/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx
@@ -30,7 +30,7 @@ function invertColor(colorString: string, mode: 'foreground' | 'background') {
 }
 
 const colorRegex =
-  /#[0-9a-zA-Z]{0,8}|rgba?\(.*?\)|hsl\(.*?\)|hsv\(.*?\)|oklab\(.*?\)|oklch\(.*?\)/g;
+  /#[0-9a-fA-F]{3,4}|#[0-9a-fA-F]{6,8}|rgba?\(.*?\)|hsl\(.*?\)|hsv\(.*?\)|oklab\(.*?\)|oklch\(.*?\)/g;
 
 function applyColorInversion(iframe: HTMLIFrameElement) {
   const { contentDocument, contentWindow } = iframe;

From 15b4dbc3b23bcb44ddc6af6136c48cb814715bd2 Mon Sep 17 00:00:00 2001
From: gabriel miranda <gabrielmfern@outlook.com>
Date: Fri, 24 Oct 2025 15:34:07 -0300
Subject: [PATCH 25/33] fix resizing not working

---
 .../src/app/preview/[...slug]/email-frame.tsx | 30 +++++++++++--------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx b/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx
index fa7d9221a0..6f21c28ceb 100644
--- a/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx
+++ b/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx
@@ -1,6 +1,7 @@
 import Color from 'color';
 import type { ComponentProps } from 'react';
 import { makeIframeDocumentBubbleEvents } from '../../../components/resizable-wrapper';
+import { Slot } from '@radix-ui/react-slot';
 
 function* walkDom(element: Element): Generator<Element> {
   if (element.children.length > 0) {
@@ -87,7 +88,7 @@ function applyColorInversion(iframe: HTMLIFrameElement) {
   }
 }
 
-interface EmailFrameProps extends Omit<ComponentProps<'iframe'>, 'ref'> {
+interface EmailFrameProps extends ComponentProps<'iframe'> {
   markup: string;
   width: number;
   height: number;
@@ -102,17 +103,12 @@ export function EmailFrame({
   ...rest
 }: EmailFrameProps) {
   return (
-    <iframe
-      srcDoc={markup}
-      width={width}
-      height={height}
-      {...rest}
-      // This key makes sure that the iframe itself remounts to the DOM when theme changes, so
-      // that the color changes in dark mode can be easily undone when switching to light mode.
-      key={`iframe-on-${theme}-mode`}
-      ref={(iframe) => {
+    <Slot
+      ref={(iframe: HTMLIFrameElement) => {
         if (!iframe) return;
 
+        const cleanupEventBubbling = makeIframeDocumentBubbleEvents(iframe);
+
         if (theme === 'dark') {
           applyColorInversion(iframe);
         }
@@ -125,13 +121,21 @@ export function EmailFrame({
 
         iframe.addEventListener('load', handleLoad);
 
-        const cleanupEventBubbling = makeIframeDocumentBubbleEvents(iframe);
-
         return () => {
           cleanupEventBubbling();
           iframe.removeEventListener('load', handleLoad);
         };
       }}
-    />
+    >
+      <iframe
+        srcDoc={markup}
+        width={width}
+        height={height}
+        {...rest}
+        // This key makes sure that the iframe itself remounts to the DOM when theme changes, so
+        // that the color changes in dark mode can be easily undone when switching to light mode.
+        key={`iframe-on-${theme}-mode`}
+      />
+    </Slot>
   );
 }

From 7ae751b626bd95c626b2e150dfa517ecfd3009e7 Mon Sep 17 00:00:00 2001
From: gabriel miranda <gabrielmfern@outlook.com>
Date: Fri, 24 Oct 2025 15:35:54 -0300
Subject: [PATCH 26/33] improve code a bit

---
 .../src/app/preview/[...slug]/email-frame.tsx              | 7 +------
 .../preview-server/src/app/preview/[...slug]/preview.tsx   | 5 +++++
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx b/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx
index 6f21c28ceb..b901baa72f 100644
--- a/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx
+++ b/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx
@@ -1,7 +1,6 @@
+import { Slot } from '@radix-ui/react-slot';
 import Color from 'color';
 import type { ComponentProps } from 'react';
-import { makeIframeDocumentBubbleEvents } from '../../../components/resizable-wrapper';
-import { Slot } from '@radix-ui/react-slot';
 
 function* walkDom(element: Element): Generator<Element> {
   if (element.children.length > 0) {
@@ -107,8 +106,6 @@ export function EmailFrame({
       ref={(iframe: HTMLIFrameElement) => {
         if (!iframe) return;
 
-        const cleanupEventBubbling = makeIframeDocumentBubbleEvents(iframe);
-
         if (theme === 'dark') {
           applyColorInversion(iframe);
         }
@@ -120,9 +117,7 @@ export function EmailFrame({
         };
 
         iframe.addEventListener('load', handleLoad);
-
         return () => {
-          cleanupEventBubbling();
           iframe.removeEventListener('load', handleLoad);
         };
       }}
diff --git a/packages/preview-server/src/app/preview/[...slug]/preview.tsx b/packages/preview-server/src/app/preview/[...slug]/preview.tsx
index 46495e30cf..8494321da4 100644
--- a/packages/preview-server/src/app/preview/[...slug]/preview.tsx
+++ b/packages/preview-server/src/app/preview/[...slug]/preview.tsx
@@ -188,6 +188,11 @@ const Preview = ({ emailTitle, className, ...props }: PreviewProps) => {
                   width={width}
                   height={height}
                   title={emailTitle}
+                  ref={(iframe) => {
+                    if (!iframe) return;
+
+                    return makeIframeDocumentBubbleEvents(iframe);
+                  }}
                 />
               </ResizableWrapper>
             )}

From e28bb90aed65736224c7c2ca216f510460d3a1a7 Mon Sep 17 00:00:00 2001
From: Gabriel Miranda <gabrielmfern@outlook.com>
Date: Fri, 24 Oct 2025 16:39:45 -0300
Subject: [PATCH 27/33] reduce chroma by 20% when making colors dark

---
 .../preview-server/src/app/preview/[...slug]/email-frame.tsx   | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx b/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx
index b901baa72f..96e1e1c4c5 100644
--- a/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx
+++ b/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx
@@ -25,8 +25,9 @@ function invertColor(colorString: string, mode: 'foreground' | 'background') {
       lightness = 100 - lightness * 0.75;
     }
   }
+  const chroma = color.chroma() * 0.80;
 
-  return Color.hsl(color.hue(), color.saturationl(), lightness).string();
+  return Color.lch(lightness, chroma, color.hue()).string();
 }
 
 const colorRegex =

From fa3ff5b06758c8b1513d7ab740deef357baa428e Mon Sep 17 00:00:00 2001
From: Gabriel Miranda <gabrielmfern@outlook.com>
Date: Fri, 24 Oct 2025 17:10:08 -0300
Subject: [PATCH 28/33] avoid inversion being applied more than once, use a
 better color library

---
 packages/preview-server/package.json          |  2 +-
 .../src/app/preview/[...slug]/email-frame.tsx | 27 ++++++-------
 pnpm-lock.yaml                                | 38 +++----------------
 3 files changed, 21 insertions(+), 46 deletions(-)

diff --git a/packages/preview-server/package.json b/packages/preview-server/package.json
index 8305d82d78..38a93b8e99 100644
--- a/packages/preview-server/package.json
+++ b/packages/preview-server/package.json
@@ -32,7 +32,7 @@
     "@types/webpack": "5.28.5",
     "autoprefixer": "10.4.21",
     "clsx": "2.1.1",
-    "color": "5.0.2",
+    "colorjs.io": "0.5.2",
     "esbuild": "0.25.10",
     "framer-motion": "12.23.22",
     "json5": "2.2.3",
diff --git a/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx b/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx
index 96e1e1c4c5..1cf75dd033 100644
--- a/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx
+++ b/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx
@@ -1,5 +1,5 @@
 import { Slot } from '@radix-ui/react-slot';
-import Color from 'color';
+import Color from 'colorjs.io';
 import type { ComponentProps } from 'react';
 
 function* walkDom(element: Element): Generator<Element> {
@@ -13,21 +13,21 @@ function* walkDom(element: Element): Generator<Element> {
 }
 
 function invertColor(colorString: string, mode: 'foreground' | 'background') {
-  const color = Color(colorString);
+  const color = new Color(colorString).to("lch");
 
-  let lightness = color.lightness();
   if (mode === 'foreground') {
-    if (lightness < 50) {
-      lightness = 100 - lightness * 0.75;
+    if (color.lch.l! < 50) {
+      color.lch.l = 100 - color.lch.l! * 0.75;
     }
   } else if (mode === 'background') {
-    if (lightness >= 50) {
-      lightness = 100 - lightness * 0.75;
+    if (color.lch.l! >= 50) {
+      color.lch.l = 100 - color.lch.l! * 0.75;
     }
   }
-  const chroma = color.chroma() * 0.80;
+  
+  color.lch.c! *= 0.80;
 
-  return Color.lch(lightness, chroma, color.hue()).string();
+  return color.toString();
 }
 
 const colorRegex =
@@ -37,11 +37,12 @@ function applyColorInversion(iframe: HTMLIFrameElement) {
   const { contentDocument, contentWindow } = iframe;
   if (!contentDocument || !contentWindow) return;
 
+  if (contentDocument.body.hasAttribute('inverted-colors')) return;
+
+  contentDocument.body.setAttribute('inverted-colors', '');
+
   if (!contentDocument.body.style.color) {
-    contentDocument.body.style.color = invertColor(
-      'rgb(0, 0, 0)',
-      'foreground',
-    );
+    contentDocument.body.style.color = 'rgb(0, 0, 0)';
   }
 
   for (const element of walkDom(contentDocument.documentElement)) {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 272570814d..03fc3959c1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -680,9 +680,9 @@ importers:
       clsx:
         specifier: 2.1.1
         version: 2.1.1
-      color:
-        specifier: 5.0.2
-        version: 5.0.2
+      colorjs.io:
+        specifier: 0.5.2
+        version: 0.5.2
       esbuild:
         specifier: 0.25.10
         version: 0.25.10
@@ -5091,31 +5091,18 @@ packages:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
 
-  color-convert@3.1.2:
-    resolution: {integrity: sha512-UNqkvCDXstVck3kdowtOTWROIJQwafjOfXSmddoDrXo4cewMKmusCeF22Q24zvjR8nwWib/3S/dfyzPItPEiJg==}
-    engines: {node: '>=14.6'}
-
   color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
-  color-name@2.0.2:
-    resolution: {integrity: sha512-9vEt7gE16EW7Eu7pvZnR0abW9z6ufzhXxGXZEVU9IqPdlsUiMwJeJfRtq0zePUmnbHGT9zajca7mX8zgoayo4A==}
-    engines: {node: '>=12.20'}
-
   color-string@1.9.1:
     resolution: {integrity: sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==}
 
-  color-string@2.1.2:
-    resolution: {integrity: sha512-RxmjYxbWemV9gKu4zPgiZagUxbH3RQpEIO77XoSSX0ivgABDZ+h8Zuash/EMFLTI4N9QgFPOJ6JQpPZKFxa+dA==}
-    engines: {node: '>=18'}
-
   color@4.2.3:
     resolution: {integrity: sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==}
     engines: {node: '>=12.5.0'}
 
-  color@5.0.2:
-    resolution: {integrity: sha512-e2hz5BzbUPcYlIRHo8ieAhYgoajrJr+hWoceg6E345TPsATMUKqDgzt8fSXZJJbxfpiPzkWyphz8yn8At7q3fA==}
-    engines: {node: '>=18'}
+  colorjs.io@0.5.2:
+    resolution: {integrity: sha512-twmVoizEW7ylZSN32OgKdXRmo1qg+wT5/6C3xu5b9QsWzSFAhHLn2xd8ro0diCsKfCj1RdaTP/nrcW+vAoQPIw==}
 
   combined-stream@1.0.8:
     resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
@@ -13413,32 +13400,19 @@ snapshots:
     dependencies:
       color-name: 1.1.4
 
-  color-convert@3.1.2:
-    dependencies:
-      color-name: 2.0.2
-
   color-name@1.1.4: {}
 
-  color-name@2.0.2: {}
-
   color-string@1.9.1:
     dependencies:
       color-name: 1.1.4
       simple-swizzle: 0.2.2
 
-  color-string@2.1.2:
-    dependencies:
-      color-name: 2.0.2
-
   color@4.2.3:
     dependencies:
       color-convert: 2.0.1
       color-string: 1.9.1
 
-  color@5.0.2:
-    dependencies:
-      color-convert: 3.1.2
-      color-string: 2.1.2
+  colorjs.io@0.5.2: {}
 
   combined-stream@1.0.8:
     dependencies:

From cbf1c23342bd09fa2575324d9f0f14681deb85d2 Mon Sep 17 00:00:00 2001
From: gabriel miranda <gabrielmfern@outlook.com>
Date: Fri, 24 Oct 2025 17:37:22 -0300
Subject: [PATCH 29/33] lint

---
 .../src/app/preview/[...slug]/email-frame.tsx               | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx b/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx
index 1cf75dd033..2a623c9ab9 100644
--- a/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx
+++ b/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx
@@ -13,7 +13,7 @@ function* walkDom(element: Element): Generator<Element> {
 }
 
 function invertColor(colorString: string, mode: 'foreground' | 'background') {
-  const color = new Color(colorString).to("lch");
+  const color = new Color(colorString).to('lch');
 
   if (mode === 'foreground') {
     if (color.lch.l! < 50) {
@@ -24,8 +24,8 @@ function invertColor(colorString: string, mode: 'foreground' | 'background') {
       color.lch.l = 100 - color.lch.l! * 0.75;
     }
   }
-  
-  color.lch.c! *= 0.80;
+
+  color.lch.c! *= 0.8;
 
   return color.toString();
 }

From f151725e074f487a14e82aa0e287af2b8099242c Mon Sep 17 00:00:00 2001
From: Gabriel Miranda <gabrielmfern@outlook.com>
Date: Mon, 27 Oct 2025 16:07:49 -0300
Subject: [PATCH 30/33] change the dark mode toggle group to just a toggle

---
 packages/preview-server/package.json          |   1 +
 .../src/app/preview/[...slug]/email-frame.tsx |  10 +-
 .../src/app/preview/[...slug]/preview.tsx     |  23 +--
 .../topbar/emulated-dark-mode-toggle.tsx      |  37 +++++
 .../components/topbar/theme-toggle-group.tsx  |  89 ------------
 pnpm-lock.yaml                                | 137 +++++++++---------
 6 files changed, 126 insertions(+), 171 deletions(-)
 create mode 100644 packages/preview-server/src/components/topbar/emulated-dark-mode-toggle.tsx
 delete mode 100644 packages/preview-server/src/components/topbar/theme-toggle-group.tsx

diff --git a/packages/preview-server/package.json b/packages/preview-server/package.json
index 38a93b8e99..f44c9710ba 100644
--- a/packages/preview-server/package.json
+++ b/packages/preview-server/package.json
@@ -23,6 +23,7 @@
     "@radix-ui/react-popover": "1.1.15",
     "@radix-ui/react-slot": "1.2.3",
     "@radix-ui/react-tabs": "1.1.13",
+    "@radix-ui/react-toggle": "1.1.10",
     "@radix-ui/react-toggle-group": "1.1.11",
     "@radix-ui/react-tooltip": "1.2.8",
     "@types/node": "22.14.1",
diff --git a/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx b/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx
index 2a623c9ab9..d7b477eb6a 100644
--- a/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx
+++ b/packages/preview-server/src/app/preview/[...slug]/email-frame.tsx
@@ -93,14 +93,14 @@ interface EmailFrameProps extends ComponentProps<'iframe'> {
   markup: string;
   width: number;
   height: number;
-  theme: 'dark' | 'light';
+  darkMode: boolean;
 }
 
 export function EmailFrame({
   markup,
   width,
   height,
-  theme,
+  darkMode,
   ...rest
 }: EmailFrameProps) {
   return (
@@ -108,12 +108,12 @@ export function EmailFrame({
       ref={(iframe: HTMLIFrameElement) => {
         if (!iframe) return;
 
-        if (theme === 'dark') {
+        if (darkMode) {
           applyColorInversion(iframe);
         }
 
         const handleLoad = () => {
-          if (theme === 'dark') {
+          if (darkMode) {
             applyColorInversion(iframe);
           }
         };
@@ -131,7 +131,7 @@ export function EmailFrame({
         {...rest}
         // This key makes sure that the iframe itself remounts to the DOM when theme changes, so
         // that the color changes in dark mode can be easily undone when switching to light mode.
-        key={`iframe-on-${theme}-mode`}
+        key={darkMode ? 'iframe-inverted-colors' : 'iframe-normal-colors'}
       />
     </Slot>
   );
diff --git a/packages/preview-server/src/app/preview/[...slug]/preview.tsx b/packages/preview-server/src/app/preview/[...slug]/preview.tsx
index 8494321da4..6b3b45f627 100644
--- a/packages/preview-server/src/app/preview/[...slug]/preview.tsx
+++ b/packages/preview-server/src/app/preview/[...slug]/preview.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import { useRef, useState } from 'react';
+import { useState } from 'react';
 import { flushSync } from 'react-dom';
 import { Toaster } from 'sonner';
 import { useDebouncedCallback } from 'use-debounce';
@@ -15,7 +15,7 @@ import { Send } from '../../../components/send';
 import { useToolbarState } from '../../../components/toolbar';
 import { Tooltip } from '../../../components/tooltip';
 import { ActiveViewToggleGroup } from '../../../components/topbar/active-view-toggle-group';
-import { ThemeToggleGroup } from '../../../components/topbar/theme-toggle-group';
+import { EmulatedDarkModeToggle } from '../../../components/topbar/emulated-dark-mode-toggle';
 import { ViewSizeControls } from '../../../components/topbar/view-size-controls';
 import { usePreviewContext } from '../../../contexts/preview';
 import { useClampedState } from '../../../hooks/use-clamped-state';
@@ -34,14 +34,17 @@ const Preview = ({ emailTitle, className, ...props }: PreviewProps) => {
   const pathname = usePathname();
   const searchParams = useSearchParams();
 
-  const activeTheme: 'dark' | 'light' =
-    searchParams.get('theme') === 'dark' ? 'dark' : 'light';
+  const isDarkModeEnabled = searchParams.get('dark') !== null;
   const activeView = searchParams.get('view') ?? 'preview';
   const activeLang = searchParams.get('lang') ?? 'jsx';
 
-  const handleThemeChange = (theme: 'dark' | 'light') => {
+  const handleDarkModeChange = (enabled: boolean) => {
     const params = new URLSearchParams(searchParams);
-    params.set('theme', theme);
+    if (enabled) {
+      params.set('dark', '');
+    } else {
+      params.delete('dark');
+    }
     router.push(`${pathname}?${params.toString()}${location.hash}`);
   };
 
@@ -113,9 +116,9 @@ const Preview = ({ emailTitle, className, ...props }: PreviewProps) => {
               minWidth={minWidth}
               minHeight={minHeight}
             />
-            <ThemeToggleGroup
-              active={activeTheme}
-              onChange={(theme) => handleThemeChange(theme)}
+            <EmulatedDarkModeToggle
+              enabled={isDarkModeEnabled}
+              onChange={(enabled) => handleDarkModeChange(enabled)}
             />
           </>
         ) : null}
@@ -183,7 +186,7 @@ const Preview = ({ emailTitle, className, ...props }: PreviewProps) => {
               >
                 <EmailFrame
                   className="max-h-full rounded-lg bg-white [color-scheme:auto]"
-                  theme={activeTheme}
+                  darkMode={isDarkModeEnabled}
                   markup={renderedEmailMetadata.markup}
                   width={width}
                   height={height}
diff --git a/packages/preview-server/src/components/topbar/emulated-dark-mode-toggle.tsx b/packages/preview-server/src/components/topbar/emulated-dark-mode-toggle.tsx
new file mode 100644
index 0000000000..1a79001677
--- /dev/null
+++ b/packages/preview-server/src/components/topbar/emulated-dark-mode-toggle.tsx
@@ -0,0 +1,37 @@
+import * as Toggle from '@radix-ui/react-toggle';
+import { cn } from '../../utils';
+import { IconMoon } from '../icons/icon-moon';
+import { Tooltip } from '../tooltip';
+
+interface EmulatedDarkModeToggleProps {
+  enabled: boolean;
+  onChange: (enabled: boolean) => unknown;
+}
+
+export const EmulatedDarkModeToggle = ({
+  enabled,
+  onChange,
+}: EmulatedDarkModeToggleProps) => {
+  return (
+    <Tooltip>
+      <Tooltip.Trigger asChild>
+        <Toggle.Root
+          value="dark"
+          className={cn(
+            'relative w-9 h-9 flex items-center justify-center border border-slate-6 text-sm rounded-lg transition duration-200 ease-in-out hover:text-slate-12',
+            {
+              'text-slate-11': !enabled,
+              'text-slate-12 bg-slate-4': enabled,
+            },
+          )}
+          onClick={() => onChange(!enabled)}
+        >
+          <IconMoon />
+        </Toggle.Root>
+      </Tooltip.Trigger>
+      <Tooltip.Content>
+        When enabled, inverts colors in the preview emulating what email clients do in dark mode.
+      </Tooltip.Content>
+    </Tooltip>
+  );
+};
diff --git a/packages/preview-server/src/components/topbar/theme-toggle-group.tsx b/packages/preview-server/src/components/topbar/theme-toggle-group.tsx
deleted file mode 100644
index d4ffa403a8..0000000000
--- a/packages/preview-server/src/components/topbar/theme-toggle-group.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import * as ToggleGroup from '@radix-ui/react-toggle-group';
-import { motion } from 'framer-motion';
-import { useId } from 'react';
-import { cn } from '../../utils';
-import { tabTransition } from '../../utils/constants';
-import { IconMoon } from '../icons/icon-moon';
-import { IconSun } from '../icons/icon-sun';
-import { Tooltip } from '../tooltip';
-
-interface ThemeToggleGroupProps {
-  active: 'light' | 'dark';
-  onChange: (theme: 'light' | 'dark') => unknown;
-}
-
-export const ThemeToggleGroup = ({
-  active,
-  onChange,
-}: ThemeToggleGroupProps) => {
-  const id = useId();
-  return (
-    <ToggleGroup.Root
-      aria-label="Color Scheme"
-      className="inline-block items-center bg-slate-2 border border-slate-6 rounded-md overflow-hidden h-[36px]"
-      id={id}
-      onValueChange={(value) => {
-        if (value) onChange(value as 'light' | 'dark');
-      }}
-      type="single"
-      value={active}
-    >
-      <Tooltip>
-        <Tooltip.Trigger asChild>
-          <ToggleGroup.Item
-            value="light"
-            aria-label="Enable light mode"
-            className={cn(
-              'relative px-3 py-2 transition duration-200 ease-in-out hover:text-slate-12',
-              {
-                'text-slate-11': active !== 'light',
-                'text-slate-12': active === 'light',
-              },
-            )}
-          >
-            {active === 'light' && (
-              <motion.span
-                animate={{ opacity: 1 }}
-                className="absolute top-0 right-0 bottom-0 left-0 bg-slate-4"
-                exit={{ opacity: 0 }}
-                initial={{ opacity: 0 }}
-                layoutId="topbar-theme-tabs"
-                transition={tabTransition}
-              />
-            )}
-            <IconSun />
-          </ToggleGroup.Item>
-        </Tooltip.Trigger>
-        <Tooltip.Content>System</Tooltip.Content>
-      </Tooltip>
-      <Tooltip>
-        <Tooltip.Trigger asChild>
-          <ToggleGroup.Item
-            aria-label="Enable dark mode"
-            value="dark"
-            className={cn(
-              'relative px-3 py-2 transition duration-200 ease-in-out hover:text-slate-12',
-              {
-                'text-slate-11': active !== 'dark',
-                'text-slate-12': active === 'dark',
-              },
-            )}
-          >
-            {active === 'dark' && (
-              <motion.span
-                animate={{ opacity: 1 }}
-                className="absolute top-0 right-0 bottom-0 left-0 bg-slate-4"
-                exit={{ opacity: 0 }}
-                initial={{ opacity: 0 }}
-                layoutId="topbar-theme-tabs"
-                transition={tabTransition}
-              />
-            )}
-            <IconMoon />
-          </ToggleGroup.Item>
-        </Tooltip.Trigger>
-        <Tooltip.Content>Emulated Dark</Tooltip.Content>
-      </Tooltip>
-    </ToggleGroup.Root>
-  );
-};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 03fc3959c1..53db195c9f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -653,6 +653,9 @@ importers:
       '@radix-ui/react-tabs':
         specifier: 1.1.13
         version: 1.1.13(@types/react-dom@19.0.1)(@types/react@19.0.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@radix-ui/react-toggle':
+        specifier: 1.1.10
+        version: 1.1.10(@types/react-dom@19.0.1)(@types/react@19.0.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@radix-ui/react-toggle-group':
         specifier: 1.1.11
         version: 1.1.11(@types/react-dom@19.0.1)(@types/react@19.0.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
@@ -3808,91 +3811,91 @@ packages:
     peerDependencies:
       react: ^19.0.0
 
-  '@rolldown/binding-android-arm64@1.0.0-beta.44':
-    resolution: {integrity: sha512-g9ejDOehJFhxC1DIXQuZQ9bKv4lRDioOTL42cJjFjqKPl1L7DVb9QQQE1FxokGEIMr6FezLipxwnzOXWe7DNPg==}
+  '@rolldown/binding-android-arm64@1.0.0-beta.45':
+    resolution: {integrity: sha512-bfgKYhFiXJALeA/riil908+2vlyWGdwa7Ju5S+JgWZYdR4jtiPOGdM6WLfso1dojCh+4ZWeiTwPeV9IKQEX+4g==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [android]
 
-  '@rolldown/binding-darwin-arm64@1.0.0-beta.44':
-    resolution: {integrity: sha512-PxAW1PXLPmCzfhfKIS53kwpjLGTUdIfX4Ht+l9mj05C3lYCGaGowcNsYi2rdxWH24vSTmeK+ajDNRmmmrK0M7g==}
+  '@rolldown/binding-darwin-arm64@1.0.0-beta.45':
+    resolution: {integrity: sha512-xjCv4CRVsSnnIxTuyH1RDJl5OEQ1c9JYOwfDAHddjJDxCw46ZX9q80+xq7Eok7KC4bRSZudMJllkvOKv0T9SeA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [darwin]
 
-  '@rolldown/binding-darwin-x64@1.0.0-beta.44':
-    resolution: {integrity: sha512-/CtQqs1oO9uSb5Ju60rZvsdjE7Pzn8EK2ISAdl2jedjMzeD/4neNyCbwyJOAPzU+GIQTZVyrFZJX+t7HXR1R/g==}
+  '@rolldown/binding-darwin-x64@1.0.0-beta.45':
+    resolution: {integrity: sha512-ddcO9TD3D/CLUa/l8GO8LHzBOaZqWg5ClMy3jICoxwCuoz47h9dtqPsIeTiB6yR501LQTeDsjA4lIFd7u3Ljfw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [darwin]
 
-  '@rolldown/binding-freebsd-x64@1.0.0-beta.44':
-    resolution: {integrity: sha512-V5Q5W9c4+2GJ4QabmjmVV6alY97zhC/MZBaLkDtHwGy3qwzbM4DYgXUbun/0a8AH5hGhuU27tUIlYz6ZBlvgOA==}
+  '@rolldown/binding-freebsd-x64@1.0.0-beta.45':
+    resolution: {integrity: sha512-MBTWdrzW9w+UMYDUvnEuh0pQvLENkl2Sis15fHTfHVW7ClbGuez+RWopZudIDEGkpZXdeI4CkRXk+vdIIebrmg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [freebsd]
 
-  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-beta.44':
-    resolution: {integrity: sha512-X6adjkHeFqKsTU0FXdNN9HY4LDozPqIfHcnXovE5RkYLWIjMWuc489mIZ6iyhrMbCqMUla9IOsh5dvXSGT9o9A==}
+  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-beta.45':
+    resolution: {integrity: sha512-4YgoCFiki1HR6oSg+GxxfzfnVCesQxLF1LEnw9uXS/MpBmuog0EOO2rYfy69rWP4tFZL9IWp6KEfGZLrZ7aUog==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
-  '@rolldown/binding-linux-arm64-gnu@1.0.0-beta.44':
-    resolution: {integrity: sha512-kRRKGZI4DXWa6ANFr3dLA85aSVkwPdgXaRjfanwY84tfc3LncDiIjyWCb042e3ckPzYhHSZ3LmisO+cdOIYL6Q==}
+  '@rolldown/binding-linux-arm64-gnu@1.0.0-beta.45':
+    resolution: {integrity: sha512-LE1gjAwQRrbCOorJJ7LFr10s5vqYf5a00V5Ea9wXcT2+56n5YosJkcp8eQ12FxRBv2YX8dsdQJb+ZTtYJwb6XQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
 
-  '@rolldown/binding-linux-arm64-musl@1.0.0-beta.44':
-    resolution: {integrity: sha512-hMtiN9xX1NhxXBa2U3Up4XkVcsVp2h73yYtMDY59z9CDLEZLrik9RVLhBL5QtoX4zZKJ8HZKJtWuGYvtmkCbIQ==}
+  '@rolldown/binding-linux-arm64-musl@1.0.0-beta.45':
+    resolution: {integrity: sha512-tdy8ThO/fPp40B81v0YK3QC+KODOmzJzSUOO37DinQxzlTJ026gqUSOM8tzlVixRbQJltgVDCTYF8HNPRErQTA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
 
-  '@rolldown/binding-linux-x64-gnu@1.0.0-beta.44':
-    resolution: {integrity: sha512-rd1LzbpXQuR8MTG43JB9VyXDjG7ogSJbIkBpZEHJ8oMKzL6j47kQT5BpIXrg3b5UVygW9QCI2fpFdMocT5Kudg==}
+  '@rolldown/binding-linux-x64-gnu@1.0.0-beta.45':
+    resolution: {integrity: sha512-lS082ROBWdmOyVY/0YB3JmsiClaWoxvC+dA8/rbhyB9VLkvVEaihLEOr4CYmrMse151C4+S6hCw6oa1iewox7g==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
 
-  '@rolldown/binding-linux-x64-musl@1.0.0-beta.44':
-    resolution: {integrity: sha512-qI2IiPqmPRW25exXkuQr3TlweCDc05YvvbSDRPCuPsWkwb70dTiSoXn8iFxT4PWqTi71wWHg1Wyta9PlVhX5VA==}
+  '@rolldown/binding-linux-x64-musl@1.0.0-beta.45':
+    resolution: {integrity: sha512-Hi73aYY0cBkr1/SvNQqH8Cd+rSV6S9RB5izCv0ySBcRnd/Wfn5plguUoGYwBnhHgFbh6cPw9m2dUVBR6BG1gxA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
 
-  '@rolldown/binding-openharmony-arm64@1.0.0-beta.44':
-    resolution: {integrity: sha512-+vHvEc1pL5iJRFlldLC8mjm6P4Qciyfh2bh5ZI6yxDQKbYhCHRKNURaKz1mFcwxhVL5YMYsLyaqM3qizVif9MQ==}
+  '@rolldown/binding-openharmony-arm64@1.0.0-beta.45':
+    resolution: {integrity: sha512-fljEqbO7RHHogNDxYtTzr+GNjlfOx21RUyGmF+NrkebZ8emYYiIqzPxsaMZuRx0rgZmVmliOzEp86/CQFDKhJQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [openharmony]
 
-  '@rolldown/binding-wasm32-wasi@1.0.0-beta.44':
-    resolution: {integrity: sha512-XSgLxRrtFj6RpTeMYmmQDAwHjKseYGKUn5LPiIdW4Cq+f5SBSStL2ToBDxkbdxKPEbCZptnLPQ/nfKcAxrC8Xg==}
+  '@rolldown/binding-wasm32-wasi@1.0.0-beta.45':
+    resolution: {integrity: sha512-ZJDB7lkuZE9XUnWQSYrBObZxczut+8FZ5pdanm8nNS1DAo8zsrPuvGwn+U3fwU98WaiFsNrA4XHngesCGr8tEQ==}
     engines: {node: '>=14.0.0'}
     cpu: [wasm32]
 
-  '@rolldown/binding-win32-arm64-msvc@1.0.0-beta.44':
-    resolution: {integrity: sha512-cF1LJdDIX02cJrFrX3wwQ6IzFM7I74BYeKFkzdcIA4QZ0+2WA7/NsKIgjvrunupepWb1Y6PFWdRlHSaz5AW1Wg==}
+  '@rolldown/binding-win32-arm64-msvc@1.0.0-beta.45':
+    resolution: {integrity: sha512-zyzAjItHPUmxg6Z8SyRhLdXlJn3/D9KL5b9mObUrBHhWS/GwRH4665xCiFqeuktAhhWutqfc+rOV2LjK4VYQGQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [win32]
 
-  '@rolldown/binding-win32-ia32-msvc@1.0.0-beta.44':
-    resolution: {integrity: sha512-5uaJonDafhHiMn+iEh7qUp3QQ4Gihv3lEOxKfN8Vwadpy0e+5o28DWI42DpJ9YBYMrVy4JOWJ/3etB/sptpUwA==}
+  '@rolldown/binding-win32-ia32-msvc@1.0.0-beta.45':
+    resolution: {integrity: sha512-wODcGzlfxqS6D7BR0srkJk3drPwXYLu7jPHN27ce2c4PUnVVmJnp9mJzUQGT4LpmHmmVdMZ+P6hKvyTGBzc1CA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [ia32]
     os: [win32]
 
-  '@rolldown/binding-win32-x64-msvc@1.0.0-beta.44':
-    resolution: {integrity: sha512-vsqhWAFJkkmgfBN/lkLCWTXF1PuPhMjfnAyru48KvF7mVh2+K7WkKYHezF3Fjz4X/mPScOcIv+g6cf6wnI6eWg==}
+  '@rolldown/binding-win32-x64-msvc@1.0.0-beta.45':
+    resolution: {integrity: sha512-wiU40G1nQo9rtfvF9jLbl79lUgjfaD/LTyUEw2Wg/gdF5OhjzpKMVugZQngO+RNdwYaNj+Fs+kWBWfp4VXPMHA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [win32]
 
-  '@rolldown/pluginutils@1.0.0-beta.44':
-    resolution: {integrity: sha512-g6eW7Zwnr2c5RADIoqziHoVs6b3W5QTQ4+qbpfjbkMJ9x+8Og211VW/oot2dj9dVwaK/UyC6Yo+02gV+wWQVNg==}
+  '@rolldown/pluginutils@1.0.0-beta.45':
+    resolution: {integrity: sha512-Le9ulGCrD8ggInzWw/k2J8QcbPz7eGIOWqfJ2L+1R0Opm7n6J37s2hiDWlh6LJN0Lk9L5sUzMvRHKW7UxBZsQA==}
 
   '@rollup/pluginutils@5.1.4':
     resolution: {integrity: sha512-USm05zrsFxYLPdWWq+K3STlWiT/3ELn3RcV5hJMghpeAIhxfsUIg6mt12CBJBInWMV4VneoV7SfGv8xIwo2qNQ==}
@@ -7960,8 +7963,8 @@ packages:
       vue-tsc:
         optional: true
 
-  rolldown@1.0.0-beta.44:
-    resolution: {integrity: sha512-gcqgyCi3g93Fhr49PKvymE8PoaGS0sf6ajQrsYaQ8o5de6aUEbD6rJZiJbhOfpcqOnycgsAsUNPYri1h25NgsQ==}
+  rolldown@1.0.0-beta.45:
+    resolution: {integrity: sha512-iMmuD72XXLf26Tqrv1cryNYLX6NNPLhZ3AmNkSf8+xda0H+yijjGJ+wVT9UdBUHOpKzq9RjKtQKRCWoEKQQBZQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
 
@@ -12015,51 +12018,51 @@ snapshots:
       '@react-email/section': 0.0.14(react@19.0.0)
       react: 19.0.0
 
-  '@rolldown/binding-android-arm64@1.0.0-beta.44':
+  '@rolldown/binding-android-arm64@1.0.0-beta.45':
     optional: true
 
-  '@rolldown/binding-darwin-arm64@1.0.0-beta.44':
+  '@rolldown/binding-darwin-arm64@1.0.0-beta.45':
     optional: true
 
-  '@rolldown/binding-darwin-x64@1.0.0-beta.44':
+  '@rolldown/binding-darwin-x64@1.0.0-beta.45':
     optional: true
 
-  '@rolldown/binding-freebsd-x64@1.0.0-beta.44':
+  '@rolldown/binding-freebsd-x64@1.0.0-beta.45':
     optional: true
 
-  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-beta.44':
+  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-beta.45':
     optional: true
 
-  '@rolldown/binding-linux-arm64-gnu@1.0.0-beta.44':
+  '@rolldown/binding-linux-arm64-gnu@1.0.0-beta.45':
     optional: true
 
-  '@rolldown/binding-linux-arm64-musl@1.0.0-beta.44':
+  '@rolldown/binding-linux-arm64-musl@1.0.0-beta.45':
     optional: true
 
-  '@rolldown/binding-linux-x64-gnu@1.0.0-beta.44':
+  '@rolldown/binding-linux-x64-gnu@1.0.0-beta.45':
     optional: true
 
-  '@rolldown/binding-linux-x64-musl@1.0.0-beta.44':
+  '@rolldown/binding-linux-x64-musl@1.0.0-beta.45':
     optional: true
 
-  '@rolldown/binding-openharmony-arm64@1.0.0-beta.44':
+  '@rolldown/binding-openharmony-arm64@1.0.0-beta.45':
     optional: true
 
-  '@rolldown/binding-wasm32-wasi@1.0.0-beta.44':
+  '@rolldown/binding-wasm32-wasi@1.0.0-beta.45':
     dependencies:
       '@napi-rs/wasm-runtime': 1.0.7
     optional: true
 
-  '@rolldown/binding-win32-arm64-msvc@1.0.0-beta.44':
+  '@rolldown/binding-win32-arm64-msvc@1.0.0-beta.45':
     optional: true
 
-  '@rolldown/binding-win32-ia32-msvc@1.0.0-beta.44':
+  '@rolldown/binding-win32-ia32-msvc@1.0.0-beta.45':
     optional: true
 
-  '@rolldown/binding-win32-x64-msvc@1.0.0-beta.44':
+  '@rolldown/binding-win32-x64-msvc@1.0.0-beta.45':
     optional: true
 
-  '@rolldown/pluginutils@1.0.0-beta.44': {}
+  '@rolldown/pluginutils@1.0.0-beta.45': {}
 
   '@rollup/pluginutils@5.1.4(rollup@4.52.2)':
     dependencies:
@@ -16990,7 +16993,7 @@ snapshots:
     dependencies:
       glob: 7.2.3
 
-  rolldown-plugin-dts@0.16.5(rolldown@1.0.0-beta.44)(typescript@5.8.3):
+  rolldown-plugin-dts@0.16.5(rolldown@1.0.0-beta.45)(typescript@5.8.3):
     dependencies:
       '@babel/generator': 7.28.3
       '@babel/parser': 7.28.4
@@ -17001,32 +17004,32 @@ snapshots:
       dts-resolver: 2.1.2
       get-tsconfig: 4.10.1
       magic-string: 0.30.19
-      rolldown: 1.0.0-beta.44
+      rolldown: 1.0.0-beta.45
     optionalDependencies:
       typescript: 5.8.3
     transitivePeerDependencies:
       - oxc-resolver
       - supports-color
 
-  rolldown@1.0.0-beta.44:
+  rolldown@1.0.0-beta.45:
     dependencies:
       '@oxc-project/types': 0.95.0
-      '@rolldown/pluginutils': 1.0.0-beta.44
+      '@rolldown/pluginutils': 1.0.0-beta.45
     optionalDependencies:
-      '@rolldown/binding-android-arm64': 1.0.0-beta.44
-      '@rolldown/binding-darwin-arm64': 1.0.0-beta.44
-      '@rolldown/binding-darwin-x64': 1.0.0-beta.44
-      '@rolldown/binding-freebsd-x64': 1.0.0-beta.44
-      '@rolldown/binding-linux-arm-gnueabihf': 1.0.0-beta.44
-      '@rolldown/binding-linux-arm64-gnu': 1.0.0-beta.44
-      '@rolldown/binding-linux-arm64-musl': 1.0.0-beta.44
-      '@rolldown/binding-linux-x64-gnu': 1.0.0-beta.44
-      '@rolldown/binding-linux-x64-musl': 1.0.0-beta.44
-      '@rolldown/binding-openharmony-arm64': 1.0.0-beta.44
-      '@rolldown/binding-wasm32-wasi': 1.0.0-beta.44
-      '@rolldown/binding-win32-arm64-msvc': 1.0.0-beta.44
-      '@rolldown/binding-win32-ia32-msvc': 1.0.0-beta.44
-      '@rolldown/binding-win32-x64-msvc': 1.0.0-beta.44
+      '@rolldown/binding-android-arm64': 1.0.0-beta.45
+      '@rolldown/binding-darwin-arm64': 1.0.0-beta.45
+      '@rolldown/binding-darwin-x64': 1.0.0-beta.45
+      '@rolldown/binding-freebsd-x64': 1.0.0-beta.45
+      '@rolldown/binding-linux-arm-gnueabihf': 1.0.0-beta.45
+      '@rolldown/binding-linux-arm64-gnu': 1.0.0-beta.45
+      '@rolldown/binding-linux-arm64-musl': 1.0.0-beta.45
+      '@rolldown/binding-linux-x64-gnu': 1.0.0-beta.45
+      '@rolldown/binding-linux-x64-musl': 1.0.0-beta.45
+      '@rolldown/binding-openharmony-arm64': 1.0.0-beta.45
+      '@rolldown/binding-wasm32-wasi': 1.0.0-beta.45
+      '@rolldown/binding-win32-arm64-msvc': 1.0.0-beta.45
+      '@rolldown/binding-win32-ia32-msvc': 1.0.0-beta.45
+      '@rolldown/binding-win32-x64-msvc': 1.0.0-beta.45
 
   rollup@4.52.2:
     dependencies:
@@ -17899,8 +17902,8 @@ snapshots:
       diff: 8.0.2
       empathic: 2.0.0
       hookable: 5.5.3
-      rolldown: 1.0.0-beta.44
-      rolldown-plugin-dts: 0.16.5(rolldown@1.0.0-beta.44)(typescript@5.8.3)
+      rolldown: 1.0.0-beta.45
+      rolldown-plugin-dts: 0.16.5(rolldown@1.0.0-beta.45)(typescript@5.8.3)
       semver: 7.7.2
       tinyexec: 1.0.1
       tinyglobby: 0.2.15

From f98a84a82ec0d84a6cd1d8f47887e3fbfa9c217b Mon Sep 17 00:00:00 2001
From: Gabriel Miranda <gabrielmfern@outlook.com>
Date: Mon, 27 Oct 2025 17:17:39 -0300
Subject: [PATCH 31/33] change moon icon

---
 packages/preview-server/src/components/icons/icon-moon.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/preview-server/src/components/icons/icon-moon.tsx b/packages/preview-server/src/components/icons/icon-moon.tsx
index 559bb146ee..b2e8879788 100644
--- a/packages/preview-server/src/components/icons/icon-moon.tsx
+++ b/packages/preview-server/src/components/icons/icon-moon.tsx
@@ -7,7 +7,9 @@ export const IconMoon = React.forwardRef<IconElement, Readonly<IconProps>>(
     <IconBase ref={forwardedRef} {...props}>
       <path
         fill="currentColor"
-        d="m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3zm3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95zm-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31"
+        fillRule="evenodd"
+        d="M12.226 2.003a9.97 9.97 0 0 0-7.297 2.926c-3.905 3.905-3.905 10.237 0 14.142s10.237 3.905 14.142 0a9.97 9.97 0 0 0 2.926-7.297a10 10 0 0 0-.337-2.368a15 15 0 0 1-1.744 1.436c-1.351.949-2.733 1.563-3.986 1.842c-1.906.423-3.214.032-3.93-.684s-1.107-2.024-.684-3.93c.279-1.253.893-2.635 1.842-3.986c.414-.592.893-1.177 1.436-1.744a10 10 0 0 0-2.368-.337m5.43 15.654a7.96 7.96 0 0 0 2.251-4.438c-3.546 2.045-7.269 2.247-9.321.195s-1.85-5.775.195-9.321a8 8 0 1 0 6.876 13.564"
+        clipRule="evenodd"
       />
     </IconBase>
   ),

From 7daccba5b243cefa9750f88d036c6aea4bb577f1 Mon Sep 17 00:00:00 2001
From: Gabriel Miranda <gabrielmfern@outlook.com>
Date: Mon, 27 Oct 2025 17:22:13 -0300
Subject: [PATCH 32/33] Revert "change moon icon"

This reverts commit f98a84a82ec0d84a6cd1d8f47887e3fbfa9c217b.
---
 packages/preview-server/src/components/icons/icon-moon.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/preview-server/src/components/icons/icon-moon.tsx b/packages/preview-server/src/components/icons/icon-moon.tsx
index b2e8879788..559bb146ee 100644
--- a/packages/preview-server/src/components/icons/icon-moon.tsx
+++ b/packages/preview-server/src/components/icons/icon-moon.tsx
@@ -7,9 +7,7 @@ export const IconMoon = React.forwardRef<IconElement, Readonly<IconProps>>(
     <IconBase ref={forwardedRef} {...props}>
       <path
         fill="currentColor"
-        fillRule="evenodd"
-        d="M12.226 2.003a9.97 9.97 0 0 0-7.297 2.926c-3.905 3.905-3.905 10.237 0 14.142s10.237 3.905 14.142 0a9.97 9.97 0 0 0 2.926-7.297a10 10 0 0 0-.337-2.368a15 15 0 0 1-1.744 1.436c-1.351.949-2.733 1.563-3.986 1.842c-1.906.423-3.214.032-3.93-.684s-1.107-2.024-.684-3.93c.279-1.253.893-2.635 1.842-3.986c.414-.592.893-1.177 1.436-1.744a10 10 0 0 0-2.368-.337m5.43 15.654a7.96 7.96 0 0 0 2.251-4.438c-3.546 2.045-7.269 2.247-9.321.195s-1.85-5.775.195-9.321a8 8 0 1 0 6.876 13.564"
-        clipRule="evenodd"
+        d="m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3zm3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95zm-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31"
       />
     </IconBase>
   ),

From d2ebc56ce411cae1c433f6b9b4f88d113995f6c8 Mon Sep 17 00:00:00 2001
From: Gabriel Miranda <gabrielmfern@outlook.com>
Date: Tue, 28 Oct 2025 08:19:54 -0300
Subject: [PATCH 33/33] lint

---
 .../src/components/topbar/emulated-dark-mode-toggle.tsx        | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/preview-server/src/components/topbar/emulated-dark-mode-toggle.tsx b/packages/preview-server/src/components/topbar/emulated-dark-mode-toggle.tsx
index 1a79001677..37f474ba6d 100644
--- a/packages/preview-server/src/components/topbar/emulated-dark-mode-toggle.tsx
+++ b/packages/preview-server/src/components/topbar/emulated-dark-mode-toggle.tsx
@@ -30,7 +30,8 @@ export const EmulatedDarkModeToggle = ({
         </Toggle.Root>
       </Tooltip.Trigger>
       <Tooltip.Content>
-        When enabled, inverts colors in the preview emulating what email clients do in dark mode.
+        When enabled, inverts colors in the preview emulating what email clients
+        do in dark mode.
       </Tooltip.Content>
     </Tooltip>
   );