chore(deps): update dependency tailwindcss to v3.4.17

.changeset/dirty-needles-chew.md

@@ -0,0 +1,5 @@
+---
+"react-email": minor
+---
+
+Theme switcher for email template

.changeset/great-parrots-yell.md

@@ -0,0 +1,5 @@
+---
+"@react-email/tailwind": minor
+---
+
+Extract tailwind pseudo classes to stylesheet

.changeset/pre.json

@@ -0,0 +1,37 @@
+{
+  "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.0.11",
+    "@react-email/button": "0.0.19",
+    "@react-email/code-block": "0.0.13",
+    "@react-email/code-inline": "0.0.5",
+    "@react-email/column": "0.0.13",
+    "@react-email/components": "0.0.37",
+    "@react-email/container": "0.0.15",
+    "create-email": "1.2.0",
+    "react-email-starter": "1.0.7",
+    "@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.15",
+    "@react-email/preview": "0.0.12",
+    "react-email": "4.0.11",
+    "@react-email/render": "1.1.0",
+    "@react-email/row": "0.0.12",
+    "@react-email/section": "0.0.16",
+    "@react-email/tailwind": "1.0.5",
+    "@react-email/text": "0.1.2",
+    "tsconfig": "0.0.0"
+  },
+  "changesets": ["dirty-needles-chew"]
+}

.github/workflows/release-canary.yml

@@ -1,12 +1,9 @@
-name: rsnd
-
+name: Release Canary
 on:
   push:
     branches:
       - canary
-
 concurrency: ${{ github.workflow }}-${{ github.ref }}
-
 jobs:
   release:
     name: release canary
@@ -19,19 +16,16 @@ jobs:
         uses: actions/checkout@v4
         with:
           fetch-depth: 0
-
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
           node-version: 22
-
       - name: Enable Corepack
         id: pnpm-setup
         run: |
           corepack enable
           corepack prepare [email protected] --activate
           pnpm config set script-shell "/usr/bin/bash"
-
       - name: pnpm Cache
         uses: buildjet/cache@3e70d19e31d6a8030aeddf6ed8dbe601f94d09f4
         with:
@@ -42,16 +36,13 @@ jobs:
           key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
             ${{ runner.os }}-pnpm-
-
       - name: Install packages
         if: steps.pnpm-cache.outputs.cache-hit != 'true'
         run: pnpm install --frozen-lockfile
-
       - name: Enter prerelease mode
         # This step errors if it is already in prerelease mode
         continue-on-error: true
         run: pnpm canary:enter
-
       - name: Create "Version packages" PR or publish release
         uses: changesets/action@06245a4e0a36c064a573d4150030f5ec548e4fcc
         with:

apps/web/package.json

@@ -45,7 +45,7 @@
     "classnames": "2.5.1",
     "html-to-ast": "0.0.6",
     "postcss": "8.5.3",
-    "tailwindcss": "3.4.3",
+    "tailwindcss": "3.4.17",
     "tsconfig": "workspace:*",
     "typescript": "5.8.3",
     "webpack": "5.99.6",

packages/code-block/CHANGELOG.md

@@ -6,6 +6,12 @@
 
 - 9aa033c: Use range of versions for dependencies
 
+## 0.0.13-canary.0
+
+### Patch Changes
+
+- 9b1adb0: Use range of versions for dependencies
+
 ## 0.0.12
 
 ### Patch Changes

packages/components/CHANGELOG.md

@@ -36,6 +36,79 @@
   - @react-email/[email protected]
   - @react-email/[email protected]
 
+## 0.0.37-canary.4
+
+### Patch Changes
+
+- Updated dependencies [bd58fa9]
+  - @react-email/[email protected]
+
+## 0.0.37-canary.3
+
+### Patch Changes
+
+- Updated dependencies [8179dc6]
+  - @react-email/[email protected]
+
+## 0.0.37-canary.2
+
+### Patch Changes
+
+- Updated dependencies [9b1adb0]
+  - @react-email/[email protected]
+  - @react-email/[email protected]
+  - @react-email/[email protected]
+  - @react-email/[email protected]
+  - @react-email/[email protected]
+  - @react-email/[email protected]
+  - @react-email/[email protected]
+  - @react-email/[email protected]
+  - @react-email/[email protected]
+  - @react-email/[email protected]
+  - @react-email/[email protected]
+  - @react-email/[email protected]
+  - @react-email/[email protected]
+  - @react-email/[email protected]
+  - @react-email/[email protected]
+  - @react-email/[email protected]
+  - @react-email/[email protected]
+  - @react-email/[email protected]
+  - @react-email/[email protected]
+  - @react-email/[email protected]
+
+## 0.0.37-canary.1
+
+### Patch Changes
+
+- Updated dependencies [32372da]
+  - @react-email/[email protected]
+  - @react-email/[email protected]
+  - @react-email/[email protected]
+  - @react-email/[email protected]
+  - @react-email/[email protected]
+  - @react-email/[email protected]
+  - @react-email/[email protected]
+  - @react-email/[email protected]
+  - @react-email/[email protected]
+  - @react-email/[email protected]
+  - @react-email/[email protected]
+  - @react-email/[email protected]
+  - @react-email/[email protected]
+  - @react-email/[email protected]
+  - @react-email/[email protected]
+  - @react-email/[email protected]
+  - @react-email/[email protected]
+  - @react-email/[email protected]
+  - @react-email/[email protected]
+  - @react-email/[email protected]
+
+## 0.0.37-canary.0
+
+### Patch Changes
+
+- Updated dependencies [ae8c007]
+  - @react-email/[email protected]
+
 ## 0.0.36
 
 ### Patch Changes

