【Laravel】Tailwind CSSでoutline-noneが効かない時の対処法

はじめに

今回はLaravelでTailwind CSSのoutline-noneが効かない時の対処法を紹介したいと思います。
自分も実装時に詰まったりして、解決方法を共有できたらいいなと思ったので、記事にさせていただきました！

対象者

この記事は下記のような人を対象にしています。

• プログラミング初学者
• 駆け出しエンジニア
• LaravelでTailwind CSSを使用している人
• どうしてもTailwind CSSで実装したい人
• outline-noneが効かなくて困っている人

結論

これで解決🤗

border-none focus:ring-0

要素にborderがある場合は、以下でも解決可能

border-transparent focus:border-transparent focus:ring-0

解説

border-none
ボーダーを非表示にします。
focus:ring-0
ボックスシャドウで作成されているアウトラインリングを0で非表示にします。
border-transparent
ボーダーが透明になるようにします。
focus:border-transparent
フォーカス時もボーダーが透明になるようにします。

おわりに

今回はLaravelでTailwind CSSのoutline-noneが効かない時の対処法を紹介させていただきました。ちょっとしたことでも、解決方法を知らないと多くの時間を調べることに費やしてしまうので、知っておいて損はないですね！

最後に記事を見てくださりありがとうございました。
誤字や脱字、コードのリファクタリングできる箇所などがありましたらコメントくださるとありがたいです!
また、いいねをしてくださると、筆者が喜びます:)