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