[CSS]便利なのが登場!レイアウトやUIコンポーネント用のスタイルシートが簡単にまとめて利用できる -Tailwind CSS

既存のページに外部CSSを加えるだけで、最近のWebサイトやブログで見かけるさまざまなコンポーネントやエレメント、Flexboxベースの柔軟なレイアウトをカスタマイズできるスタイルをまとめたCSSのフレームワークを紹介します。

Flexboxを使ってみたい、天地の中央に配置したい、シャドウを加えたい、レスポンシブ対応のナビゲーションを備えたいなど、簡単に利用できます。
デザインにも幅広く対応しているので、自分のオリジナルのデザインで利用できます。

サイトのキャプチャ

Tailwind CSS
Tailwind CSS -GitHub

Tailwind CSSの特徴

Tailwind CSSはMITライセンスで、個人でも商用でも無料で利用できます。
ボタン、フォーム、カード、ナビゲーションバーなど、Webサイトやブログで使用されるUIコンポーネントをカスタマイズするためのユーティリティとなるclassを提供するフレームワークです。
Bootstrap、Foundation、Bulmaなどとは異なり、UIキットではありません。

サイトのキャプチャ
ユーティリティ ファースト
このカードコンポーネントはTailwind CSSのユーティリティとなるclassを使って実装されたもので、他のスタイルシートは必要ありません。
サイトのキャプチャ
コンポーネント フレンドリー
コンポーネントを作成したユーティリティのclassは、それらをまとめて更新・管理することもでき、コンポーネント用のスタイルとして利用できます。
サイトのキャプチャ
レスポンシブに完全対応
Tailwind CSSで使用するユーティリティのclassはすべて、レスポンシブ対応です。HTMLに手を加えることなく、レスポンシブ対応のインターフェイスを実装できます。
サイトのキャプチャ
カスタマイズされたデザイン
Tailwind CSSはデザインのカスタマイズにも対応しています。
カラー、ボーダー、フォント、スペース、ブレイクポイント、シャドウ、トーンなど、自分のデザインにあわせてカスタマイズできます。カスタマイズする時は、TailwindはPostCSSで記述されているため、JavaScriptを最大限に活用できます。

Tailwind CSSの使い方

Tailwindは、2つのCSSファイルがベースになっています。

上記のCSSファイルから構成されたものが、tailwind.cssです。

詳しくは、下記をご覧ください。

Tailwind CSSで用意されているスタイル

ユーティリティのclassには、WebサイトやブログのUIで使用するflexboxやfloatなどのレイアウトをはじめ、マージン、オーバーフロー、中央配置、背景、ボーダー、角丸、コンテナ、リスト、フォーム、不透明度、シャドウなどさまざまなスタイルが用意されています。

サイトのキャプチャ

用意されているスタイル: Background

サイトのキャプチャ

用意されているスタイル: Flexbox

サイトのキャプチャ

用意されているスタイル: Form

サイトのキャプチャ

用意されているスタイル: Grid

サイトのキャプチャ

用意されているスタイル: Shadow

サイトのキャプチャ

用意されているスタイル: Spacing

サイトのキャプチャ

用意されているスタイル: Vertical Alignment

Tailwind CSSの実装例

ユーティリティとして利用するだけでなく組み合わせて、UIコンポーネントとしても利用できます。

サイトのキャプチャ

Tailwind CSSの実装例: アラート

サイトのキャプチャ

Tailwind CSSの実装例: ボタン

サイトのキャプチャ

Tailwind CSSの実装例: カード

サイトのキャプチャ

Tailwind CSSの実装例: ナビゲーション

サイトのキャプチャ

Tailwind CSSの実装例: フォーム

top of page

©2017 coliss