ドキュメントブログショーケースPlus

Tailwind CSS v4.1：テキストシャドウ、マスクなど多数の新機能

Adam Wathan
Dan Hollick

実現するとは思っていませんでしたが、ついに実現しました。text-shadowユーティリティを含むTailwind CSSのバージョンをリリースしました。

Tailwind CSS v4.1が登場しました。このバージョンには、皆様（または臆病なLLM）がさらに優れたインタラクティブな体験を構築するのに役立つ、新しいユーティリティ、バリアント、および開発者体験の改善が満載です。

このリリースに含まれる最高のものをすべてご紹介します。

以上がクールな機能のすべてですが、リリースノートには他にもいくつかの小さな機能が隠されているので、ぜひチェックしてみてください。

npmから最新バージョンの tailwindcss をインストールして、プロジェクトをアップグレードしてください。

Tailwind CLIを使用する場合
npm install tailwindcss@latest @tailwindcss/cli@latest
Viteを使用する場合
npm install tailwindcss@latest @tailwindcss/vite@latest
PostCSSを使用する場合
npm install tailwindcss@latest @tailwindcss/postcss@latest

新しい text-shadow-* ユーティリティ

私たちは少なくとも過去6年間、テキストシャドウの追加を予告してきましたが、ついに実現しました。

デフォルトテーマに text-shadow-2xs から text-shadow-lg までの5つのテキストシャドウを追加しました。これらは、背景がごちゃごちゃしている場合に見出しを目立たせるのに特に役立ちます。

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

<p class="text-shadow-2xs ...">The quick brown fox...</p>
<p class="text-shadow-xs ...">The quick brown fox...</p>
<p class="text-shadow-sm ...">The quick brown fox...</p>
<p class="text-shadow-md ...">The quick brown fox...</p>
<p class="text-shadow-lg ...">The quick brown fox...</p>

text-shadow-<color> ユーティリティを使用して、シャドウの色を変更できます。たとえば、暗いテキストに小さな白いシャドウを使用することで、エンボス効果のようなものを作成できます。

<button class="text-sky-950 text-shadow-2xs text-shadow-sky-300 ...">Book a demo</button>
<button class="text-gray-950 dark:text-white dark:text-shadow-2xs ...">See pricing</button>

色を変更せずにテキストシャドウの不透明度のみを調整したい場合は、text-shadow-lg のようなテキストシャドウサイズのユーティリティに不透明度修飾子を直接適用できます。

たとえば、text-shadow-lg/50 は text-shadow-lg と text-shadow-black/50 を同時に設定するのと同じです。

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

<p class="text-shadow-lg ...">The quick brown fox...</p>
<p class="text-shadow-lg/20 ...">The quick brown fox...</p>
<p class="text-shadow-lg/30 ...">The quick brown fox...</p>

詳細については、text-shadow ドキュメントをご覧ください。

mask-* ユーティリティで要素をマスクする

最新のCSSの最もクールな機能の1つは、画像とグラデーションをマスクとして使用できることです。基本的に、画像の不透明度を使用して要素の特定の部分を非表示にします。

スピード

パワーユーザー向けに構築

キーボードショートカットでこれまで以上に速く作業できます

<div class="mx-auto flex items-center p-16 max-sm:p-8">
  <img
    src="/img/keyboard.png"
    class="mask-radial-from-transparent mask-radial-from-15% mask-radial-to-black mask-radial-to-55% mask-radial-at-right ..."
  />
  <div class="font-medium">
    <p class="font-mono text-xs text-blue-500 uppercase dark:text-blue-400">Speed</p>
    <p class="mt-2 text-base text-gray-700 dark:text-gray-300">Built for power users</p>
    <p class="mt-1 text-sm leading-relaxed text-balance text-gray-500">
      Work faster than ever with our keyboard shortcuts
    </p>
  </div>
</div>

