diff --git a/docs/components/tailwind/tailwind.mdx b/docs/components/tailwind/tailwind.mdx index 7c2d900..b0d84c0 100644 --- a/docs/components/tailwind/tailwind.mdx +++ b/docs/components/tailwind/tailwind.mdx @@ -102,3 +102,49 @@ body { +#### Disable Preflight + +You can disable the Tailwind Preflight CSS. + + + +
+ +```jsx +import { Tailwind } from "@fileforge/react-print"; + + +
+

Level 1 Header

+

+ This is a Tailwind component. All children of this component will have + access to the Tailwind CSS classes. +

+
; + +``` +
+ +```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; +} + +``` + +
+ diff --git a/docs/images/previews/tailwind-33b7c4e5/document.1.jpg b/docs/images/previews/tailwind-33b7c4e5/document.1.jpg new file mode 100644 index 0000000..24819b5 Binary files /dev/null and b/docs/images/previews/tailwind-33b7c4e5/document.1.jpg differ diff --git a/docs/images/previews/tailwind-33b7c4e5/document.pdf b/docs/images/previews/tailwind-33b7c4e5/document.pdf new file mode 100644 index 0000000..2e4de6b Binary files /dev/null and b/docs/images/previews/tailwind-33b7c4e5/document.pdf differ diff --git a/docs/sortedDocs.json b/docs/sortedDocs.json index 62cfd2e..d878e47 100644 --- a/docs/sortedDocs.json +++ b/docs/sortedDocs.json @@ -1 +1 @@ -[{"icon":"fa-solid fa-code","name":"compile","description":"Compile a React component to a string with the Onedoc print styles.","outputPath":"/Users/titouanlaunay/Documents/Onedoc/react-print/docs/components/compile","files":[{"name":"compile","baseName":"compile","path":"compile/compile.tsx","outputPath":"/Users/titouanlaunay/Documents/Onedoc/react-print/docs/components/compile/compile.mdx","markdown":"---\ntitle: compile\n\n\n---\n\nSupport\n\n
Client-side
Server-side
\n\n#### Preview\n\nA simple function to compile a React component to an HTML string with the Onedoc print styles.\n ```jsx\n const html = await compile();\n ```\n\n\n\n
\n\n```jsx\nimport { compile } from \"@fileforge/react-print\";\n\n\n
Hello World!
\n
;\n\n```\n
\n\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\");\n\nhtml,\nbody {\n font-size: 28px;\n font-family: \"Inter\", sans-serif;\n}\n\n@page {\n size: A4;\n}\n\n```\n\n
\n\n### Examples\n\n#### Emotion CSS\n\nPass `{ emotion: true }` as the second compile option to merge and extract critical CSS using Emotion. Some libraries such as Chakra UI require this option to work correctly.\n\n```jsx\nconst html = await compile(, { emotion: true });\n```\n\n\n\n
\n\n```jsx\nimport { compile } from \"@fileforge/react-print\";\nimport { Button, ChakraProvider, extendTheme } from \"@chakra-ui/react\";\n\n<>\n \n \n \n;\n\n```\n\n\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\");\n\nhtml,\nbody {\n font-size: 28px;\n font-family: \"Inter\", sans-serif;\n}\n\n@page {\n size: A4;\n}\n\n```\n\n
\n\n","config":{"name":"compile","description":"","components":{"compile":{"server":true,"client":true,"examples":{"default":{"description":"A simple function to compile a React component to an HTML string with the Onedoc print styles.\n ```jsx\n const html = await compile();\n ```","template":{"key":null,"ref":null,"props":{"children":{"type":"div","key":null,"ref":null,"props":{"className":"bg-red-400","children":"Hello World!"},"_owner":null,"_store":{}}},"_owner":null,"_store":{}},"templateString":"(\n \n
Hello World!
\n
\n )"},"emotion":{"description":"Pass `{ emotion: true }` as the second compile option to merge and extract critical CSS using Emotion. Some libraries such as Chakra UI require this option to work correctly.\n\n```jsx\nconst html = await compile(, { emotion: true });\n```","template":{"key":null,"ref":null,"props":{"children":{"key":null,"ref":null,"props":{"children":{"type":{},"key":null,"ref":null,"props":{"colorScheme":"blue","children":"Hello"},"_owner":null,"_store":{}}},"_owner":null,"_store":{}}},"_owner":null,"_store":{}},"name":"Emotion CSS","compileOptions":{"emotion":true},"externalImports":["import { Button, ChakraProvider, extendTheme } from \"@chakra-ui/react\";"],"templateString":"(\n <>\n \n \n \n \n )"}}}}}}]},{"icon":"fa-brands fa-css3-alt","name":"CSS","description":"Allows adding CSS to the document while securely parsing and escaping it.\n\nNB: While you can add regular CSS with the `