Tailwindのtextareaのfocusで勝手にborder枠線が青色の太線がついてしまう問題。
調べると方法はいろいろでTailwindの初期設定いじったりstyleかいたり面倒そうなうえに、人によっては解決していない。
Stackoverflowでもかなり話題になっている様子スレッドや、反応が多い。
で、自分も真似しても治らなかった。でも実は自分は過去にフォーム作成中にこのような問題にあたって解決していたのでその時のコードを見た。
そのこと忘れて調べる時間がかかった。簡単なミスで修正できるとおもったけど面倒だったので今後思い出せるようにメモ
The problem of the border turning into a thick blue line on focus with Tailwind’s textarea.
Upon investigation, there are various methods to fix this, such as tweaking Tailwind’s default settings or writing custom styles, which can be cumbersome and may not work for everyone. This issue is widely discussed on Stack Overflow, with many threads and responses.
I tried several solutions, but none worked for me. However, I remembered that I had encountered and solved a similar issue in the past while creating a form. Reviewing my old code, I realized the fix was quite simple, but I had forgotten it and spent time searching again.
The solution is as follows:
“focus:outline-none focus:ring-gray-500 focus:border-gray-500”
This class combination ensures the border works as expected and changes the focus border to gray, preventing the thick blue line. You can adjust the class as needed.
From my previous research, I found that the focus border actually overlaps another border or box, causing the thick blue line to appear. Simply using border-none does not work, so applying the above fix might help those who encounter this issue.
