Tailwind CSS v1.5 と同様ですが、アニメーションサポート、オーバースクロールユーティリティなどが追加されました！
今回のバージョンでは破壊的な変更はないはずですが、前回もそう思っていました。もし何か問題が発生した場合、最初に報告してくれた方にはTailwindのシャツをプレゼントします。
新機能
アニメーションサポート
Tailwind CSS v1.6 では、新しい animation コアプラグインが追加され、すぐに使える汎用的なアニメーションが4つ含まれています。
animate-spinanimate-pinganimate-pulseanimate-bounce
<button type="button" class="bg-indigo-600 ..." disabled> <svg class="mr-3 h-5 w-5 animate-spin ..." viewBox="0 0 24 24"> <!-- ... --> </svg> Processing</button>これらはすべて、tailwind.config.js テーマの animation および keyframes セクションを使用して、これまでと同様に完全にカスタマイズ可能です。
module.exports = { theme: { extend: { animation: { wiggle: "wiggle 1s ease-in-out infinite", }, keyframes: { wiggle: { "0%, 100%": { transform: "rotate(-3deg)" }, "50%": { transform: "rotate(3deg)" }, }, }, }, },};詳細およびライブデモについては、新しいアニメーションのドキュメントをご覧ください。設計上の理由の舞台裏については、プルリクエストをご確認ください。
新しい prefers-reduced-motion バリアント
新しいアニメーション機能に合わせて、prefers-reduced-motion メディア機能に基づいてCSSを条件付きで適用できる、新しい motion-safe および motion-reduce バリアントも追加しました。
これらは、トランジションおよびアニメーションユーティリティと組み合わせて、モーションに敏感なユーザーのために問題のあるモーションを無効にするのに役立ちます。
<div class="transition duration-150 ease-in-out motion-reduce:transition-none ... ..."></div>…または、モーションを明示的にオプトインして、モーションをオプトアウトしていないユーザーにのみ表示されるようにすることもできます。
<div class="duration-150 ease-in-out motion-safe:transition ... ..."></div>これらは、レスポンシブバリアントおよび疑似クラスバリアントと組み合わせることもできます。
<!-- With responsive variants --><div class="sm:motion-reduce:translate-y-0"></div><!-- With pseudo-class variants --><div class="motion-reduce:hover:translate-y-0"></div><!-- With responsive and pseudo-class variants --><div class="sm:motion-reduce:hover:translate-y-0"></div>これらは現在、デフォルトではどのユーティリティにも有効になっていませんが、tailwind.config.js ファイルの variants セクションで必要に応じて有効にできます。
module.exports = { // ... variants: { translate: ["responsive", "hover", "focus", "motion-safe", "motion-reduce"], },};詳細については、更新されたバリアントのドキュメントをご確認ください。
新しい overscroll-behavior ユーティリティ
overscroll-behavior プロパティ用の新しいユーティリティも追加しました。
これらのユーティリティを使用すると、サイトでの「スクロールチェイニング」の動作を制御し、埋め込みのスクロール可能な領域の最上部または最下部に到達したときにページ全体がスクロールされるのを防ぐことができます。
<div class="overscroll-y-contain ..."> <!-- ... --></button>現在、これはSafariではサポートされていませんが、私見では、これはプログレッシブエンハンスメントとして扱うのが妥当であり、フォールバックもかなりスムーズであるため、大きな問題ではないと考えています。
このプラグインは、tailwind.config.js ファイルで overscrollBehavior として設定できます。
module.exports = { // ... // Disabling the plugin corePlugins: { overscrollBehavior: false, }, // Customizing the enabled variants variants: { overscrollBehavior: ["responsive", "hover"], },};入力ファイルなしでCSSを生成
カスタムCSSを記述することがなく、常にこのファイルを作成することにうんざりしているなら…
@tailwind base;@tailwind components;@tailwind utilities;…朗報です！tailwindcss CLIツールを使用している場合、無駄なCSSファイルに58文字も費やす代わりに、その時間を貯蓄に回せるようになります。
CLIツールでは入力ファイル引数がオプションになったため、カスタムCSSファイルが実際に不要な場合は、このように記述できます。
npx tailwindcss build -o compiled.cssお子さんたちは、あなたが一緒に過ごせる時間が増えることに感謝するでしょう。
この記事について話し合いたいですか？ GitHubでディスカッションに参加する →