Change the Focus Border color in Tailwind CSS

Question

I am using Tailwind css with my react application. I am creating a form using tailwind and want to change focus border color of my input text box in teal which is blue.

function App() {
  return (
    <div className="App">
      <main className="h-screen flex items-center justify-center">
        <form className="bg-white flex rounded-lg w-1/2">
          <div className= "flex-1 text-gray-700 p-20">
            <h1 className="text-3xl pb-2">Lets Get Started</h1>
            <p className="text-lg text-gray-500">We are herre to get you about our sdas no           bonsdcbeagufpi feqwifheqfwe</p>

            <div className='mt-6'>
              <div className="pb-4">
                <label 
                className="block text-sm pb-2" 
                htmlFor="name"
                >Name
                </label>
                <input
                className="border-2 border-gray-500 p-2 rounded-md w-1/2 focus:border-teal-500"
                 type="text" name="name" placeholder='Enter Your Name' />

              </div>
            </div>


          </div>
          <div> </div>

        </form>
      </main>
    </div>
  );
}

export default App;

I did change teal color with focus:border-teal-500 but it is not changing to teal color when I focus or click on my text box.

Answer 1

You need to:

• Set your focus color (focus:border-teal)
• Remove the default outline (focus:outline-none)
• Then set (focus:ring-0), this removes the default ring that appears around the input element when it's focused.

Answer 2

Input elements have an outline on focus by default. So your colored border is not visible.

Add focus:outline-none class to your input element to remove the outline.

<input className="border-2 border-gray-500 p-2 rounded-md w-1/2 focus:border-teal-500 focus:outline-none" type="text" name="name" placeholder='Enter Your Name' />