シンプルで直感的なclassの軽量なTailwind.cssコンポーネントライブラリ・「NiraUI」

Ads

NiraUI

シンプルで直感的なclassの軽量なTailwind.cssコンポーネントライブラリ・「NiraUI」

NiraUIはシンプルで直感的なclassの軽量なTailwind.cssコンポーネントライブラリです。RWD対応且つクリーンなUIをクリーンなコードで数分で設計可能との事です。

特に、事前構築により、人が見て分かりやすいclassで運用できるのが最大のメリットで、例えばボタンを用意するのにTailwindだけの場合、

<button class="inline-block cursor-pointer rounded-md bg-sky-800 px-4 py-3 text-center text-sm font-semibold uppercase text-white transition duration-200 ease-in-out hover:bg-sky-900">
  Button
</button>

となるボタンがTailwind + NiraUIだと

<button class="button">Button</button>

で済むようになる、といったものになります。

もちろん、従来のユーティリティクラスでも制御可能です。

<button class="button w-64 rounded-full">Button</button>

NiraUI

Ads

Tailwindは様々なシーンで柔軟に対応できる一方、大量のclassを用いる事になりますが、そもそも1つのプロジェクトで柔軟な対応ができるものを使う必要はありません。例えとして適切か分かりませんが、最近は住居建築も事前に設計した階層をブロックのように積み重ねて繋ぎ合わせ、細かな部分を現場で作業するのを見かけますよね。従来は全て現場で作業していたため、現場は乱雑になりがちでした。

事前にある程度設計しておくことで見にくいclassを排除してヒューマンフレンドリーなコードを提供するのがNiraUI、という感じです。NiraUIで事前にデザインされており、これを併用する事でシンプルなコードで運用できますし、カスタマイズも可能、テーマも用意されています。ドキュメントが動作サンプルと合わせて用意されているのでTailwindのclassで困っている方は是非チェックしてみてください。

NiraUI