Update Tailwind setup (#5845)

primefaces · Jan 26, 2024 · 6e2b91e · 6e2b91e
1 parent f65c1c0
commit 6e2b91e
Showing 1 changed file with 26 additions and 4 deletions.
diff --git a/components/doc/tailwind/unstyledmode/setupdoc.js b/components/doc/tailwind/unstyledmode/setupdoc.js
@@ -38,6 +38,21 @@ return(
     const code3 = {
         basic: `
 import { PrimeReactProvider } from "primereact/api";
+import Tailwind from 'primereact/passthrough/tailwind';
+
+...
+return(
+    <PrimeReactProvider value={{ unstyled: true, pt: Tailwind }}>
+        <App />
+    </PrimeReactProvider>
+)
+ 
+`
+    };
+
+    const code4 = {
+        basic: `
+import { PrimeReactProvider } from "primereact/api";
 import { twMerge } from 'tailwind-merge';
 
 ...
@@ -50,7 +65,7 @@ return(
 `
     };
 
-    const code4 = {
+    const code5 = {
         basic: `
 import { PrimeReactProvider } from "primereact/api";
 
@@ -140,19 +155,26 @@ export default function MyApp({ Component, pageProps }) {
                 <p className="flex align-items-start gap-2">
                     <Badge value="3"></Badge>
                     <span>
-                        <b>Optional:</b> specify the classNameMergeFunction as <i>twMerge</i> to resolve className conflicts via <a href="https://www.npmjs.com/package/tailwind-merge">tailwind-merge</a>. This will prevent classNames specified in the
-                        global pass through from overriding those specified via pass through in your application.
+                        <b>Optional:</b> specify the built in <i>Tailwind</i> style of pre-configured Tailwind settings.
                     </span>
                 </p>
                 <DocSectionCode code={code3} hideToggleCode import hideCodeSandbox hideStackBlitz />
                 <p className="flex align-items-start gap-2">
                     <Badge value="4"></Badge>
+                    <span>
+                        <b>Optional:</b> specify the classNameMergeFunction as <i>twMerge</i> to resolve className conflicts via <a href="https://www.npmjs.com/package/tailwind-merge">tailwind-merge</a>. This will prevent classNames specified in the
+                        global pass through from overriding those specified via pass through in your application.
+                    </span>
+                </p>
+                <DocSectionCode code={code4} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <p className="flex align-items-start gap-2">
+                    <Badge value="5"></Badge>
                     <span>
                         At the final step, component styles are provided via a pass through configuration that utilizes Tailwind CSS. The default preset of each component is available at the Tailwind part under theming section of each component so
                         you'll able to copy paste instead of starting from scratch. Example below styles, inputtext and panel components;
                     </span>
                 </p>
-                <DocSectionCode code={code4} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code5} hideToggleCode import hideCodeSandbox hideStackBlitz />
                 <p>Voilà 💙, you now have 90+ awesome React UI components styled with Tailwind that will work in harmony with the rest of your application. Time to customize it to bring in your own style with Tailwind.</p>
             </DocSectionText>
         </>