rewindui
@rewind-ui
ReactおよびTailwind CSSで使用するために特別に構築されたRewind-UIは、あらゆるReactプロジェクトに簡単に統合できるアクセス可能で高度にカスタマイズ可能なコンポーネントを提供します。 Rewind-UIには、Tailwind CSSクラスを使用して簡単にカスタマイズできるデフォルトスタイルのセットが付属しています。さらに、各コンポーネントは、コンポーネントのデフォルトスタイルを変更するために使用できる一連の小道具を使用してパラメーター化できます。
Rewind-UIはNPMパッケージとして利用でき、次のコマンドを使用してインストールできます。
npm install @rewind-ui/coreRewind-UIは、ReactおよびTailwind CSSで使用するように設計されています。 Rewind-UIを使用するには、プロジェクトに最初にReactJとTailwind CSSをインストールする必要があります。さらに、次のNPMパッケージもインストールする必要があります。
npm install tailwind-scrollbar @tailwindcss/forms @tailwindcss/typography Tailwind CSSをインストールした後、Rewind-UIで動作するように構成する必要があります。これを行うには、最初にプロジェクトのルートディレクトリにtailwind.config.jsファイルを作成する必要があります。次に、次のコードをその構成ファイルに追加します。
肥大化したCSSファイルを持たないように、必要なスタイルファイルのみを追加することを強くお勧めします
module . exports = {
content : [
'./src/**/*.{html,jsx,tsx}' ,
// you can either add all styles
'./node_modules/@rewind-ui/core/dist/theme/styles/*.js' ,
// OR you can add only the styles you need
'./node_modules/@rewind-ui/core/dist/theme/styles/Button.styles.js' ,
'./node_modules/@rewind-ui/core/dist/theme/styles/Text.styles.js'
] ,
plugins : [
require ( '@tailwindcss/typography' ) ,
require ( 'tailwind-scrollbar' ) ( { nocompatible : true } ) ,
require ( '@tailwindcss/forms' ) ( {
strategy : 'class' // only generate classes
} )
]
} ;Rewind-UIコンポーネントの使用を開始するには、Reactコンポーネントの上部に次のインポートステートメントを追加するだけです。
import { Button } from '@rewind-ui/core' ;次に、JSXコードでコンポーネントを使用できます。
< Button > Click Me </ Button >各コンポーネントには、対応するプロップを使用してパラメーター化できるデフォルトスタイルのセットがあります。たとえば、 Buttonコンポーネントにはデフォルトの青色と中サイズがあります。これらの値は、 colorとsize小道具をコンポーネントに設定することで変更できます。
< Button color = "black" size = "sm" > Click Me </ Button >さらに、コンポーネントのスタイルは、通常のclassNameプロップを渡すことでカスタマイズできます。この小道具は、コンポーネントのデフォルトスタイルをオーバーライドするために使用できます。たとえば、次のコードでは、ボタンのフォント重量を半溶接に変更します。
Rewind-UIは、Tailwind-Mergeを使用して、デフォルトのクラスをclassNameプロップで提供するクラスとマージし、可能な競合を解決しています。
< Button color = "black" size = "sm" className = "font-semibold" > Click Me </ Button >ユーザーにvariantのプロパティを何度も使用させないようにしようとしています。バリアントは、基本的に、コンポーネントのカスタマイズに使用できるプロパティの事前定義されたセットです。たとえば、 Buttonコンポーネントには、ブートストラップのような成功ボタンを作成するために使用できるsuccessバリアントがあります。
< Button variant = "success" > Click Me </ Button >各コンポーネントのバリエーションの詳細については、対応するドキュメントページをご覧ください。
すべてのRewind-UIコンポーネントは高度にカスタマイズ可能です。これは、対応するTailwind CSSクラスをオーバーライドすることにより、コンポーネントのデフォルトスタイルを簡単に変更できることを意味します。テーマページでスタイルのカスタマイズの詳細を読むことができます。
次の人々に特別な感謝：
次のチームに感謝します：
