Tailwind CSSの入門に！ コピペで簡単に実装できるUIコンポーネントとページレイアウトのまとめ -Preline UI
Post on:2022年6月16日
sponsors
Webサイトでよく使用されるさまざまなUIコンポーネントとページレイアウトをTailwind CSSで実装したコンポーネント集を紹介します。
Tailwind CSSをこれから始めるという人にも簡単で、デフォルト構成のまま機能し、各UIコンポーネントとページレイアウトはHTMLをコピペするだけで簡単に実装できます。
他にも、Tailwind CSSで実装されたUIコンポーネントを探している人は下記もご覧ください。
Preline UIの特徴
Preline UIは、ユーティリティファーストのTailwind CSSで実装されたUIコンポーネントとページレイアウトのセットです。
MITライセンスのオープンソースで、商用プロジェクトでも無料で使用できます。
UIコンポーネントは250種類以上が揃っており、カード、ボタン、ドロップダウン、ナビゲーションバー、モーダル、フォームなど、シンプルなデザインで実装されています。
各UIコンポーネントは、実装の動作とコピペで利用できるコードが用意されています。バリエーションも豊富で、アコーディオンだとベーシック・入れ子・アローあり・アローなし・ボーダーあり・ボーダーなしなどが揃っています。
Tailwind CSSで実装されたページレイアウトやさまざまなナビゲーションもたくさんあります。
コンテンツが揃ったレイアウトではなく、汎用性のあるレイアウトになっています。たとえば、コンテンツが少なくても下部にくっつくスティッキーのフッターなどです。
Preline UIのUIコンポーネントとページレイアウト
Preline UIのUIコンポーネントとページレイアウトの一部だけになりますが、下記が揃っています。
Preline UIのUIコンポーネント
Preline UIのUIコンポーネント
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をコピペするだけです。
詳しくは、ドキュメントをご覧ください。
sponsors