任意の background-image をマスクとして使用できるため、論理的なのは bg-* ユーティリティをコピーして同じAPIを共有することでした。このアプローチの問題は、多くの場合、複数のマスクを組み合わせたい場合があり、bg-* ユーティリティは構成可能ではないことです。

そこで、mask-image で動作する新しいユーティリティセットを作成しました。これらは構成可能で、マスキングの使用事例専用に構築されています。たとえば、mask-b-from-<value> や mask-t-to-<value> のようなユーティリティを使用して、要素の片側に線形グラデーションマスクを追加できます。

mask-t-from-50%

mask-r-from-30%

mask-l-from-50% mask-l-to-90%

mask-b-from-20% mask-b-to-80%

<div class="mask-t-from-50% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-r-from-30% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-l-from-50% mask-l-to-90% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-b-from-20% mask-b-to-80% bg-[url(/img/mountains.jpg)] ..."></div>

必要な正確なグラデーションを考え出すよりも、どの側をマスクしたいかを考える方が自然です。

グラデーションマスクユーティリティも構成可能であるため、放射状、円錐形、および線形グラデーションを組み合わせて、より複雑なマスクを作成できます。

<div class="mask-b-from-50% mask-radial-[50%_90%] mask-radial-from-80% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-r-from-80% mask-b-from-80% mask-radial-from-70% mask-radial-to-85% bg-[url(/img/mountains.jpg)] ..."></div>

マスキングは非常に強力なテクニックであり、APIにはここで説明できる以上の機能があります。新しいユーティリティの完全な内訳については、ドキュメントをご覧ください。

古いブラウザとの互換性の向上

Tailwind CSS v4.0では、可能な限り最高のフレームワークを作成し、このバージョンを可能な限り長く使用できるようにするために、最新のプラットフォーム機能を全面的に採用しました。

残念ながら、これらの機能の一部は古いブラウザでは非常に劣化がひどく、古いiPhoneやiPadからSafari 15にアクセスしているユーザーの場合、色やシャドウのような基本的なものでさえまったくレンダリングされない可能性があります。

Tailwind CSS v4.1では、独自のフレームワーク固有のフォールバックを考案およびテストすることに多くの労力を費やし、一部の非常に最新の機能がまだ完全に同じように動作しない場合でも、古いブラウザでサイトを可能な限り最適にレンダリングできるようにしました。

Comparison between how Tailwind CSS v4.0 (left) and Tailwind CSS v4.1 (right) render in Safari 15.5. Tailwind CSS v4.0 fails to render some background gradients that are now visible in Tailwind CSS v4.1

このリリースで改善できたもののリストを以下に示します。

  • oklab で定義された色が、古いバージョンのSafariでレンダリングされるようになりました。
  • @property で定義されたカスタムプロパティに依存する機能（シャドウ、変形、グラデーションなど）が、古いバージョンのSafariおよびFirefoxで動作するようになりました。
  • 不透明度修飾子を使用する色が、古いブラウザでインラインフォールバックでレンダリングされるようになりました。
  • 明示的な補間方法を使用するグラデーションは、サポートされていない場合、ブラウザのデフォルトにフォールバックするようになりました。

Tailwind CSS v4は依然としてSafari 16.4以降のような最新のブラウザ向けに設計されており、すべてを完璧に動作させるためには多くの最新機能に依存していますが、少なくとも特定の状況で奇妙なシャドウの色が異なる場合でも、サイトはレンダリングされ、古いブラウザでも使用できるようになります。

Tailwind CSS v4のブラウザ互換性について知っておくべきことをすべて学ぶには、ブラウザ互換性ドキュメントの全文をお読みください。

overflow-wrap によるきめ細かいテキスト折り返し

新しい overflow-wrap ユーティリティを使用すると、要素内でのテキストの折り返し方法を制御できます。wrap-break-word ユーティリティは、レイアウトを崩す可能性のある長い単語やURLに特に役立ちます。

