顺风切换输入答案

【问题标题】：Tailwind toggle input顺风切换输入
【发布时间】：2022-01-19 00:04:02
【问题描述】：

我有以下切换输入来自：

<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 中有没有办法避免使用自定义类来实现所需的样式？

【问题讨论】：

标签： css tailwind-css tailwind-in-js

【解决方案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

【讨论】：