Tailwind CSS

Tailwind CSSは、ユーティリティファーストの人気のCSSライブラリであり、選択したデザインシステムでUIスイート全体をスキンするために、スタイルなしモードに最適です。

CSSレイヤー#

Tailwind CSSは、PrimeReactのスタイル付きモードまたはスタイルなしモードで使用できます。どちらの場合も、preflightモードではコア機能のスタイルが壊れる可能性があるため、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 tailwind-base {
  @tailwind base;
}

@layer tailwind-utilities {
  @tailwind components;
  @tailwind utilities;
}
 

スタイルなしモード#

スタイルなしモードでは、PrimeReactの排他的なTailwind統合は、UIコンポーネントライブラリの利便性とTailwindの柔軟性を求める開発者にとって最適な選択肢です。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オプションを有効にし、次のセクションでTailwindでスタイルを設定できるように、空のptを追加します。この段階でアプリケーションを実行すると、コンポーネントの機能とアクセシビリティは引き続き機能しますが、スタイルがないためすべてが透過的になることに注意してください。


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オプション：tailwind-mergeを介してclassNameの競合を解決するために、classNameMergeFunctionをtwMergeとして指定します。これにより、グローバルパススルーで指定されたclassNameが、アプリケーションでパススルーを介して指定されたclassNameを上書きするのを防ぎます。


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>
    );
}
 
 

さあ💙、これでアプリケーションの残りの部分と調和して動作するTailwindでスタイル設定された90以上の素晴らしいReact UIコンポーネントができました。Tailwindで独自のスタイルを取り入れるためにカスタマイズする時間です。

例#

この例では、デフォルトのTailwindベースのPrimeOne Designの実装とカスタマイズオプションを有効にする方法について説明します。

        PrimeReact 10.8.3 by PrimeTek