Tailwind CSSの入門に! コピペで簡単に実装できるUIコンポーネントとページレイアウトのまとめ -Preline UI
Post on:2022年6月16日
Webサイトでよく使用されるさまざまなUIコンポーネントとページレイアウトをTailwind CSSで実装したコンポーネント集を紹介します。
Tailwind CSSをこれから始めるという人にも簡単で、デフォルト構成のまま機能し、各UIコンポーネントとページレイアウトはHTMLをコピペするだけで簡単に実装できます。
![Tailwind CSSの入門に! コピペで簡単に実装できるUIコンポーネントとページレイアウト集 -Preline UI](http://coliss.com/wp-content/uploads-202202/2022061601@2x.png)
他にも、Tailwind CSSで実装されたUIコンポーネントを探している人は下記もご覧ください。
Preline UIの特徴
Preline UIは、ユーティリティファーストのTailwind CSSで実装されたUIコンポーネントとページレイアウトのセットです。
MITライセンスのオープンソースで、商用プロジェクトでも無料で使用できます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202202/2022061602-00.png)
UIコンポーネントは250種類以上が揃っており、カード、ボタン、ドロップダウン、ナビゲーションバー、モーダル、フォームなど、シンプルなデザインで実装されています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202202/2022061602-01.png)
各UIコンポーネントは、実装の動作とコピペで利用できるコードが用意されています。バリエーションも豊富で、アコーディオンだとベーシック・入れ子・アローあり・アローなし・ボーダーあり・ボーダーなしなどが揃っています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202202/2022061602-02.gif)
Tailwind CSSで実装されたページレイアウトやさまざまなナビゲーションもたくさんあります。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202202/2022061602-03.png)
コンテンツが揃ったレイアウトではなく、汎用性のあるレイアウトになっています。たとえば、コンテンツが少なくても下部にくっつくスティッキーのフッターなどです。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202202/2022061602-04.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202202/2022061602-04.png)
Preline UIのUIコンポーネントとページレイアウト
Preline UIのUIコンポーネントとページレイアウトの一部だけになりますが、下記が揃っています。
![Preline UIのUIコンポーネント](http://coliss.com/wp-content/uploads-202202/2022061603-01.png)
![Preline UIのUIコンポーネント](http://coliss.com/wp-content/uploads-202202/2022061603-01.png)
Preline UIのUIコンポーネント
![Preline UIのUIコンポーネント](http://coliss.com/wp-content/uploads-202202/2022061603-02.png)
![Preline UIのUIコンポーネント](http://coliss.com/wp-content/uploads-202202/2022061603-02.png)
Preline UIのUIコンポーネント
![Preline UIのページレイアウト](http://coliss.com/wp-content/uploads-202202/2022061603-03.png)
![Preline UIのページレイアウト](http://coliss.com/wp-content/uploads-202202/2022061603-03.png)
Preline UIのページレイアウト
Preline UIの使い方
Step 1: インストール
npm経由でインストールできます。
1 |
npm i preline |
prelineUIをプラグインとしてtailwind.config.jsファイルに含めます。
1 2 3 4 5 |
module.exports = { plugins: [ require('preline/plugin') ] } |
HTMLには、外部ファイルを記述します。
1 |
<script src="./node_modules/preline/dist/hs-ui.bundle.js"></script> |
あとは、各UIコンポーネントやレイアウトのHTMLをコピペするだけです。
詳しくは、ドキュメントをご覧ください。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202202/2022061602-03.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202202/2022061602-03.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202202/2022061602-03.png)
sponsors