packages/create-email/CHANGELOG.md

@@ -10,12 +10,26 @@
 
 - d689346: Show package.json's version on --version for create-email
 
+## 1.2.0-canary.1
+
+### Patch Changes
+
+- 0c3aaa3: Show package.json's version on --version for create-email
+
+## 1.2.0-canary.0
+
+### Minor Changes
+
+- 237d115: Fetch react-email package versions at runtime from `--tag` option
+
 ## 1.1.0
 
 ### Minor Changes
 
 - 31fd7cc: use caret for dependency on react-email and @react-email/components
 
+## 1.0.8-canary.0
+
 ## 1.0.7
 
 ### Patch Changes

packages/create-email/template/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## 1.1.0
 
+## 1.0.8-canary.0
+
+### Patch Changes
+
+- @react-email/[email protected]
+
 ## 1.0.7
 
 ## 1.0.6

packages/markdown/CHANGELOG.md

@@ -6,6 +6,12 @@
 
 - 9aa033c: Use range of versions for dependencies
 
+## 0.0.15-canary.0
+
+### Patch Changes
+
+- 9b1adb0: Use range of versions for dependencies
+
 ## 0.0.14
 
 ### Patch Changes

packages/react-email/CHANGELOG.md

@@ -1,5 +1,38 @@
 # react-email
 
+## 4.1.0-canary.4
+
+### Patch Changes
+
+- 5c6150d: Add .json import support for hot reloading
+- aae2f59: Ensure dependencies outside emails directory are completely resolved
+- b4b2373: Fix non-email files being rendered during hot reloading
+
+## 4.1.0-canary.3
+
+### Patch Changes
+
+- 681d4ed: fix backwards compatibility with `render` versions
+
+## 4.1.0-canary.2
+
+### Patch Changes
+
+- 9b1adb0: Use range of versions for dependencies
+
+## 4.1.0-canary.1
+
+### Patch Changes
+
+- a587e17: Fix dependent of dependents not causing hot reloads
+- dbf3a64: Add error message for when an email template does not have a default export
+
+## 4.1.0-canary.0
+
+### Minor Changes
+
+- 4a0d4e3: Theme switcher for email template
+
 ## 4.0.11
 
 ### Patch Changes

packages/react-email/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-email",
-  "version": "4.0.11",
+  "version": "4.1.0-canary.4",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
     "email": "./dist/cli/index.mjs"
@@ -84,7 +84,7 @@
     "spamc": "0.0.5",
     "stacktrace-parser": "0.1.11",
     "tailwind-merge": "3.2.0",
-    "tailwindcss": "3.4.0",
+    "tailwindcss": "3.4.17",
     "tsup": "8.4.0",
     "tsx": "4.19.3",
     "typescript": "5.8.3",

packages/react-email/src/app/preview/[...slug]/preview.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import { use, useState } from 'react';
+import { use, 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 { PreviewContext } from '../../../contexts/preview';
 import { useClampedState } from '../../../hooks/use-clamped-state';
+import { useIframeColorScheme } from '../../../hooks/use-iframe-color-scheme';
 import { cn } from '../../../utils';
 import { RenderingError } from './rendering-error';
 
@@ -32,9 +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 activeView = searchParams.get('view') ?? 'preview';
   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;
 
@@ -99,6 +112,10 @@ const Preview = ({ emailTitle, className, ...props }: PreviewProps) => {
           viewHeight={height}
           viewWidth={width}
         />
+        <ThemeToggleGroup
+          active={activeTheme}
+          onChange={(theme) => handleThemeChange(theme)}
+        />
         <ActiveViewToggleGroup
           activeView={activeView}
           setActiveView={handleViewChange}
@@ -164,6 +181,7 @@ const Preview = ({ emailTitle, className, ...props }: PreviewProps) => {
                 <iframe
                   className="solid max-h-full rounded-lg bg-white"
                   ref={(iframe) => {
+                    iframeRef.current = iframe;
                     if (iframe) {
                       return makeIframeDocumentBubbleEvents(iframe);
                     }

packages/react-email/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';