これは便利！ Tailwind CSSのチートシート、v3対応、すべてのクラスとプロパティ・値を参照および検索もできる優れもの
Post on:2022年10月21日
sponsors
Tailwind CSS v3がリリースされ、ますます注目されているTailwind CSSのチートシートを紹介します。
Tailwind CSSに使用されているすべてのクラスとそのプロパティ・値を参照および検索もでき、非常に便利なチートシートです。
Tailwind CSSとは
Tailwind CSS（Tailwind CSS -GitHub）はユーティリティファーストのCSSのフレームワークで、汎用的なクラスを組み合わせてWebサイトやスマホアプリのレイアウト・コンポーネントを実装します。
たとえば、メールの入力欄だと下記のように記述します。
|
1 2 3 4 |
<input class="block appearance-none bg-white placeholder-gray-600 border border-indigo-200 rounded w-full py-3 px-4 text-gray-700 leading-5 focus:outline-none focus:border-indigo-400 focus:placeholder-gray-400 focus:ring-2 focus:ring-indigo-200" placeholder="jane@example.com" /> |
- Tailwind CSSのメリット
-
- HTMLから離れる必要がない
さまざまな汎用的なユーティリティのクラスが用意されているので、HTMLでそれらのクラスを記述するだけでスタイルを適用できます。 - CSSのクラスの命名
Tailwind CSSではクラスの命名について考える必要はありません。これにより、実装にかかる時間が短くなるかもしれません。 - デザインの制約
デザインシステムでは通常、カラー、スペース、サイズをはじめ、さまざまなバリエーションを定義します。できることに制限があると、デベロッパーの仕事は楽になります。
- HTMLから離れる必要がない
- Tailwind CSSのデメリット
-
- クラスの長いリストで混乱することがある
1つのコンポーネントを実装するために複数のクラス、場合によっては10個以上のクラスが必要になります。 - ユーティリティファーストのフレームワークではない
ファーストというより、ユーティリティオンリーのフレームワークです。 - コンポーネントに名前をつけられない
ユーティリティのクラスで構成されているので、オリジナルの名前で管理ができません。
- クラスの長いリストで混乱することがある
参考:
Tailwind CSSのチートシート
Tailwind CSSのチートシートは、無料で利用できます。
TypeScriptで実装されたReactベースのチートシートで、Tailwind CSSで使用されているすべてのクラスとそのプロパティ・値を参照および検索できます。
marginで検索すると、marginを使用しているクラスがハイライト
カテゴリ別に見てましょう。
コンテナ: Tailwind CSSのチートシート
要素にmax-widthを適用して、その幅をブレークポイントに定義します。
Flexbox: Tailwind CSSのチートシート
flexコンテナ内の使用可能なスペースに、flexアイテムをどのように拡大・縮小するかを定義します。
サイズ: Tailwind CSSのチートシート
要素のwidthを定義します。
マージン: Tailwind CSSのチートシート
要素のmargin（1方向・2方向・4方向）を定義します。
タイポグラフィ: Tailwind CSSのチートシート
テキストとテキスト装飾の前景色の値を定義します。
Tailwind CSSの公式だとコンポーネント集は有料ですが、オープンソースで利用できるコンポーネントもリリースされています。
sponsors
