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