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

サイト構築 -CSS

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の概要
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種類のテキストシャドウが用意されています。これらのユーティリティクラスは、複雑な背景（グラデーションなど）で見出しのテキストを目立たせるのに便利です。