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

Tailwind CSS v2.2

Adam Wathan

計画していたとは言えませんが、ここ数週間、Tailwindに新機能やエキサイティングな機能をたくさん追加して楽しんでおり、そろそろリリースする時期だと感じています。というわけで、Tailwind CSS v2.2の登場です！

これは、これまでで最も機能豊富なTailwindのリリースの一つと言えるでしょう。v2.1でJust-in-Timeモードを導入したことで、そうでなければ簡単に追加できなかった多くのクールな機能への扉が開かれ、今回のリリースにはその素晴らしい例が満載です。

主なハイライトは以下のとおりです

詳細については、GitHubのリリースノートをご覧ください。

マイナーリリースであり、クラシックエンジンには破壊的な変更はありませんが、Just-in-Timeモードはまだプレビュー段階であり、v2.2には影響を与える可能性のある非常に小さな変更がいくつか導入されていることに注意してください。アップグレードする際は、リリースノートの変更点と非推奨化に関する記述を必ずお読みください。

アップグレードする準備ができたら、npmから最新バージョンをインストールするだけで準備完了です。

npm install -D tailwindcss@latest

まったく新しい高性能Tailwind CLI

パフォーマンスを第一に考え、Tailwind CLIツールを完全に書き直し、さらに多くの新機能のサポートを追加しました。

npx tailwindcss -o dist/tailwind.css --watch --jit --purge="./src/**/*.html"

主なハイライトをいくつかご紹介します

  • インストールや設定は不要 — npx tailwindcss -o output.cssだけで、どこからでもTailwindをコンパイルできます。--jitフラグでJITモードを有効にし、--purgeオプションを使用してコンテンツファイルを渡すこともできます。設定ファイルを作成する必要はありません。
  • ウォッチモード — 変更を加えるたびにCSSを自動的にリビルドできます。
  • JITパフォーマンスの最適化 — CLIはTailwind専用であるため、JITモードでCSSをコンパイルするための最速のビルドツールとなるように、多くの最適化を行うことができました。
  • minifyのサポート — --minifyフラグを追加するだけで、cssnanoでCSSをminifyできるようになりました。
  • PostCSSプラグインのサポート — 新しいCLIは、postcss.config.jsファイルを使用して設定した追加のプラグインを読み取り、尊重します。

以前のCLIと完全に後方互換性があるため、すでにスクリプトを設定している場合は、スクリプトを変更せずにv2.2にアップグレードできるはずです。

詳細については、更新されたTailwind CLIのドキュメントをご覧ください。

tailwindcss-cliラッパーパッケージを使用していた場合は、tailwindcssに安全に切り替えることができます。これは、そもそもラッパーパッケージを作成せざるを得なかったピア依存関係の問題を解決できたためです。

beforeおよびafter疑似要素バリアント

この機能はJust-in-Timeモードでのみ利用可能です.

長年要望のあった機能がついに登場しました！beforeやafterのような疑似要素のスタイリングに対するファーストパーティのサポートを追加しました

<div class="before:block before:bg-blue-500 after:flex after:bg-pink-300"></div>

beforeまたはafterバリアントを使用すると、要素が確実にレンダリングされるように、content: ""を自動的に設定しますが、任意の値を完全にサポートする新しいcontentユーティリティを使用してオーバーライドできます

<div class="before:block before:content-['hello'] ..."></div>

CSSのattr()関数を使用して、属性からコンテンツを取得することもできます

<div before="hello world" class="before:block before:content-[attr(before)] ..."></div>

これは、コンテンツにスペースが含まれている場合に非常に役立ちます。スペースはCSSクラス名では使用できないためです。

first-letter/lineバリアント

この機能はJust-in-Timeモードでのみ利用可能です.

first-letterおよびfirst-line疑似要素のバリアントを追加しました。これにより、ドロップキャップのようなことができます。

<p class="first-letter:float-left first-letter:text-4xl first-letter:font-bold">
  The night was March 31, 1996, and it was finally time for Bret Hart to face off against Shawn Michaels in the long
  anticipated Iron Man match — a 60 minute war of endurance where the man who scored the most number of falls would walk
  away as the WWF World Heavyweight Champion.
</p>

選択テキストバリアント

この機能はJust-in-Timeモードでのみ利用可能です.

新しいselectionバリアントを追加しました。これにより、ハイライト表示をデザインに合わせて簡単にスタイル設定できます

