2021年4月5日

Tailwind CSS v2.1

Adam Wathan

Tailwind CSS v2.0 以降初の新機能アップデートが登場しました。クールな機能が満載です！新しい JIT エンジンをコアに統合し、コンポーザブルな CSS フィルターのファーストクラスサポート、ブレンディングモードユーティリティなどを追加しました。

主なハイライトをご紹介します

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

コアに JIT エンジンを搭載

3月に発表したばかりの最新 JIT エンジンがコアに統合され、tailwind.config.js ファイルの新しい mode オプションを使用してオプトイン機能として利用できるようになりました。

module.exports = {
  mode: "jit",
  purge: [
    // ...
  ],
  // ...
};

この機能はまだプレビュー段階です。つまり、問題を解決するにつれて一部の詳細が変更される可能性があり、セマンティックバージョニングの対象ではありません。

以前に @tailwindcss/jit を使用していた場合は、Tailwind CSS v2.1 に移行できます。エンジンのすべての新しい開発はそこで行われます。

詳細については、Just-in-Time モードのドキュメントをお読みください。

これは大きな変更です。ついに CSS フィルターのファーストクラスサポートを追加しました！

これらは transform ユーティリティとよく似ており、filter を使用してフィルターを有効にし、grayscale、blur-lg、saturate-200 などのユーティリティと組み合わせて、フィルターをその場で合成します。

<div class="blur-md grayscale invert filter ...">
  <!-- ... -->
</div>

...そして、backdrop-filter は次のようになります。

<div class="backdrop-blur backdrop-brightness-50 backdrop-filter ...">
  <!-- ... -->
</div>

詳細については、filter および backdrop-filter をご確認ください。近日中に役立つ視覚的な例を多数追加する予定です。

mix-blend-mode および background-blend-mode 用の最新ユーティリティを追加しました。

<div class="mix-blend-multiply ...">
  <!-- ... -->
</div>

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

isolation プロパティを操作するための新しい isolate および isolation-auto ユーティリティを追加しました。

<div class="isolate ...">
  <!-- ... -->
</div>

これは、ブレンディングモード機能や z-index の調整をスコープするのに非常に役立ち、非常に強力です。

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

Josh Comeau 氏によるこちらの素晴らしい記事も、実際の動作を確認するためにお勧めします。

Tailwind CSS v2.1 は、破壊的な変更のない段階的なアップグレードであるため、アップグレードするには、以下を実行するだけです。

npm install tailwindcss@latest

以前に @tailwindcss/jit を使用していた場合は、tailwindcss に戻して、PostCSS の構成を適宜更新できます。

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

この移行により、コンテンツは新しい v4 形式に準拠し、例、抜粋、およびコードブロックに指定されたコンポーネントとコードを利用することが保証されます。