Tailwind CSSの便利な使い方、レイアウトやUIコンポーネント用のスタイルシートが簡単にまとめて利用できる

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

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

Tailwind CSS
Tailwind CSS -GitHub

• Tailwind CSSの特徴
• Tailwind CSSの使い方
• Tailwind CSSで用意されているスタイル
• Tailwind CSSの実装例

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ファイルがベースになっています。

• preflight.css
  normalize.cssと同じ。
  preflight.css
• utilities.css
  さまざまなユーティリティのスタイルが記述されたCSSファイル。
  utilities.css

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

• tailwind.css
  tailwind.css
  tailwind.min.css

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

• Installation -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の実装例: フォーム