Tailwind CSSの最新チートシート、v4.1対応、すべてのクラスとプロパティ・値を参照および検索もできる優れもの
Post on:2025年7月29日
sponsorsr
最近はこれまで以上にユーティリティクラスを使用したTailwind CSSの需要が高まっている気がします。さまざまなフレームワークやライブラリ、AIツールにも使用されており、ますます人気が高まっています。
2025年現在、最新のTailwind CSS v4.1をサポートしたチートシートを紹介します。使用されているすべてのクラスとそのプロパティ・値を参照および検索もでき、非常に便利なチートシートです。

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

Tailwind CSS v4.1 -Tailwind CSS
2025年4月に、Tailwind CSS v4.1がリリースされ、主な新機能は下記の通りです。
text-shadow-*
: 新しいユーティリティクラス。mask-*
: 画像とグラデーションを使用して要素をマスクします。- 古いブラウザとの互換性が向上: 古いブラウザでサポートされている機能を活用しながら、よりスムーズにデグレードできるようになりました。
overflow-wrap
: より細やかなテキストの折り返し。drop-shadow
: カラードロップシャドウのサポート。pointer-*
とany-pointer-*
: ビューポートに依存せずにタッチデバイスをターゲットにできます。items-baseline-last
とself-baseline-last
: アイテムを最後のベースラインに揃えます。safe
: CSS GridやFlexboxでコンテンツを中央に配置し、十分なスペースがない場合でもコンテンツが消えないようにします。@source not
: 特定のパスを無視します。@source inline(...)
: 特定のユーティリティをセーフリストに追加します。- その他の新しいバリアント(
noscript
,user-valid
,inverted-colors
など)も多数追加しました。
v4.1をサポートしたTailwind CSSのチートシート
Tailwind CSSのチートシートは、無料で利用できます。

Tailwind CSS Cheatsheet
Tailwind CSS Cheatsheet -GitHub
チートシートは、Tailwind CSSとSvelteで作成されており、Tailwind CSSで使用されているすべてのクラスとそのプロパティ・値を参照および検索できます。
たとえば、「margin」で検索すると、margin
に関連したユーティリティクラスが表示されます。

v4.1の新機能text-shadow-
もチートシートに含まれています。
text-shadow-2xs
からtext-shadow-lg
まで、5種類のテキストシャドウが用意されています。これらのユーティリティクラスは、複雑な背景(グラデーションなど)で見出しのテキストを目立たせるのに便利です。

text-shadow-
を表示
カテゴリ別も便利です。
たとえば、Sizingのmax-width
を見てみます。

項目の順番は公式サイトに準じており、「Docs」をクリックすると、公式ドキュメントにアクセスできます。
sponsors