[css] tailwind로 input focus색상 변경하기

 

기본 테두리는 검정색이고, 주변색상이랑 맞춰서 보이게 하고 싶은데

어떻게 해야될지 찾아본 김에 메모

 

<input
    ....
    type="text"
    className="focus:ring-2 focus:ring-inset focus:ring-main-color focus:outline-none"
    placeholder="Enter your ID"
/>

 

focus:ring-2 focus:ring-inset focus:ring-#여기에색상 focus:outline-none

 

이거 추가해주면 됨

focus 시에 ring 추가하고, 안 쪽으로 추가하고 

그렇게 까지만 하면 outline 검정색이 그대로 보이기 때문에 none 처리