個人的おすすめなTailwind CSS系のUI

はじめに

この記事は、個人的にUIがおしゃれで使いやすいかつTailwind CSSをベースに作られたUIキットをいくつか紹介していきます。いい感じのものがあれば随時追加していきたいと思います。
有料版のものも紹介していますが、日本円換算は2023/11/13 現在の相場です。円安って怖いですねぇ...すんごいお高くなっています。

完全に個人の好みで選定したものですのでこのUI入ってないぞというのがあると思いますがご了承ください。

また、TailwindベースのUIキットの一覧は次のリンクから見ることができますので紹介していないものを含め是非参考にしてみてください。

Daisy UI

Tailwind CSS系のUIの中でもモダンなコンポーネントがたくさんあり、Tailwind CSSのクラスを使わずともDaisy UI独自のクラスだけでおしゃれなサイトが構築できそうな気がしました。難点として、レスポンシブ対応が大変でDrawerを使う際にチェックボックスで状態が管理されているため実装が若干大変だったので気合で頑張るしかないです...

Myna UI

追加のJSファイルを使わずともおしゃれなコンポーネント例が用意されています(一部コンポーネントは、tailwind form 等が必要)。量はそこまで多くないですが、簡単なWebアプリを作るぐらいであれば重宝する気がします。

Meraki UI

一部コンポーネントでJSファイルが必要になりますが、上二つにはないおしゃれなボタンやログインフォーム、サイドバーやナビゲーションバーなどが構築できます。量も多くほとんど無料で扱えるので足りなかったらこれ入れろと言わんばかりにおススメです。

Flowrift

他と比べて、コンポーネントごとではなくテンプレートごと用意されているものです。例えば、ヒーローセクションが欲しいなとなったときにこのサイトのHeroページを使えば簡単に作ることができます。

TailGrids

Flowriftに比べてモダンなテンプレートが多いイメージがあるサイトです。モダンなものが多い分各項目1個しか無料のものが提供されておらず、すべて使いたい場合は有料版($199 大体18020円ぐらい?)で買い切りです。

Tailwind Stamps

Bootstrapに近いコンポーネントキットです。Bootstrapに似たデザインでTailwindのクラスを自由自在に扱いたい場合はおススメだと思います。また、チェックボックスがブラウザデフォルトのものだったのでチェックボックスを使う場合は注意かもです。

Flowbite

TailwindのUI探しに困ったらとりあえずこれを使えばいいというぐらい多種多様なコンポーネントが揃っています。有料版も$269(日本円で約40774円ぐらい?)で提供されていますが、正直無料版だけで事足りてしまうと思います。

Tail-kit

コンポーネントとテンプレートどっちも無料で用意されているサイトで、特にダッシュボード関連のものを作りたい方には重宝するようなコンポーネントやテンプレートが用意されています。

(番外編)Tailwind UI

Tailwindの開発元が出しているUIキットでどれも見た目が美しい一方ですべて有料のため、ある程度お金に余裕があるのであればこれを買うのがおすすめだと思います。オールアクセスverで$299(日本円で約45277円?)と一番お高いですが試してみる価値はありそうです。