Merge pull request #48 from OnedocLabs/add-support-for-tailwind-prefl…

…ight Adds support for Tailwind preflight:false
OnedocLabs · Aug 22, 2024 · aa465da · aa465da
2 parents 9725f99 + ca38307
commit aa465da
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 2 deletions.
diff --git a/docs/components/tailwind/tailwind.mdx b/docs/components/tailwind/tailwind.mdx
@@ -102,3 +102,49 @@ body {
 </CodeBlock>
 </CodeBlocks></div>
 
+#### Disable Preflight
+
+You can disable the Tailwind Preflight CSS.
+
+<Frame background="subtle"><img src="../../images/previews/tailwind-33b7c4e5/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>
+<CodeBlock title="template.tsx">
+```jsx
+import { Tailwind } from "@fileforge/react-print";
+
+<Tailwind
+  config={{
+    corePlugins: {
+      preflight: false,
+    },
+  }}
+>
+  <div className="bg-primary p-12 rounded-2xl"></div>
+  <h1>Level 1 Header</h1>
+  <p className="text-slate-800">
+    This is a Tailwind component. All children of this component will have
+    access to the Tailwind CSS classes.
+  </p>
+</Tailwind>;
+
+```
+</CodeBlock>
+<CodeBlock title="styles.css">
+```css
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
+
+html,
+body {
+  font-size: 28px;
+  font-family: "Inter", sans-serif;
+}
+
+@page {
+  size: A4;
+}
+
+```
+</CodeBlock>
+</CodeBlocks></div>
+
diff --git a/docs/images/previews/tailwind-33b7c4e5/document.1.jpg b/docs/images/previews/tailwind-33b7c4e5/document.1.jpg
diff --git a/docs/images/previews/tailwind-33b7c4e5/document.pdf b/docs/images/previews/tailwind-33b7c4e5/document.pdf
diff --git a/docs/sortedDocs.json b/docs/sortedDocs.json
diff --git a/src/tailwind/tailwind.tsx b/src/tailwind/tailwind.tsx
@@ -50,6 +50,14 @@ export const Tailwind = ({
     },
   };
 
+  let showPreflight = true;
+
+  if (corePlugins && Array.isArray(corePlugins)) {
+    showPreflight = corePlugins.includes("preflight");
+  } else if (corePlugins && typeof corePlugins === "object") {
+    showPreflight = corePlugins.preflight === false ? false : true;
+  }
+
   const { css } = postcss([
     createTailwindcssPlugin({
       tailwindConfig,
@@ -64,7 +72,7 @@ export const Tailwind = ({
         @tailwind components;
         @tailwind utilities;
 
-        ${preflightCss}
+        ${showPreflight ? preflightCss : ""}
       `,
     {
       from: undefined,
@@ -129,6 +137,26 @@ The supported Tailwind version is 3.3.2 due to changes in the PostCSS plugin syn
             </Tailwind>
           ),
         },
+        preflight: {
+          name: "Disable Preflight",
+          description: "You can disable the Tailwind Preflight CSS.",
+          template: (
+            <Tailwind
+              config={{
+                corePlugins: {
+                  preflight: false,
+                },
+              }}
+            >
+              <div className="bg-primary p-12 rounded-2xl"></div>
+              <h1>Level 1 Header</h1>
+              <p className="text-slate-800">
+                This is a Tailwind component. All children of this component
+                will have access to the Tailwind CSS classes.
+              </p>
+            </Tailwind>
+          ),
+        },
       },
     },
   },