<p class="selection:bg-pink-200">
  After nearly a grueling hour of warfare with neither man scoring a fall, Hart locked in the Sharpshooter, his
  signature submission hold. As Michaels screamed in pain, the crowd were certain that Hart was about to walk away from
  WrestleMania XII as the still-World Heavyweight Champion.
</p>

この機能は、親要素に適用してカスケードダウンできるように構築されているため、ユーティリティをbodyに適用することで、サイト全体のハイライトカラーを設定できます

<body class="selection:bg-pink-200">
  <!-- ... -->
  <p>
    But Michaels didn't give up — he held on until the bell rang and the designated 60 minutes was up. Hart walked away
    content, thinking that without a clear winner, the title was his to hold. He was not prepared for what would happen
    next, when Gorilla Monsoon declared the match would continue under sudden death rules.
  </p>
</body>

リストマーカーバリアント

この機能はJust-in-Timeモードでのみ利用可能です.

新しいmarkerバリアントを使用して、リストの先頭にある箇条書きまたは番号をスタイル設定できます

<h1>WrestleMania XII Results</h1>
<ol class="marker:font-medium marker:text-gray-500">
  <li>The British Bulldog, Owen Hart, and Vader defeated Ahmed Johnson, Jake Roberts, and Yokozuna</li>
  <li>Roddy Piper defeated Goldust</li>
  <li>Stone Cold Steve Austin defeated Savio Vega</li>
  <li>The Ultimate Warrior defeated Hunter Hearst Helmsley</li>
  <li>The Undertaker defeated Diesel</li>
  <li>Shawn Michaels defeated Bret Hart</li>
</ol>

selectionバリアントと同様に、親からカスケードされるように実装されているため、リスト項目ごとに繰り返す必要はありません。

兄弟セレクターバリアント

この機能はJust-in-Timeモードでのみ利用可能です.

Tailwind CSS v2.2では、group-*バリアントと非常によく似た動作をする新しいpeer-*バリアントが追加されましたが、親要素ではなく兄弟要素をターゲットにしています。

これは、先行するチェックボックスがチェックされているときに要素をスタイル設定したり、フローティングラベルのようなことを行ったり、その他多くのことに役立ちます

<label>
  <input type="checkbox" class="peer sr-only" />
  <span class="h-4 w-4 bg-gray-200 peer-checked:bg-blue-500">
    <!-- ... -->
  </span>
</label>

groupを他のバリアントと組み合わせることができるのと同様に、peerも同様に組み合わせることができ、peer-hover、peer-focus、peer-disabledなどのバリアントをすぐに利用できます。

生成されたCSSは、一般兄弟結合子を使用しており、次のようになります

.peer:checked ~ .peer-checked\:bg-blue-500 {
  background-color: #3b82f6;
}

そのため、バニラCSSと同様に、DOM内で前に現れる兄弟要素のみをターゲットにします。後に出現する兄弟要素はターゲットにしません。

網羅的な疑似クラスのサポート

この機能はJust-in-Timeモードでのみ利用可能です.

このリリースでは、考えられるほぼすべての欠落している疑似クラスのバリアントを追加しました

  • only (only-child)
  • first-of-type
  • last-of-type
  • only-of-type
  • target
  • default
  • indeterminate
  • placeholder-shown
  • autofill
  • required
  • valid
  • invalid
  • in-range
  • out-of-range

個人的にリストの中で一番気に入っているのはplaceholder-shownです。新しい兄弟セレクターバリアントと組み合わせることで、フローティングラベルのようなクールなことが可能になります。

<div class="relative">
  <input id="name" class="peer ..." />
  <label for="name" class="peer-placeholder-shown:top-4 peer-focus:top-0 ..."> Name </label>
</div>

短縮形の色の不透明度構文

この機能はJust-in-Timeモードでのみ利用可能です.

bg-opacity-50、text-opacity-25、placeholder-opacity-40のようなユーティリティを使用する代わりに、Tailwind CSS v2.2では、色のユーティリティ自体で色のアルファチャネルを直接調整できる新しい色の不透明度ショートハンドが提供されます

<div class="bg-red-500 bg-opacity-25">
<div class="bg-red-500/25">
</div>

つまり、以前は特定の不透明度ユーティリティがなかったグラデーションなど、Tailwindのどこでも色の不透明度を変更できるようになりました

