[Solved] focus:outline-none not working Tailwind CSS with Laravel

Problem:

While using Tailwind CSS for my Laravel application, and want to remove the focus border on the input boxes. According to the documentation, focus:outline-none should achieve this but it is not working for me and the border still appears on focus

focus:border-none also does not fix the problem.

Solution:

You can add this css-

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

If you dont need to make border transparent you can use this-

border-none focus:ring-0

You can also use

!outline-none

or-

focus:outline-none

Thank you for reading the article. If you face any further problem feel free to ask us.