Improves Tailwind detection performance and reliability

Author: Titou325

docs/components/markdown/markdown.mdx

@@ -110,6 +110,8 @@ body {
 
 You can use the `tocRenderer` prop to render a table of contents from your Markdown content. The headers will be automatically detected and rendered in the order they appear. You need to place the `<Toc />` component in your Markdown content to render the table of contents.
 
+You can also use the `id` attribute in your headers to link to them directly.
+
 <Frame background="subtle"><img src="../../images/previews/markdown-344947c9/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>

docs/images/previews/ui-templates-invoice-advanced-089aa4f4/document.1.jpg renamed to docs/images/previews/ui-templates-invoice-advanced-657df4ea/document.1.jpg

@@ -8,7 +8,7 @@ icon: list
 <CardGroup>
  <Card title="Scientific" href="../../../ui/templates/scientific-report">
       <div style={{ marginTop: "1rem", borderRadius: "0.25rem", overflow: "hidden" }}>
-        <img src="../images/previews/ui-templates-scientific-report-31829950/document.1.jpg"/>
+        <img src="../images/previews/ui-templates-scientific-report-7f68dcf5/document.1.jpg"/>
       </div>
     </Card>
  <Card title="With charts" href="../../../ui/templates/report-charts">
@@ -23,7 +23,7 @@ icon: list
 <CardGroup>
  <Card title="Receipt" href="../../../ui/templates/receipt">
       <div style={{ marginTop: "1rem", borderRadius: "0.25rem", overflow: "hidden" }}>
-        <img src="../images/previews/ui-templates-receipt-4906d507/document.1.jpg"/>
+        <img src="../images/previews/ui-templates-receipt-644d535a/document.1.jpg"/>
       </div>
     </Card>
 </CardGroup>
@@ -43,12 +43,12 @@ icon: list
 <CardGroup>
  <Card title="Basic" href="../../../ui/templates/invoice">
       <div style={{ marginTop: "1rem", borderRadius: "0.25rem", overflow: "hidden" }}>
-        <img src="../images/previews/ui-templates-invoice-808342e7/document.1.jpg"/>
+        <img src="../images/previews/ui-templates-invoice-c1137a92/document.1.jpg"/>
       </div>
     </Card>
  <Card title="Advanced with QR" href="../../../ui/templates/invoice-advanced">
       <div style={{ marginTop: "1rem", borderRadius: "0.25rem", overflow: "hidden" }}>
-        <img src="../images/previews/ui-templates-invoice-advanced-089aa4f4/document.1.jpg"/>
+        <img src="../images/previews/ui-templates-invoice-advanced-657df4ea/document.1.jpg"/>
       </div>
     </Card>
 </CardGroup>

docs/images/previews/ui-templates-invoice-advanced-089aa4f4/document.pdf renamed to docs/images/previews/ui-templates-invoice-advanced-657df4ea/document.pdf

@@ -4,7 +4,7 @@ icon: file-invoice
 category: Invoices
 ---
 
-<Frame background="subtle"><img src="../../images/previews/ui-templates-invoice-advanced-089aa4f4/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/ui-templates-invoice-advanced-657df4ea/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 ```jsx
 import { Footnote, PageBottom, Tailwind, CSS } from "@fileforge/react-print";

docs/images/previews/ui-templates-invoice-808342e7/document.1.jpg renamed to docs/images/previews/ui-templates-invoice-c1137a92/document.1.jpg

@@ -4,7 +4,7 @@ icon: file-invoice
 category: Invoices
 ---
 
-<Frame background="subtle"><img src="../../images/previews/ui-templates-invoice-808342e7/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/ui-templates-invoice-c1137a92/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 ```jsx
 import { Footnote, PageBottom, Tailwind } from "@fileforge/react-print";

docs/images/previews/ui-templates-invoice-808342e7/document.pdf renamed to docs/images/previews/ui-templates-invoice-c1137a92/document.pdf

@@ -4,7 +4,7 @@ icon: receipt
 category: Receipts
 ---
 
-<Frame background="subtle"><img src="../../images/previews/ui-templates-receipt-4906d507/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/ui-templates-receipt-644d535a/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 ```jsx
 import { Footnote, Tailwind } from "@fileforge/react-print";

docs/images/previews/ui-templates-receipt-4906d507/document.1.jpg renamed to docs/images/previews/ui-templates-receipt-644d535a/document.1.jpg

@@ -4,7 +4,7 @@ icon: flask
 category: Reports
 ---
 
-<Frame background="subtle"><img src="../../images/previews/ui-templates-scientific-report-31829950/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/ui-templates-scientific-report-7f68dcf5/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 ```jsx
 import React, { createContext, useEffect, useState } from "react";

docs/images/previews/ui-templates-receipt-4906d507/document.pdf renamed to docs/images/previews/ui-templates-receipt-644d535a/document.pdf

@@ -5,12 +5,11 @@
 
 import { DocConfig } from "docgen/types";
 import React from "react";
-import postcss, { Processor } from "postcss";
+import postcss from "postcss";
 // import type { Config as TailwindConfig } from "tailwindcss";
 // @ts-ignore
 import postcssColorFunctionalNotation from "postcss-color-functional-notation";
 
-import { quickSafeRenderToString } from "./utils.resend";
 import type { CorePluginsConfig } from "tailwindcss/types/config";
 
 import { CSS } from "../css/css";
@@ -21,6 +20,7 @@ import { createTailwindcssPlugin } from "@mhsdesign/jit-browser-tailwindcss";
 
 // @ts-ignore
 import isPseudoClass from "@csstools/postcss-is-pseudo-class";
+import { renderToString } from "react-dom/server";
 
 export const Tailwind = ({
   children,
@@ -38,7 +38,15 @@ export const Tailwind = ({
    */
   config?: any; // Omit<TailwindConfig, "content">;
 }) => {
-  const markup = quickSafeRenderToString(children);
+  const markup = renderToString(<>{children}</>);
+
+  const classNamesList = (markup.match(/class="([^"]*)"/g) || [])
+    .map((match) => {
+      return match.substring(7, match.length - 1).split(" ");
+    })
+    .flat();
+
+  const classNamesSet = new Set(classNamesList);
 
   const corePlugins = config?.corePlugins as CorePluginsConfig;
 
@@ -61,7 +69,13 @@ export const Tailwind = ({
   const { css } = postcss([
     createTailwindcssPlugin({
       tailwindConfig,
-      content: [{ content: markup, extension: "html" }],
+      content: [
+        {
+          content: `<div class="${Array.from(classNamesSet).join(" ")}"
+        }"></div>`,
+          extension: "html",
+        },
+      ],
     }),
     // postcssCssVariables,
     isPseudoClass(),

docs/images/previews/ui-templates-scientific-report-31829950/document.1.jpg renamed to docs/images/previews/ui-templates-scientific-report-7f68dcf5/document.1.jpg

@@ -26,6 +26,24 @@ test("works with tailwind", async () => {
   expect(html).toContain("rgba(239, 68, 68");
 });
 
+test("smoke test tailwind", async () => {
+  const TestComponent = () => {
+    return (
+      <Tailwind>
+        {Array.from({ length: 1000000 }).map((_, i) => (
+          <div key={i} className="bg-red-500">
+            Test
+          </div>
+        ))}
+      </Tailwind>
+    );
+  };
+
+  const html = await compile(<TestComponent />);
+
+  expect(html).toContain("rgba(239, 68, 68");
+});
+
 test("works with tailwind dark", async () => {
   const TestComponent = () => (
     <Tailwind