Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update Tailwind setup #5845

Merged
merged 1 commit into from
Jan 26, 2024
Merged

Update Tailwind setup #5845

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 26 additions & 4 deletions components/doc/tailwind/unstyledmode/setupdoc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

...
Expand All @@ -50,7 +65,7 @@ return(
`
};

const code4 = {
const code5 = {
basic: `
import { PrimeReactProvider } from "primereact/api";

Expand Down Expand Up @@ -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>
</>
Expand Down
Loading