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

サイト構築 -CSS

Post on:2022年10月21日

sponsorsr

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

Tailwind CSSに使用されているすべてのクラスとそのプロパティ・値を参照および検索もでき、非常に便利なチートシートです。

Tailwind CSS Cheat Sheet

Tailwind CSSとは
Tailwind CSSのチートシート

Tailwind CSSとは

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

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

<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"
/>

<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ではクラスの命名について考える必要はありません。これにより、実装にかかる時間が短くなるかもしれません。
デザインの制約
デザインシステムでは通常、カラー、スペース、サイズをはじめ、さまざまなバリエーションを定義します。できることに制限があると、デベロッパーの仕事は楽になります。

Tailwind CSSのデメリット