顺风切换输入

Question

我有以下切换输入来自：

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

和toggle.css：

input:checked ~ .base {
  background-color: #46e18c;
}

input:checked ~ .dot {
  transform: translateX(100%);
}

Tailwind 中有没有办法避免使用自定义类来实现所需的样式？

Answer 1

使用peer修饰符，像这样：

  // Add `peer` to the element which state you want to track
  <input type="checkbox" checked class="peer" />

  // Then use `peer-*` modifiers on the target element which style you want to change
  <div class="peer-checked:text-red-500">Sibling</div>

Playground link

More info in the docs as always

顺风切换输入

Tailwind toggle input

css

tailwind-css

tailwind-in-js