更改 Tailwind 中的焦点边框颜色 CSS

Question

我在我的 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 改变了蓝绿色，但是当我聚焦或点击我的文本框时它并没有改变蓝绿色。

Answer 1

你也可以直接用 tailwind 来做：

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

Answer 2

默认情况下，输入元素在焦点上有轮廓。 所以你的彩色边框是不可见的。

将focus:outline-none class 添加到您的输入元素以删除轮廓。

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

Answer 3

输入不同。 使用输入时，您需要更改轮廓，而不是边框。

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

Answer 4

叫做Focus:outline，试试focus:outline--gray-500

Answer 5

我假设你想改变边界？

如果是这样，在 css 中非常容易做到：

p{ 颜色：白色 }

p:hover{
 color: red;
}