同じUIコンポーネントをCSSで静的に、Vue.jsやプレーンのJavaScriptで動的に実装する -Tailwind Starter Kit
Post on:2020年1月20日
sponsors
最近のWebページやスマホアプリのUIでよく使用されるさまざまなコンポーネントをCSSで静的に、Vue.jsやReact.jsやプレーンのJavaScriptで動的に実装するためのコードをまとめたTailwind Starter Kitを紹介します。
CSSは分かるけど、Vue.jsやReact.jsは苦手という人にもよいと思います。
Tailwind Starter Kit
Tailwind Starter Kit -GitHub
Tailwind Starter Kitの特徴
Tailwind Starter Kitは、WebページやスマホアプリのUIに使用するさまざまな静的・動的コンポーネントをTailwindCSSを使って簡単に実装できます。
MITライセンスで、商用のプロジェクトでも無料で利用できます。
TailwindCSSについては、以前の記事をご覧ください。
Tailwind Starter Kitには、CSSとJavaScriptで実装されたコンポーネントがあります。CSSによる静的コンポーネントではすべてのUI要素がコンポーネントとして組み込まれており、すべてのコンポーネントに互換性もあります。
CSSによる要素は、120種類以上
また、React、Vue、Angular用の動的コンポーネントも備えています。同じUIのコンポーネントをそれぞれのライブラリで実装できます。
React、Vue、Angularで同じコンポーネントを動的に
Tailwind Starter Kitのデモ
一般的に使用されるWebページでのデモが用意されています。
Tailwind Starter Kitの使い方
Tailwind Starter Kitの使い方は、ドキュメントページが用意されています。
tailwind.cssを外部ファイルとして記述するだけで、利用できます。
各UIコンポーネントの実装方法は、ドキュメントをご覧ください。
同じコンポーネントで、CSSのみ、Vue.js、React.js、Angular、プレーンのJavaScriptを使用した実装方法が解説されています。
sponsors
