Tailwind CSSで実装されたUIコンポーネント・ページテンプレート、商用プロジェクトで無料のものをまとめました

Tailwind CSSで実装されたWebページやスマホアプリ用のUIコンポーネント・レイアウト・ページテンプレートを紹介します。

公式のUIコンポーネント（Tailwind UI）は有料だったり、他にも有料のものが多数ありますが、オープンソースで利用できるものもたくさんあります。

ここで紹介しているものは全て商用プロジェクトでも無料で利用できます。また、Tailwind CSSの実装で役立つチートシートやVS Codeの機能拡張も紹介します。

Supabase UI
Supabase UI -GitHub

Webアプリやスマホアプリを素早く、効率的に実装することに重点をおいたハイレベルのUIコンポーネントのライブラリ。Tailwind CSSのユーティリティクラスで実装するように設計されています。
MITライセンス

Tail-Kit
Tail-Kit -GitHub

Tailwind CSS 2.0に対応した、250種類以上のUIコンポーネントを備えたオープンソースのライブラリ。Tailwind CSSのCSSを変更したり、追加したりすることなく、そのまま利用できます。
MITライセンス

Tailblocks
Tailblocks -GitHub

さまざまなプロジェクトで利用できるUIコンポーネントのブロックを簡単に実装できるライブラリ。追加する依存関係なく、独自のプロジェクトにコピペで簡単に利用できるHTMLを提供します。
MITライセンス

wickedblocks

ヘッダやフッタ、ナビゲーション、グリッド、フォーム、ギャラリーなど、Tailwind CSSで構築されたレイアウトとコンポーネントのコレクション。

Lofi UI

WebページやスマホアプリのさまざまなUIコンポーネントをTailwind CSSで実装した再利用可能なライブラリ。デザインはシンプルで、独自のスタイルを追加して構築してください。

Meraki UI
Meraki UI -GitHub

FlexboxとCSS Gridに基づいて完全にレスポンシブ対応な美しいデザインのTailwind CSSコンポーネント。HeroiconsのアイコンやUnsplashの画像が使用されており、実装のイメージが簡単につかめます。
MITライセンス

Kometa UI Kit

Tailwind　CSSで構築された130以上のUIコンポーネント集。すべてのコンポーネントはレスポンシブ対応で、HTML、VueJS、Reactで利用できます。
独自ライセンスで、無制限の個人および商用プロジェクトで使用することができます。

Daisy UI
Daisy UI -GitHub

Tailwind CSSにコンポーネント用のクラスを追加するライブラリ。ボタンやカードを実装する時に数多くのユーティリティクラスを扱わずに実装できます。
MITライセンス

Vue-Tailwind
Vue-Tailwind -GitHub

アプリ独自のデザインに適応するようにカスタマイズするために作成されたVueコンポーネントのセット。コンポーネントは、ライブラリのインポート時に定義されたカスタムCSSクラスと無制限のバリアントを使用してカスタマイズするように設計されています。

Treact

Tailwind CSSとReactを使用してランディングページを実装するためのレスポンシブ対応なUIコンポーネント。すべてのコンポーネントはモジュール式で、簡単にカスタマイズが可能です。
独自ライセンスで、無制限の個人および商用プロジェクトで使用することができます。

Tailwind Starter Kit
Tailwind Starter Kit -GitHub

Tailwind CSSのスターターキット。Tailwind CSSのCSSを変更したり、CSSを追加したりすることはありません。複数のHTML要素を備えており、ReactJS、Vue、Angularの動的コンポーネントが付属しています。
MITライセンス

Tailwind CSS Page Creator

Tailwind CSS用に構築された150種類以上のコンポーネントをドラッグアンドドロップして、ページを生成できます。要登録（無料）。

Tailwind Cheat Sheet

Tailwind CSSのクラス名とスタイルが分かるチートシート。

Tailwind CSS IntelliSense

VS Codeを使用している人は、チートシートよりこちらの方が楽かも。