主要な英語辞書の中で最も長い単語は pneumonoultramicroscopicsilicovolcanoconiosis です。これは、非常に細かいシリカ粒子、特に火山からの吸入によって感染する肺疾患を指す単語です。医学的には、シリコーシスと同じです。

<p class="wrap-break-word">The longest word in any of the major...</p>

これが期待どおりに動作しない唯一のケースはフレックスコンテナ内であり、おそらく新しい wrap-anywhere ユーティリティを使用する必要があります。

これは wrap-break-word に似ていますが、要素の固有サイズを計算するときに単語の途中で改行を許可し、子要素に min-width: 0 を設定する必要性を置き換えます。

wrap-break-word

Jay Riemenschneider

jason.riemenschneider@vandelayindustries.com

wrap-anywhere

Jay Riemenschneider

jason.riemenschneider@vandelayindustries.com

<div class="flex max-w-sm">
  <img class="size-16 rounded-full" src="/img/profile.jpg" />
  <div class="wrap-break-word">
    <p class="font-medium">Jay Riemenschneider</p>
    <p>jason.riemenschneider@vandelayindustries.com</p>
  </div>
</div>
<div class="flex max-w-sm">
  <img class="size-16 rounded-full" src="/img/profile.jpg" />
  <div class="wrap-anywhere">
    <p class="font-medium">Jay Riemenschneider</p>
    <p>jason.riemenschneider@vandelayindustries.com</p>
  </div>
</div>

それほど多くのことはありませんが、少し異なる言葉で再度読みたい場合は、overflow-wrap ドキュメントをご覧ください。

色付き drop-shadow のサポート

text-shadow のサポートを構築しているときに、実装に着手しなかったもう1つの機能である色付きドロップシャドウを追加することも考えました。

これで、drop-shadow-indigo-500 や drop-shadow-cyan-500/50 のようなユーティリティを使用して、ドロップシャドウの色を変更できます。

drop-shadow-cyan-500/50

drop-shadow-sky-500/50

drop-shadow-indigo-500/50

<svg class="fill-cyan-500 drop-shadow-xl drop-shadow-cyan-500/50 ...">...</svg>
<svg class="fill-blue-500 drop-shadow-xl drop-shadow-blue-500/50 ...">...</svg>
<svg class="fill-indigo-500 drop-shadow-xl drop-shadow-indigo-500/50 ...">...</svg>

それほど多くのことはありませんが、いずれにせよ drop-shadow ドキュメントをご覧ください。

pointer-* および any-pointer-* で入力デバイスをターゲットにする

新しい pointer-fine および pointer-coarse バリアントを使用すると、ユーザーがマウス付きデバイスを使用しているか、タッチスクリーンを使用しているかに応じて、何かを異なるスタイルに設定できます。

pointer-fine を使用してマウスやトラックパッドのような正確なポインティングデバイスをターゲットにし、pointer-coarse を使用してタッチスクリーンのような低精度のデバイスをターゲットにします。

開発者ツールでタッチデバイスをエミュレートして、変更を確認してみてください。

RAM
パフォ​​ーマンススペックを見る
<fieldset aria-label="Choose a memory option">
  <div class="flex items-center justify-between">
    <div>RAM</div>
    <a href="#"> See performance specs </a>
  </div>
  <div class="mt-4 grid grid-cols-6 gap-2 pointer-coarse:mt-6 pointer-coarse:grid-cols-3 pointer-coarse:gap-4">
    <label class="p-2 pointer-coarse:p-4 ...">
      <input type="radio" name="memory-option" value="4 GB" className="sr-only" />
      <span>4 GB</span>
    </label>
    <!-- ... -->
  </div>
</fieldset>

スマートフォンを使用している場合は、pointer-coarse スタイルが適用されていることがわかります。これにより、タッチターゲットが大きくなり、ヒットしやすくなります。デスクトップを使用している場合は、pointer-fine スタイルが適用されていることがわかります。これにより、タッチターゲットが小さくなり、より正確になります。

