Tailwind CSSの最新チートシート、v4.1対応、すべてのクラスとプロパティ・値を参照および検索もできる優れもの

最近はこれまで以上にユーティリティクラスを使用したTailwind CSSの需要が高まっている気がします。さまざまなフレームワークやライブラリ、AIツールにも使用されており、ますます人気が高まっています。

2025年現在、最新のTailwind CSS v4.1をサポートしたチートシートを紹介します。使用されているすべてのクラスとそのプロパティ・値を参照および検索もでき、非常に便利なチートシートです。

Tailwind CSS Cheatsheet
Tailwind CSS Cheatsheet -GitHub

• Tailwind CSS v4.1の概要
• v4.1をサポートしたTailwind CSSのチートシート

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」をクリックすると、公式ドキュメントにアクセスできます。