同じUIコンポーネントをCSSで静的に、Vue.jsやプレーンのJavaScriptで動的に実装する -Tailwind Starter Kit

最近の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の特徴

Tailwind Starter Kitには、CSSとJavaScriptで実装されたコンポーネントがあります。CSSによる静的コンポーネントではすべてのUI要素がコンポーネントとして組み込まれており、すべてのコンポーネントに互換性もあります。

Tailwind Starter Kitの特徴

CSSによる要素は、120種類以上

また、React、Vue、Angular用の動的コンポーネントも備えています。同じUIのコンポーネントをそれぞれのライブラリで実装できます。

Tailwind Starter Kitの特徴

React、Vue、Angularで同じコンポーネントを動的に

Tailwind Starter Kitのデモ

一般的に使用されるWebページでのデモが用意されています。

Tailwind Starter Kitのデモ

デモ: ランディングページ

Tailwind Starter Kitのデモ

デモ: プロフィールページ

Tailwind Starter Kitのデモ

デモ: ログインページ

Tailwind Starter Kitのデモ

デモ: ダッシュボードページ

Tailwind Starter Kitの使い方

Tailwind Starter Kitの使い方は、ドキュメントページが用意されています。
tailwind.cssを外部ファイルとして記述するだけで、利用できます。

サイトのキャプチャ

Docs -Tailwind Starter Kit

各UIコンポーネントの実装方法は、ドキュメントをご覧ください。
同じコンポーネントで、CSSのみ、Vue.js、React.js、Angular、プレーンのJavaScriptを使用した実装方法が解説されています。

サイトのキャプチャ

CSSコンポーネント: Alerts

サイトのキャプチャ

Vue.jsコンポーネント: Alerts

サイトのキャプチャ

React.jsコンポーネント: Alerts

サイトのキャプチャ

Angularコンポーネント: Alerts

サイトのキャプチャ

JavaScriptコンポーネント: Alerts

sponsors

top of page

©2021 coliss