feat(tailwind): test non-inlinable custom utilities (#2586)

gabrielmfern · gabrielmfern · commit e9af2853aa3f · 2025-10-24T09:33:01.000-03:00
diff --git 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
@@ -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">
