我有以下切换输入来自:
<div className="relative">
<input
data-testid="toggle-input-checkbox"
onChange={handleOnChange}
id={id}
type="checkbox"
className="sr-only"
checked={isChecked}
/>
<div className="base w-9 h-3.5 bg-grey-6 rounded-full shadow-inner" />
<div className="dot bg-white absolute w-5 h-5 rounded-full shadow -left-1 -top-1 transition" />
</div>
和切换.css:
input:checked ~ .base {
background-color: #46e18c;
}
input:checked ~ .dot {
transform: translateX(100%);
}
Tailwind 中有没有办法避免使用自定义类来实现所需的样式?