これは便利! Tailwind CSSのチートシート、すべてのクラスとそのプロパティ・値を参照および検索もできる優れもの

先日、v3.0がリリースされ、ますます注目されているTailwind CSSのチートシートを紹介します。

Tailwind CSSに使用されているすべてのクラスとそのプロパティ・値を参照および検索もでき、非常に便利です。残念ながら、v3.0にはまだ未対応。

Tailwind CSSのチートシート

Tailwind CSS Cheat Sheet

Tailwind CSSとは

Tailwind CSSTailwind CSS -GitHub)はユーティリティファーストのCSSのフレームワークで、汎用的なクラスを組み合わせてWebサイトやスマホアプリのレイアウト・コンポーネントを実装します。

たとえば、メールの入力欄だと下記のように記述します。

Tailwind CSSのメリット
  • HTMLから離れる必要がない
    さまざまな汎用的なユーティリティのクラスが用意されているので、HTMLでそれらのクラスを記述するだけでスタイルを適用できます。
  • CSSのクラスの命名
    Tailwind CSSではクラスの命名について考える必要はありません。これにより、実装にかかる時間が短くなるかもしれません。
  • デザインの制約
    デザインシステムでは通常、カラー、スペース、サイズをはじめ、さまざまなバリエーションを定義します。できることに制限があると、デベロッパーの仕事は楽になります。
Tailwind CSSのデメリット
  • クラスの長いリストで混乱することがある
    1つのコンポーネントを実装するために複数のクラス、場合によっては10個以上のクラスが必要になります。
  • ユーティリティファーストのフレームワークではない
    ファーストというより、ユーティリティオンリーのフレームワークです。
  • コンポーネントに名前をつけられない
    ユーティリティのクラスで構成されているので、オリジナルの名前で管理ができません。

参考:

Tailwind CSSのチートシート

Tailwind CSSのチートシートは、無料で利用できます。

Tailwind CSSのチートシート

Tailwind CSS Cheat Sheet

Nerdcave's cheat sheetにインスパイアされたチートシートで、Tailwind CSSで使用されているすべてのクラスとそのプロパティ・値を参照および検索できます。

Tailwind CSSのチートシート

marginで検索すると、marginを使用しているクラスがハイライト

カテゴリ別に見てましょう。

Tailwind CSSのチートシート

コンテナ: Tailwind CSSのチートシート
要素にmax-widthを適用して、その幅をブレークポイントに定義します。

Tailwind CSSのチートシート

Flexbox: Tailwind CSSのチートシート
flexコンテナ内の使用可能なスペースに、flexアイテムをどのように拡大・縮小するかを定義します。

Tailwind CSSのチートシート

サイズ: Tailwind CSSのチートシート
要素のwidthを定義します。

Tailwind CSSのチートシート

マージン: Tailwind CSSのチートシート
要素のmargin(1方向・2方向・4方向)を定義します。

Tailwind CSSのチートシート

タイポグラフィ: Tailwind CSSのチートシート
テキストとテキスト装飾の前景色の値を定義します。

Tailwind CSSの公式だとコンポーネント集は有料ですが、オープンソースで利用できるコンポーネントも同サイトからリリースされています。

Tailwind CSSのユーティリティクラスで実装されたUIコンポーネント集 -FlowBite

FlowBite
FlowBite -GitHub

sponsors

top of page

©2022 coliss