<div class="bg-gradient-to-r from-red-500/50"></div>

不透明度の値はopacityスケールから取得されますが、角かっこ表記を使用して任意の不透明度の値を使用することもできます

<div class="bg-red-500/[0.31]"></div>

正直に言うと、この機能を使うことよりも、placeholderOpacity.jsのようなコアプラグインをもう二度と作成しなくて済むことの方が嬉しいです。そして、この機能自体にも本当に興奮しているので、それは何かを物語っていると思います。

拡張された任意の値をサポート

この機能はJust-in-Timeモードでのみ利用可能です.

Tailwindのすべてのコアプラグインを見直し、可能な限り柔軟な任意の値をサポートできるように努めました。そして、現時点ではほぼすべてを網羅していると思います。

ほぼどこでも、好きな任意の値を自由に使用できるはずです

<div class="col-start-[73] object-[50%] placeholder-[#aabbcc] ..."></div>

もし見落としがあれば、issueを開いていただければ対応します。

任意の値のサポートをより包括的にすることに加えて、あいまいな状況に対処するための新しい型ヒント構文も追加しました。たとえば、CSS変数を任意の値として使用する場合、生成されるCSSがどうなるべきか必ずしも明確ではありません

<!-- Is this a font size utility, or a text color utility? -->
<div class="text-[var(--mystery-var)]"></div>

任意の値を型名でプレフィックスすることで、エンジンにヒントを提供できるようになりました

<div class="text-[color:var(--mystery-var)]"></div>

現在、サポートされている型は次のとおりです

  • length
  • color
  • angle
  • list

今後、エッジケースが発見されるにつれて、さらに詳細を詰めていく予定ですが、これでかなり進むはずです。

改善されたネストのサポート

Tailwindは@tailwindや@applyのような非標準のCSSアットルールを多数導入しているため、postcss-nestedやpostcss-nestingのようなPostCSSネストプラグインと組み合わせると、奇妙な出力になることがよくあります。

この苦痛を軽減するために、tailwindcssパッケージに新しいPostCSSプラグインを含めました。これは、既存のネストプラグインとTailwind自体の間の軽量な互換性レイヤーとして機能します。

そのため、プロジェクトでネストサポートが必要な場合は、当社のプラグインを使用し、PostCSSプラグインリストでTailwindの前に配置してください

// postcss.config.js
module.exports = {
  plugins: [
    // ...
    require("tailwindcss/nesting"),
    require("tailwindcss"),
    // ...
  ],
};

デフォルトでは、postcss-nestedを内部で使用します（これはTailwindプラグインでネストをサポートするために使用しているものです）が、代わりにpostcss-nestingを使用したい場合は、関数としてプラグインを呼び出し、postcss-nestingプラグインを渡してください

// postcss.config.js
module.exports = {
  plugins: [
    // ...
    require("tailwindcss/nesting")(require("postcss-nesting")),
    require("tailwindcss"),
    // ...
  ],
};

内部的には、設定されたブレークポイントから展開されたメディア式を取得するために使用できる、新しく導入されたscreen()関数を使用しています

/* Input */
@media screen(sm) {
  /* ... */
}
/* Output */
@media (min-width: 640px) {
  /* ... */
}

自分でこれを使用する必要はおそらくありませんが、@mediaは理解するものの@screenを適切に処理しない別のツールとTailwindを統合する場合に役立つ可能性があります。