any-pointer-* バリアントは同じように動作しますが、ユーザーのプライマリポインティングデバイスのみを確認するのではなく、任意のポインティングデバイスが一致するかどうかを確認します。したがって、any-pointer-coarse は、ユーザーがマウスを接続していても、タッチスクリーン付きのラップトップで一致します。

アイテムを最後のベースラインに揃える

フレックスまたはグリッドレイアウトを使用する場合、コンテナの端ではなく、テキストの最後の行のベースラインに何かを揃える必要がある場合があります。

新しい items-baseline-last ユーティリティはまさにそれを行います。

Spencer Sharp

Space Recruitで宇宙飛行士の採用の未来に取り組んでいます。

spacerecruit.com
Alex Reed

学際的なデザイナー。

alex-reed.com
<div class="grid grid-cols-[1fr_auto] items-baseline-last">
  <div>
    <img src="img/spencer-sharp.jpg" />
    <h4>Spencer Sharp</h4>
    <p>Working on the future of astronaut recruitment at Space Recruit.</p>
  </div>
  <p>spacerecruit.com</p>
</div>

フレックスまたはグリッドコンテナ内のすべてのアイテムではなく、単一のアイテムのみを揃える必要がある場合は、self-baseline-last も追加しました。

safe 配置でコンテンツを可視化する

コンテナが小さくなりすぎたときに、中央揃えのコンテンツが両方向にオーバーフローしたことはありませんか？サイズごとに配置を切り替えるためにコンテナクエリを使用する必要はもうありません。

新しい safe 配置ユーティリティは、コンテナがオーバーフローし始めると配置を start に変更するため、一方向にのみオーバーフローします。

コンテナのサイズを変更して、配置の動作を確認してください。

justify-center

  • セールス
  • マーケティング
  • SEO
  • 分析
  • デザイン
  • 戦略
  • 成長
  • UX/UI

justify-center-safe

  • セールス
  • マーケティング
  • SEO
  • 分析
  • デザイン
  • 戦略
  • 成長
  • UX/UI
justify-center
<ul class="flex justify-center gap-2 ...">
  <li>Sales</li>
  <li>Marketing</li>
  <li>SEO</li>
  <!-- ... -->
</ul>
justify-center-safe
<ul class="flex justify-center-safe gap-2 ...">
  <li>Sales</li>
  <li>Marketing</li>
  <li>SEO</li>
  <!-- ... -->
</ul>

これらのユーティリティは、フレックスボックスとグリッドレイアウトの両方で動作し、すべての配置プロパティで使用できます。

@source not で特定のパスを無視する

Tailwindによるスキャンからコードベースの一部を明示的に除外する必要がある場合があります。クラス名をスキャンするときに特定のパスを無視するには、@source not を使用できるようになりました。

CSS
@import "tailwindcss";
@source not "./src/components/legacy";

これは、プロジェクトに多数のファイルがあるが、それらの特定のサブセットのみをスキャンする場合に役立ちます。

@source inline(…) で特定のユーティリティをセーフリストに登録する

コンテンツファイルに存在しない特定のクラス名をTailwindに生成させる必要がある場合は、@source inline() を使用して強制的に生成させることができます。

CSS
@import "tailwindcss";
@source inline("underline");
生成されたCSS
.underline {
  text-decoration: underline;
}

これは、以前のバージョンのTailwindの safelist 構成オプションと同等ですが、構成ファイルではなくCSSファイルで使用できるようになりました。

ソース入力は ブレース展開 されるため、複数のクラスを一度に生成できます。たとえば、すべての赤の色合いをhoverバリアントで生成するには、ソース入力に範囲を追加できます。

