Tailwind CSSで実装されたUIコンポーネント・ページテンプレート、商用プロジェクトで無料のものをまとめました
Post on:2021年4月19日
sponsors
Tailwind CSSで実装されたWebページやスマホアプリ用のUIコンポーネント・レイアウト・ページテンプレートを紹介します。
公式のUIコンポーネント（Tailwind UI）は有料だったり、他にも有料のものが多数ありますが、オープンソースで利用できるものもたくさんあります。
ここで紹介しているものは全て商用プロジェクトでも無料で利用できます。また、Tailwind CSSの実装で役立つチートシートやVS Codeの機能拡張も紹介します。
Supabase UI
Supabase UI -GitHub
Webアプリやスマホアプリを素早く、効率的に実装することに重点をおいたハイレベルのUIコンポーネントのライブラリ。Tailwind CSSのユーティリティクラスで実装するように設計されています。
MITライセンス
Tailwind CSS 2.0に対応した、250種類以上のUIコンポーネントを備えたオープンソースのライブラリ。Tailwind CSSのCSSを変更したり、追加したりすることなく、そのまま利用できます。
MITライセンス
さまざまなプロジェクトで利用できるUIコンポーネントのブロックを簡単に実装できるライブラリ。追加する依存関係なく、独自のプロジェクトにコピペで簡単に利用できるHTMLを提供します。
MITライセンス
ヘッダやフッタ、ナビゲーション、グリッド、フォーム、ギャラリーなど、Tailwind CSSで構築されたレイアウトとコンポーネントのコレクション。
WebページやスマホアプリのさまざまなUIコンポーネントをTailwind CSSで実装した再利用可能なライブラリ。デザインはシンプルで、独自のスタイルを追加して構築してください。
FlexboxとCSS Gridに基づいて完全にレスポンシブ対応な美しいデザインのTailwind CSSコンポーネント。HeroiconsのアイコンやUnsplashの画像が使用されており、実装のイメージが簡単につかめます。
MITライセンス
Tailwind CSSで構築された130以上のUIコンポーネント集。すべてのコンポーネントはレスポンシブ対応で、HTML、VueJS、Reactで利用できます。
独自ライセンスで、無制限の個人および商用プロジェクトで使用することができます。
Tailwind CSSにコンポーネント用のクラスを追加するライブラリ。ボタンやカードを実装する時に数多くのユーティリティクラスを扱わずに実装できます。
MITライセンス
Vue-Tailwind
Vue-Tailwind -GitHub
アプリ独自のデザインに適応するようにカスタマイズするために作成されたVueコンポーネントのセット。コンポーネントは、ライブラリのインポート時に定義されたカスタムCSSクラスと無制限のバリアントを使用してカスタマイズするように設計されています。
Tailwind CSSとReactを使用してランディングページを実装するためのレスポンシブ対応なUIコンポーネント。すべてのコンポーネントはモジュール式で、簡単にカスタマイズが可能です。
独自ライセンスで、無制限の個人および商用プロジェクトで使用することができます。
Tailwind Starter Kit
Tailwind Starter Kit -GitHub
Tailwind CSSのスターターキット。Tailwind CSSのCSSを変更したり、CSSを追加したりすることはありません。複数のHTML要素を備えており、ReactJS、Vue、Angularの動的コンポーネントが付属しています。
MITライセンス
Tailwind CSS用に構築された150種類以上のコンポーネントをドラッグアンドドロップして、ページを生成できます。要登録（無料）。
Tailwind CSSのクラス名とスタイルが分かるチートシート。
VS Codeを使用している人は、チートシートよりこちらの方が楽かも。
sponsors