@screen sm {
@media screen(sm) {
  /* ... */
}

キャレットカラーユーティリティ

この機能はJust-in-Timeモードでのみ利用可能です.

新しいcaret-{color}ユーティリティを使用して、フォームフィールドのカーソルの色を設定できるようになりました

<input class="caret-red-500" />

これらは、tailwind.config.jsファイルのthemeセクションのcaretColorキーを使用してカスタマイズできます。

背景原点ユーティリティ

要素の背景が要素のボーダー、パディングボックス、またはコンテンツのどこを基準に配置されるかを制御できる、background-originプロパティ用の新しいユーティリティを追加しました

<div class="border-4 border-dashed bg-origin-border p-4 ..." style="background-image: url(...)">
  Background is rendered under the border
</div>
<div class="border-4 border-dashed bg-origin-padding p-4 ..." style="background-image: url(...)">
  Background is rendered within the border but on top of any padding
</div>
<div class="border-4 border-dashed bg-origin-content p-4 ..." style="background-image: url(...)">
  Background is rendered within any padding and under the content
</div>

詳細については、背景原点のドキュメントをご覧ください。

簡素化されたtransformとfilterの構成

この機能はJust-in-Timeモードでのみ利用可能です.

transform、filter、およびbackdrop-filterクラスは、それぞれの構成可能なユーティリティのセットを「有効にする」ためにもはや必要ありません。

<div class="transform scale-50 filter grayscale backdrop-filter backdrop-blur-sm">
<div class="scale-50 grayscale backdrop-blur-sm">
</div>

これらの機能は、関連するサブユーティリティのいずれかを使用すると自動的に有効になります。

ただし、これらのユーティリティはもう必要なくなったため、transformとfilterがデフォルトで「休止状態」になるとは期待できなくなったことを理解しておくことが重要です。これらのクラスを切り替えることでtransformまたはfilterを条件付きで「アクティブ化」することに依存していた場合は、代わりにサブユーティリティ自体を切り替えるようにしてください

<div class="scale-105 -translate-y-1 hover:transform">
<div class="hover:scale-105 hover:-translate-y-1">
</div>

これがほとんどの人にとって実際の問題になるとは思っていませんが、技術的には破壊的な変更であるため、この改善をJITエンジンのみに限定しました。

辺ごとのボーダーカラーユーティリティ

この機能はJust-in-Timeモードでのみ利用可能です.

過去4年間で月に少なくとも1回はリクエストされていた、ついに辺ごとのボーダーカラーサポートを追加したことを共有できて嬉しく思います。開発スタイルシートのサイズを気にする必要がなくなったからです。

<div class="border-2 border-t-blue-500 border-r-pink-500 border-b-green-500 border-l-yellow-500">
  <!-- ... -->
</div>

醜いウェブサイトをどんどん作ってください！（冗談です、冗談です。便利だということは知っています。落ち着いてください。）

組み込みのセーフリスト、transform、およびextractのサポート

多くの重要なPurgeCSS機能のファーストクラスサポートを追加し、PurgeCSSを実際には使用しないJITエンジンでも動作するようにしました。

最初はsafelistです。これは、データベースなどから取得したコンテンツで使用されているなどの理由で、特定のクラスを本番CSSから削除されないように保護する必要がある場合に非常に役立ちます

module.exports = {
  purge: {
    content: ["./src/**/*.html"],
    safelist: [
      "bg-blue-500",
      "text-center",
      "hover:opacity-100",
      // ...
      "lg:text-right",
    ],
  },
  // ...
};

クラシックエンジンはここで正規表現を受け入れますが、JITエンジンは受け入れないことに注意してください。これは、オンデマンドでクラスを生成する場合、クラスは使用されるまで存在しないため、式と一致させるものが何もないためです。そのため、just-in-timeモードを使用している場合は、期待どおりの結果を得るために完全なクラス名を指定してください。

次はtransformです。これにより、潜在的なクラス名をスキャンする前に、異なるファイル拡張子のコンテンツを変換できます

let remark = require("remark");
module.exports = {
  purge: {
    content: ["./src/**/*.{html,md}"],
    transform: {
      md: (content) => {
        return remark().process(content);
      },
    },
  },
  // ...
};

これは、MarkdownのようにHTMLにコンパイルされる言語で記述されたテンプレートがある場合に非常に役立ちます。

最後にextractがあります。これにより、Tailwindが特定のファイルタイプでクラス名を検出するために使用するロジックをカスタマイズできます

module.exports = {
  purge: {
    content: ["./src/**/*.{html,md}"],
    extract: {
      pug: (content) => {
        return /[^<>"'`\s]*/.match(content);
      },
    },
  },
  // ...
};

これは高度な機能であり、ほとんどのユーザーは必要ありません。Tailwindのデフォルトの抽出ロジックは、ほぼすべてのプロジェクトで非常にうまく機能します。

これらの機能の詳細については、本番環境向け最適化のドキュメントをご覧ください。

アップグレード

Tailwind CSS v2.2にアップグレードするには、npmから最新リリースをインストールしてください

npm install -D tailwindcss@latest

Just-in-Timeモードプレビューを使用している場合は、リリースノートの変更点と非推奨化に関する記述も必ずお読みください。

アップグレードする準備はできましたか？ npmから入手 →

すべての最新情報をあなたの受信箱へ直接お届けします。
ニュースレターに登録する。

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