我在我的react應用程序中使用了Tailwind css。我正在使用tailwind創建一個表單，并希望將我的輸入文本框的焦點邊框顏色改為藍綠色，即藍色。

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;

我確實用focus:boreder-teal-500改變了藍綠色，但是當我聚焦或點擊我的文本框時，藍綠色沒有改變。

默認情況下，輸入元素在焦點上有一個輪廓。所以你的彩色邊框是不可見的。

將focus:outline-none類添加到input元素中以移除輪廓。

<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' />

你也可以直接用順風來做:

<div className="focus:border-blue border-2 border-solid" />

您需要:

設置你的焦點顏色(焦點:邊框-藍綠色) 移除默認輪廓(焦點:輪廓-無) 然后設置(focus:ring-0)，這將刪除當輸入元素被聚焦時出現在輸入元素周圍的默認環。 輸入不同。處理輸入時，您需要更改輪廓，而不是邊框。

RK007響應是另一種解決方法，但需要一些額外的步驟才能達到相同的效果，IMO。

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

叫做聚焦:輪廓，試試聚焦:輪廓-灰色-500

我猜你想改變邊界？

如果是這樣的話，在css中做起來超級簡單:

p{ 顏色:白色 }

p:hover{
 color: red;
}