Tailwindcss + Checkbox

export default function CheckBox(props: IProps) {
  const [checked, setChecked] = useState(props.checked);

  const _onChange = () => { setChecked(!checked); }

  return (
      <input
          type="checkbox"
          checked={checked}
          onChange={_onChange}
          className="w-5 h-5 text-indigo-600 bg-white border-gray-300 rounded-md focus:ring-indigo-500 
                    checked:bg-indigo-600 checked:border-transparent focus:outline-none cursor-pointer accent-indigo-600"
        />
  );
}

 

체크박스의 색상이 변경되지 않는 문제

Tailwind CSS에서 <input type="checkbox"> 요소는 기본 스타일이 브라우저에 의해 지정되어 있어서, text-color-* 같은 색상 클래스가 적용되지 않는다.

 

해결방법

accent-color-*을 추가하면 체크박스의 체크 색상을 변경할 수 있다.