【TailwindCSS】補完時のフォーム背景色を変更する方法【Chrome】

はじめに

Chromeで補完機能を使用すると以下のようにフォームの背景色が青色になります。

これをTailwindCSSを使用して変更する方法について記載します。

変更方法

inputのclassに次のように記述することで補完時の背景色を変更できます。

<input class="autofill:shadow-[inset_0_0_0px_1000px_white]" />

上記のように設定すると補完時の背景色は白になります。

参考