Pines
PinesはAlpine.jsとTailwin.cssの為のオープンソースUIライブラリです。両方を使用しているプロジェクトにコピペで導入できるUIを提供しています。
AlpineとTailwindを併用することで、開発者は最小限の労力で、再利用可能で機能的なUI要素を構築できる、という考えで自社のプロジェクトに今まで使用しながら作り続けていたUI要素を微調整してOSSとして公開したそうで、アニメーション、スライダー、ツールチップ、アコーディオン、モーダルなどの実践導入済みのUIが提供されています。
Alpineディレクティブを機能に、Tailwindユーティリティクラスをデザインに使用することで、HTMLのみを使用して機能的なUIを作成出来ます。尚、AlpineとTailwindの併用コンポーネントの他に、Tailwindだけで動作するUIも一緒に提供されているので組み合わせて利用すればより効率的になりそうです。
前述しました通り、利用にあたり特に他のCSSやJSの追加は不要で、Alpine.jsとTailwin.cssが読み込まれていれば動作します。
<script src="//unpkg.com/alpinejs" defer></script> <script src="https://cdn.tailwindcss.com"></script>
あとはPinesで提供されているコードをコピー、ペーストすれば上サンプルのように動作します。
導入のしやすさはもちろんですが、実践導入されてきただけあって既に完成されたUIという印象でした。
コンポーネントはそれなりの数が用意されているのでこれから開発にあたろうとしていた方には結構な時短になるんじゃないかなと思います。