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:boreder-teal-500 but it is not chaging teal color when I focus or click on my text box.