Tailwind CSS トランジションにより、入力フィールドがフォーカスの外に拡大される

概要

Tailwind CSS を使用して、フォーカスに応じて入力フィールドの幅が拡大するレイアウトに取り組んでいます。ただし、入力フィールドが拡張されると、トランジションが完了した後は正常に見えますが、トランジション中に入力フィールドの一部が画面外になります。入力が画面外にならないように、移行をスムーズにしたいと考えています。コードの関連部分は次のとおりです。

<div class="flex justify-between">
  <span>Hello</span>
  <div class="flex gap-2">
      <div class="sm:mr-auto">
        <div class="relative">
          <input
            type="text"
            class="w-full rounded-md border border-slate-300/70 bg-white px-9 py-2 text-sm font-semibold text-black !outline-none transition-all duration-1000 ease-out placeholder:tracking-widest focus:w-96 focus:border-primary focus:ring-transparent sm:bg-transparent sm:pr-4"
            placeholder="Search..."
          />
        </div>
      </div>
    </div>
</div>

ライブデモはこちらからご覧いただけます: Tailwind Play

遷移中に入力フィールドが表示されたままになり、画面境界内に適切に配置されるように CSS を変更するにはどうすればよいですか?フレックス コンテナーで展開する要素を管理するための Tailwind CSS のベスト プラクティスはありますか?

解決策

トランジションを設定しようとしている両方のパラメータは同じ単位内にある必要があります。現在、コードでは幅がパーセント単位で指定されていますが、寸法はレム（w-96）で変更されています。したがって、w-full を w-44 などに変更する必要があります。修正されたコードを参照してください。

https://translate.google.com/translate?hl=ja&sl=en&tl=ja&u=https://play.tailwindcss.com/oBTIA8TWPq