入力欄を入力していて、フォーカスが当たった時に黒く太い枠線になる。
どうせなら好きな色に変えたい時もありますよね。
なので、フォーカスが当たった時にだけ枠線の色を変えようと思う。
https://tailwindcss.com/docs/hover-focus-and-other-states#required-and-disabled
ここの 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については下記参照。
https://tailwindcss.com/docs/box-shadow#setting-the-ring-color
原因はこれだった 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-4 focus:outline-teal-300 を追加するだけで、上記のようにきれいな枠線が表示されました。
outline-4にしたのは、枠線が思ったよりも細かったから。
枠線の正体は outline だったってことですね。
勉強になりました。