Tailwind CSSの便利な使い方、レイアウトやUIコンポーネント用のスタイルシートが簡単にまとめて利用できる
Post on:2017年11月6日
既存のページに外部CSSを加えるだけで、最近のWebサイトやブログで見かけるさまざまなコンポーネントやエレメント、Flexboxベースの柔軟なレイアウトをカスタマイズできるスタイルをまとめたCSSのフレームワークを紹介します。
Flexboxを使ってみたい、天地の中央に配置したい、シャドウを加えたい、レスポンシブ対応のナビゲーションを備えたいなど、簡単に利用できます。
デザインにも幅広く対応しているので、自分のオリジナルのデザインで利用できます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201704/2017110601.png)
Tailwind CSS
Tailwind CSS -GitHub
Tailwind CSSの特徴
Tailwind CSSはMITライセンスで、個人でも商用でも無料で利用できます。
ボタン、フォーム、カード、ナビゲーションバーなど、Webサイトやブログで使用されるUIコンポーネントをカスタマイズするためのユーティリティとなるclassを提供するフレームワークです。
Bootstrap、Foundation、Bulmaなどとは異なり、UIキットではありません。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201704/2017110602-01.png)
- ユーティリティ ファースト
- このカードコンポーネントはTailwind CSSのユーティリティとなるclassを使って実装されたもので、他のスタイルシートは必要ありません。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201704/2017110602-02.png)
- コンポーネント フレンドリー
- コンポーネントを作成したユーティリティのclassは、それらをまとめて更新・管理することもでき、コンポーネント用のスタイルとして利用できます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201704/2017110602-03.png)
- レスポンシブに完全対応
- Tailwind CSSで使用するユーティリティのclassはすべて、レスポンシブ対応です。HTMLに手を加えることなく、レスポンシブ対応のインターフェイスを実装できます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201704/2017110602-04.png)
- カスタマイズされたデザイン
- 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
詳しくは、下記をご覧ください。
Tailwind CSSで用意されているスタイル
ユーティリティのclassには、WebサイトやブログのUIで使用するflexboxやfloatなどのレイアウトをはじめ、マージン、オーバーフロー、中央配置、背景、ボーダー、角丸、コンテナ、リスト、フォーム、不透明度、シャドウなどさまざまなスタイルが用意されています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201704/2017110603-01.png)
用意されているスタイル: Background
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201704/2017110603-06.png)
用意されているスタイル: Flexbox
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201704/2017110603-08.png)
用意されているスタイル: Form
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201704/2017110603-09.png)
用意されているスタイル: Grid
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201704/2017110603-15.png)
用意されているスタイル: Shadow
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201704/2017110603-17.png)
用意されているスタイル: Spacing
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201704/2017110603-20.png)
用意されているスタイル: Vertical Alignment
Tailwind CSSの実装例
ユーティリティとして利用するだけでなく組み合わせて、UIコンポーネントとしても利用できます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201704/2017110604-01.png)
Tailwind CSSの実装例: アラート
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201704/2017110604-02.png)
Tailwind CSSの実装例: ボタン
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201704/2017110604-03.png)
Tailwind CSSの実装例: カード
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201704/2017110604-04.png)
Tailwind CSSの実装例: ナビゲーション
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201704/2017110604-05.png)
Tailwind CSSの実装例: フォーム
sponsors