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

x8goxv8g  于 2022-11-26  发布在  其他
关注(0)|答案(2)|浏览(172)

我正在使用Tailwind css与我的React应用程序。我正在使用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;

我确实改变了青色与焦点:boreder-teal-500,但它不是改变青色时,我的焦点或点击我的文本框。

x6yk4ghg

x6yk4ghg1#

我猜你是想改变边界吧?
如果是这样的话,在css中做起来就超级容易:
p{颜色:白色}

p:hover{
 color: red;
}
tzdcorbm

tzdcorbm2#

你也可以直接用tailwind来做:

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

相关问题