Tailwind CSSの入門に! コピペで簡単に実装できるUIコンポーネントとページレイアウトのまとめ -Preline UI

Webサイトでよく使用されるさまざまなUIコンポーネントとページレイアウトをTailwind CSSで実装したコンポーネント集を紹介します。

Tailwind CSSをこれから始めるという人にも簡単で、デフォルト構成のまま機能し、各UIコンポーネントとページレイアウトはHTMLをコピペするだけで簡単に実装できます。

Tailwind CSSの入門に! コピペで簡単に実装できるUIコンポーネントとページレイアウト集 -Preline UI

Preline UI
Preline UI -GitHub

他にも、Tailwind CSSで実装されたUIコンポーネントを探している人は下記もご覧ください。

Preline UIの特徴

Preline UIは、ユーティリティファーストのTailwind CSSで実装されたUIコンポーネントとページレイアウトのセットです。

MITライセンスのオープンソースで、商用プロジェクトでも無料で使用できます。

サイトのキャプチャ

Preline UI

UIコンポーネントは250種類以上が揃っており、カード、ボタン、ドロップダウン、ナビゲーションバー、モーダル、フォームなど、シンプルなデザインで実装されています。

サイトのキャプチャ

UIコンポーネントの一覧 -Preline UI

各UIコンポーネントは、実装の動作とコピペで利用できるコードが用意されています。バリエーションも豊富で、アコーディオンだとベーシック・入れ子・アローあり・アローなし・ボーダーあり・ボーダーなしなどが揃っています。

サイトのキャプチャ

アコーディオン -Preline UI

Tailwind CSSで実装されたページレイアウトやさまざまなナビゲーションもたくさんあります。

サイトのキャプチャ

ページレイアウトの一覧 -Preline UI

コンテンツが揃ったレイアウトではなく、汎用性のあるレイアウトになっています。たとえば、コンテンツが少なくても下部にくっつくスティッキーのフッターなどです。

サイトのキャプチャ

Sticky Footer & Header

Preline UIのUIコンポーネントとページレイアウト

Preline UIのUIコンポーネントとページレイアウトの一部だけになりますが、下記が揃っています。

Preline UIのUIコンポーネント

Preline UIのUIコンポーネント

Preline UIのUIコンポーネント

Preline UIのUIコンポーネント

Preline UIのページレイアウト

Preline UIのページレイアウト

Preline UIの使い方

Step 1: インストール

npm経由でインストールできます。

prelineUIをプラグインとしてtailwind.config.jsファイルに含めます。

HTMLには、外部ファイルを記述します。

あとは、各UIコンポーネントやレイアウトのHTMLをコピペするだけです。

詳しくは、ドキュメントをご覧ください。

サイトのキャプチャ

Document -Preline UI

sponsors

top of page

©2022 coliss