CSS
@import "tailwindcss";
@source inline("{hover:,}bg-red-{50,{100..900..100},950}");
生成されたCSS
.bg-red-50 {
  background-color: var(--color-red-50);
}
.bg-red-100 {
  background-color: var(--color-red-100);
}
.bg-red-200 {
  background-color: var(--color-red-200);
}
/* ... */
.bg-red-800 {
  background-color: var(--color-red-800);
}
.bg-red-900 {
  background-color: var(--color-red-900);
}
.bg-red-950 {
  background-color: var(--color-red-950);
}
@media (hover: hover) {
  .hover\:bg-red-50:hover {
    background-color: var(--color-red-50);
  }
  /* ... */
  .hover\:bg-red-950:hover {
    background-color: var(--color-red-950);
  }
}

これにより、赤の色合いが100から900まで100刻みで、50と950の色合いとともに生成されます。また、これらの各クラスに hover: バリアントも追加されます。

@source inline() を not 修飾子とともに使用して、生成されないように特定のクラスを除外することもできます。

CSS
@import "tailwindcss";
@source not inline("container");

これにより、ソースファイルで container という単語が検出された場合でも、container クラスが特に生成されないようにします。

詳細については、ソースファイル内のクラスの検出 ドキュメントをご覧ください。

その他の多数の新しいバリアント

details-content によるより美しいアコーディオン

<details> 要素の子にスタイルを追加することは常に可能でしたが、コンテンツコンテナ自体にスタイルを設定することは不可能でした。

新しい details-content バリアントはコンテンツコンテナをターゲットにします。これは、<summary> 要素に対するコンテンツコンテナの配置に役立ちます。

なぜオーバルチンという名前なのですか？

マグカップは丸いです。瓶も丸いです。ラウンドチンと呼ぶべきです。

<details class="rounded-lg border border-transparent p-6 details-content:mt-3 details-content:-ml-0.5" open>
  <summary class="text-sm leading-6 font-semibold text-gray-900 select-none dark:text-white">
    Why do they call it Ovaltine?
  </summary>
  <div class="border-gray-200 bg-gray-50 py-3 pl-3 dark:border-white/10 dark:bg-gray-800/50 ...">
    <p>The mug is round. The jar is round. They should call it Roundtine.</p>
  </div>
</details>

inverted-colors モードをターゲットにする

ユーザーがOSで反転色スキームを有効にしている場合に、条件付きでスタイルを追加するには、inverted-colors バリアントを使用します。

<div class="shadow-xl inverted-colors:shadow-none ...">
  <!-- ... -->
</div>

これは、反転色が有効になっている場合に黒いシャドウが白に変わるのを防ぐような場合に役立ちます。

新しい noscript バリアント

はい、JavaScriptを無効にする人もいますが、アプリがJavaScriptなしでは動作しないことを伝えることができます。noscript バリアントを使用すると、JSが無効になっている場合に条件付きでスタイルを適用できます。

<div class="hidden noscript:block">Please enable JavaScript to use this app.</div>

これは <noscript> タグですでに実行できましたが、CSSでも実行できるようになりました。Tailwindを使用するとHTMLでCSSを記述できるため、そうです。

user-valid および user-invalid によるフォーム検証の改善

:invalid 疑似クラスを試したことはありますか？ページがロードされるとすぐに、ユーザーがフォームに触れる前でも、赤い無効状態がいっぱいになるだけですか？

新しい user-valid および user-invalid バリアントは、ユーザーが実際にコントロールを操作した後にのみ検証関連のスタイルを適用することで、この問題を解決しようとします。

<input required class="border user-valid:border-green-500" />
<input required class="border user-invalid:border-red-500" />

以上がTailwind CSS v4.1です！ npmを使用して最新バージョンにアップデートし、今日から使い始めてください。

Tailwind CLIを使用する場合
npm install tailwindcss@latest @tailwindcss/cli@latest
Viteを使用する場合
npm install tailwindcss@latest @tailwindcss/vite@latest
PostCSSを使用する場合
npm install tailwindcss@latest @tailwindcss/postcss@latest

新機能で何を作成するのか楽しみにしています！

すべての最新情報を直接受信箱に届けます。
ニュースレターにサインアップしてください。

Copyright © 2025 Tailwind Labs Inc.·商標ポリシー