テキストボックスにフォーカスが当たった時、黒く太い枠線が表示されます。
サイトによってはテーマカラーに応じて好きな色に変えたい時もありますよね。
なので、Tailwindcssを使ってフォーカスが当たった時にだけ枠線の色を変えようと思います。
↓の password のように、色が変わるのが理想としてやってみましょう。
何も指定しない場合
<form class="p-6 rounded shadow-xl dark:border dark:border-gray-300">
<label>お名前</label>
<input type="text" class="mt-1 block w-full px-3 py-2 rounded border border-gray-800" />
<label>メールアドレス</label>
<input type="email" class="mt-1 block w-full px-3 py-2 rounded border border-gray-800" />
<label>電話番号</label>
<input type="tel" class="mt-1 block w-full px-3 py-2 rounded border border-gray-800" />
</form>
まず初めに、何もクラスを指定しないで作ってみた場合。
黒く太い枠線になりましたね。
border-gray-800が指定してありますが、他の明るい色でも同じく黒い枠線で表示されます。
focus:border colorを指定した場合
<form class="p-6 rounded shadow-xl dark:border dark:border-gray-300">
<label>お名前</label>
<input type="text" class="mt-1 block w-full px-3 py-2 rounded border border-gray-800 focus:border-teal-300" />
<label>メールアドレス</label>
<input type="email" class="mt-1 block w-full px-3 py-2 rounded border border-gray-800 focus:border-teal-300" />
<label>電話番号</label>
<input type="tel" class="mt-1 block w-full px-3 py-2 rounded border border-gray-800 focus:border-teal-300" />
</form>focus:border-teal-300 を指定してみましたが、何も変わりませんでした。
普通に考えればこれで枠線の色が変わると思いますが・・・？
ring と ring-color
<form class="p-6 rounded shadow-xl dark:border dark:border-gray-300">
<label>お名前</label>
<input type="text" class="mt-1 block w-full px-3 py-2 rounded border border-gray-800 focus:border-teal-300 focus:ring-2 focus:ring-teal-300" />
<label>メールアドレス</label>
<input type="email" class="mt-1 block w-full px-3 py-2 rounded border border-gray-800 focus:border-teal-300 focus:ring-2 focus:ring-teal-300" />
<label>電話番号</label>
<input type="tel" class="mt-1 block w-full px-3 py-2 rounded border border-gray-800 focus:border-teal-300 focus:ring-2 focus:ring-teal-300" />
</form>大きな枠線として、focusにring-2、ring colorを指定しましたがそれでも反映されませんでした。
何がダメなのかわからず。
ringについては下記参照。
原因はこれ outline-none
<form class="p-6 rounded shadow-xl dark:border dark:border-gray-300">
<label>お名前</label>
<input type="text" class="mt-1 block w-full px-3 py-2 rounded border border-gray-800
focus:border-teal-300 focus:ring-2 focus:ring-teal-300 focus:outline-none" />
<label>メールアドレス</label>
<input type="email" class="mt-1 block w-full px-3 py-2 rounded border border-gray-800
focus:border-teal-300 focus:ring-2 focus:ring-teal-300 focus:outline-none" />
<label>電話番号</label>
<input type="tel" class="mt-1 block w-full px-3 py-2 rounded border border-gray-800
focus:border-teal-300 focus:ring-2 focus:ring-teal-300 focus:outline-none" />
</form>
focus:outline-none を指定したところ表示されました！
いやはや、まさか outline が影響しているとは（汗）
でも、ちょっと枠線が太いような気がしますが及第点です。
一番スマートな書き方 focus:outline
ということは、focus時にだけ outline に color を指定するのが一番きれいな書き方なのではないのかと思い清書してみました。
<form class="p-6 rounded shadow-xl dark:border dark:border-gray-300">
<label>お名前</label>
<input type="text" class="mt-1 block w-full px-3 py-2 rounded border border-gray-800
focus:outline-4 focus:outline-teal-300" />
<label>メールアドレス</label>
<input type="email" class="mt-1 block w-full px-3 py-2 rounded border border-gray-800
focus:outline-4 focus:outline-teal-300" />
<label>電話番号</label>
<input type="tel" class="mt-1 block w-full px-3 py-2 rounded border border-gray-800
focus:outline-4 focus:outline-teal-300" />
</form>
クラスは focus:outline-<number> focus:outline-<color> を追加するだけで、上記のようにきれいな枠線が表示されました。
outline-4にしたのは、枠線が思ったよりも細かったからです。
枠線の正体は outline だったってことですね。
勉強になりました。
まとめ
テキストボックス（<input>要素）のクラスに
- focus:ring-<number> focus:ring-<color> focus:outline-none
- focus:outline-<number> focus:outline-<color>
のどちらを指定してもフォーカスが当たった時に色が変わります。
この記事が参考になったら嬉しいです。