Tailwind CSS 是一个流行的实用至上的 CSS 库，非常适合无样式模式，可以使用您选择的设计系统为整个 UI 套件进行外观设计。
Tailwind CSS 可以与 PrimeReact 的样式模式或无样式模式一起使用。在这两种情况下，预检模式可能会破坏核心功能的样式，因此，在包含 Tailwind 样式的样式文件中，@layer 配置对于兼容性是必要的。
@layer tailwind-base, primereact, tailwind-utilities;
/* IMPORTANT: In "styled" mode you must add the PrimeReact Theme here. Do NOT include in "unstyled" mode */
@import 'primereact/resources/themes/lara-light-blue/theme.css' layer(primereact);
@layer tailwind-base {
@tailwind base;
}
@layer tailwind-utilities {
@tailwind components;
@tailwind utilities;
}
在无样式模式下，PrimeReact 的独家 Tailwind 集成对于那些既想要 Tailwind 的灵活性，又想要 UI 组件库的便利性的开发人员来说是一个绝佳的选择。Tailwind 非常适合 PrimeReact 的无样式模式来实现设计系统。甚至可以使用基于 PrimeOne Design 的内置 Tailwind 主题作为传递预设，以便立即开始使用。在即将到来的迭代中，将提供一个预设库来分享 PrimeReact 社区开发的实现。
本节假设您的应用程序中已经可以使用 Tailwind，如果不是，请访问 Tailwind CSS 框架指南（如 Vite）进行安装，并确保在包含 Tailwind 样式时应用上述 CSS 层配置。
1Tailwind 在内部使用 PurgeCSS 来删除未使用的类，由于 PrimeReact 组件是从 node_modules 加载的，因此 tailwind.config.js 中的 content 属性需要知道 PrimeReact，否则主题中使用的类也会被删除。
module.exports = {
...
content: [
"./index.html",
"./app/**/*.{js,ts,jsx,tsx,mdx}",
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./node_modules/primereact/**/*.{js,ts,jsx,tsx}",
// Or if using `src` directory:
"./src/**/*.{js,ts,jsx,tsx,mdx}",
],
...
}
2下一步是启用 unstyled 选项，以删除组件的默认样式类，并添加一个空的 pt，以便在下一节中使用 Tailwind 设置样式。请注意，如果您在此阶段运行应用程序，组件的功能和可访问性仍然有效，但由于没有样式，一切都将是透明的。
import { PrimeReactProvider } from "primereact/api";
...
return(
<PrimeReactProvider value={{ unstyled: true, pt: {} }}>
<App />
</PrimeReactProvider>
)
3可选：指定内置的 Tailwind 预配置 Tailwind 设置的样式。
import { PrimeReactProvider } from "primereact/api";
import Tailwind from 'primereact/passthrough/tailwind';
...
return(
<PrimeReactProvider value={{ unstyled: true, pt: Tailwind }}>
<App />
</PrimeReactProvider>
)
4可选：将 classNameMergeFunction 指定为 twMerge，以通过 tailwind-merge 解决 className 冲突。这将防止在全局传递中指定的 classNames 覆盖在应用程序中通过传递指定的 classNames。
import { PrimeReactProvider } from "primereact/api";
import { twMerge } from 'tailwind-merge';
...
return(
<PrimeReactProvider value={{ unstyled: true, pt: {}, ptOptions: { mergeSections: true, mergeProps: true, classNameMergeFunction: twMerge } }}>
<App />
</PrimeReactProvider>
)
5在最后一步，组件样式通过使用 Tailwind CSS 的传递配置提供。每个组件的默认预设在每个组件的主题部分的 Tailwind 部分下提供，因此您将能够复制粘贴，而不是从头开始。以下示例样式，inputtext 和面板组件；
import { PrimeReactProvider } from "primereact/api";
export default function MyApp({ Component, pageProps }) {
//My Design System with Tailwind
const MyDesignSystem = {
inputtext: {
root: ({ props, context }) => ({
className: classNames(
'm-0',
'font-sans text-gray-600 dark:text-white/80 bg-white dark:bg-gray-900 border border-gray-300 dark:border-blue-900/40 transition-colors duration-200 appearance-none rounded-lg',
{
'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]': !context.disabled,
'opacity-60 select-none pointer-events-none cursor-default': context.disabled
},
{
'text-lg px-4 py-4': props.size == 'large',
'text-xs px-2 py-2': props.size == 'small',
'p-3 text-base': props.size == null
}
)
})
},
panel: {
header: ({ props }) => ({
className: classNames(
'flex items-center justify-between', // flex and alignments
'border border-gray-300 bg-gray-100 text-gray-700 rounded-tl-lg rounded-tr-lg', // borders and colors
'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80', // Dark mode
{ 'p-5': !props.toggleable, 'py-3 px-5': props.toggleable } // condition
)
}),
title: 'leading-none font-bold',
toggler: {
className: classNames(
'inline-flex items-center justify-center overflow-hidden relative no-underline', // alignments
'w-8 h-8 text-gray-600 border-0 bg-transparent rounded-full transition duration-200 ease-in-out', // widths, borders, and transitions
'hover:text-gray-900 hover:border-transparent hover:bg-gray-200 dark:hover:text-white/80 dark:hover:bg-gray-800/80 dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]', // hover
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]' // focus
)
},
togglerIcon: 'inline-block',
content: {
className: classNames(
'p-5 border border-gray-300 bg-white text-gray-700 border-t-0 last:rounded-br-lg last:rounded-bl-lg',
'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80' // Dark mode
)
},
transition: TRANSITIONS.toggleable
}
};
return (
<PrimeReactProvider value={{ unstyled: true, pt: MyDesignSystem }}>
<Component {...pageProps} />
</PrimeReactProvider>
);
}
瞧 💙，您现在有 90 多个很棒的 React UI 组件，这些组件使用 Tailwind 设置了样式，并且可以与您应用程序的其余部分和谐地工作。现在是时候对其进行自定义，以使用 Tailwind 引入您自己的样式。
此示例介绍了如何启用基于默认 Tailwind 的 PrimeOne Design 实现和自定义选项