再利用しやすく構造化されたコンポーネントシステムを提供するTailwind向けフレームワーク・「Hummingbird」

Ads

Hummingbird

再利用しやすく構造化されたコンポーネントシステムを提供するTailwind向けフレームワーク・「Hummingbird」

Hummingbirdは再利用しやすく構造化されたコンポーネントシステムを提供するTailwind向けフレームワークです。Tailwindを使ったスケーラブルなWebアプリケーションの構築を意識してデザインされています。

各コンポーネントはTailwindのユーティリティで事前構築されており、拡張しやすいだけでなく、少ないclassで済むため管理しやすい上にTailwindの利便性も維持されています。

例えばボタンなら以下のように書けば済みます。

<button class="btn">ボタンだよ</button>

外観を変える時も簡単です。

<button class="btn btn-outline-success rounded-full">グリーンの線でデザインした角丸なボタンだよ</button>

このようなUIコンポーネントは、前述したようにWebアプリ構築のために他にも多く用意されており、より効率的にTailwindによるデザインが可能です。

Tailwindは便利ですが、classが長くなりがちでHTMLもごちゃごちゃしやすく、UIの統一感を保つのに苦労する悩みが出やすいですが、Hummingbirdはこれを解決しうるものとして考案されました。

また、ReactやNext.jsなど特定のフレームワークに依存せず、VueやAngular、Svelteなど様々な環境で利用できるので利用するフレームワークを乗り換えてもそのまま利用できるそうです。

HummingbirdGithub