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

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

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

Tailwind CSSのチートシート、v4.1対応

Tailwind CSS Cheatsheet
Tailwind CSS Cheatsheet -GitHub

Tailwind CSS v4.1の概要

Tailwind CSSTailwind 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-lastself-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

top of page

©2025 coliss