kimia UI

Tailwind CSS 3で構築されたReactのUIコンポーネント

なぜこのアプローチ？

Tailwind CSSは、カスタムユーザーインターフェイスを迅速に構築するためのユーティリティファーストCSSフレームワークです。 ILでは、HTMLを離れることなくスタイルを書くことができます。

Tailwind CSSの最大の欠点は、コードを十分に読み取らないようにするクラスが長すぎるリスクです。

Reactはコンポーネントベースであるため、コンポーネントロジックをクラスで抽出し、他の場所で再利用でき、より多くのコンポーネントとより少ないクラスを備えたより読みやすいコードが得られます。

そのため、UIコンポーネントのこのコレクションを完全にカスタマイズできるコレクションを作成しました。使用するコンポーネントをコピーして貼り付けるだけです

すべてのコンポーネントはパッケージディレクトリにあります。

各コンポーネントには2つのサブディレクトリが含まれています

• 例：Typentscriptのコンポーネントの各バリアントの例が含まれています

• スニペット：Plaine Reactのコンポーネントの各バリアントの例が含まれています

？新しいコンポーネントを追加します

新しいコンポーネントを追加するには：

フォルダ内で、 src/packages/{yourcomponentName}で新しいディレクトリを作成すると、2つのサブフォルダーと1つのファイルが作成されます

• 例：TypeNACTScript **のコンポーネントの例が含まれます
• スニペット：Plane Reactに例が含まれ、コードスニペットとして使用してコピーします
• {コンポーネント名} .tsxにはコンポーネントのロジックが含まれます

src/pages/components/{コンポーネント名}で新しいファイル（ルート）を作成します。次に、コンポーネントのすべての例とスニペットをインポートします

ブラウザのサポート

これらのコンポーネントは、すべてのブラウザと互換性があります

クロム	Firefox	角	サファリ	オペラ

貢献

プロジェクトに貢献したい場合、バグの修正、アクセシビリティの改善、または問題を開きたい場合は、貢献ガイドに従ってください

まず、開発サーバーを実行します。

npm run dev
# or
yarn dev

http：// localhost：3000を開き、ブラウザを使用して結果を確認します。