chore(tailwind): add test for #2388

gabrielmfern · gabrielmfern · commit 8e6ae064c82d · 2025-12-07T15:05:34.000-03:00
diff --git a/packages/tailwind/src/__snapshots__/tailwind.spec.tsx.snap b/packages/tailwind/src/__snapshots__/tailwind.spec.tsx.snap
@@ -31,6 +31,8 @@ exports[`Tailwind component > preserves mso styles 1`] = `
 "
 `;
 
+exports[`Tailwind component > properly does not inline custom utilities 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>.text-body{color:green!important;@media (prefers-color-scheme:dark){color:orange!important}}</style></head><body class="text-body"><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td>this is the body</td></tr></tbody></table><!--/$--></body></html>"`;
+
 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">
diff --git a/packages/tailwind/src/tailwind.spec.tsx b/packages/tailwind/src/tailwind.spec.tsx
@@ -1,3 +1,4 @@
+import { Body } from '@react-email/body';
 import { Button } from '@react-email/button';
 import { Head } from '@react-email/head';
 import { Heading } from '@react-email/heading';
@@ -7,6 +8,7 @@ import { Link } from '@react-email/link';
 import { pretty, render } from '@react-email/render';
 import { ResponsiveColumn, ResponsiveRow } from '@responsive-email/react-email';
 import React from 'react';
+import plugin from 'tailwindcss/plugin';
 import type { TailwindConfig } from '.';
 import { Tailwind } from '.';
 
@@ -295,6 +297,32 @@ describe('Tailwind component', () => {
     expect(actualOutput).toMatchSnapshot();
   });
 
+  // See https://github.com/resend/react-email/issues/2388
+  it('properly does not inline custom utilities', async () => {
+    const actualOutput = await render(
+      <Tailwind
+        config={{
+          plugins: [
+            plugin(({ addUtilities }) => {
+              addUtilities({
+                '.text-body': {
+                  '@apply text-[green] dark:text-[orange]': {},
+                },
+              });
+            }),
+          ],
+        }}
+      >
+        <Html>
+          <Head />
+          <Body className="text-body">this is the body</Body>
+        </Html>
+      </Tailwind>,
+    );
+
+    expect(actualOutput).toMatchSnapshot();
+  });
+
   it('recognizes custom responsive screen', async () => {
     const actualOutput = await render(
       <Html>
@@ -336,16 +364,16 @@ describe('Tailwind component', () => {
 
   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
-    onto. The problem with this approach was that the check to see if an element was an instance of
-    the <Head> component fails after minification as we did it by the function name.
-
-    The best solution is to check for the Head element on arbitrarily deep levels of the React tree
-    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.
-  */
+      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
+      onto. The problem with this approach was that the check to see if an element was an instance of
+      the <Head> component fails after minification as we did it by the function name.
+
+      The best solution is to check for the Head element on arbitrarily deep levels of the React tree
+      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(

Original file line number	Diff line number	Diff line change
@@ -31,6 +31,8 @@ exports[`Tailwind component > preserves mso styles 1`] = `
`31`	`31`	`"`
`32`	`32`	`;
`33`	`33`
	`34`	+exports[`Tailwind component > properly does not inline custom utilities 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>.text-body{color:green!important;@media (prefers-color-scheme:dark){color:orange!important}}</style></head><body class="text-body"><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td>this is the body</td></tr></tbody></table><!--/$--></body></html>"`;
	`35`	`+`
`34`	`36`	exports[`Tailwind component > recognizes custom responsive screen 1`] = `
`35`	`37`	`"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">`
`36`	`38`	`<html dir="ltr" lang="en">`