Tailwind CSS：有没有办法定位下一个兄弟姐妹？

Question

我有一个带有如下标签的无线电输入。输入被隐藏，标签用于制作一个视觉上吸引人的圆圈，用户可以点击它。

<input id="choice-yes" type="radio" class="opacity-0 w-0 fixed"/>
<label for="choice-yes" class="transition  duration-500 bg-blue-300 hover:bg-blue-500 w-20 h-20 rounded-full mr-5 flex items-center align-middle justify-center">Yes</label>

当用户点击标签输入时被检查。我想弄清楚如何定位，所以我可以给标签一个不同的风格。

这可以使用下一个兄弟选择器在纯 css 中实现。

input[type="radio"]:checked + label {
  background-color: #bfb !important;
  border-color: #4c4 !important;
}

我可以改用 tailwind.css 中的类似内容吗？

Answer 1

对于那些希望实现这一点的人来说，由于引入了即时模式 (Tailwind CSS v2.1+)同级选择器变体，因此可以使用。

Answer 2

这是我为此目的编写的复杂变体（使用 tailwindcss 测试2.0.1）

// tailwind.config.js

const plugin = require("tailwindcss/plugin");

const focusedSiblingPlugin = plugin(function ({ addVariant, e }) {
  addVariant("focused-sibling", ({ container }) => {
    container.walkRules((rule) => {
      rule.selector = `:focus + .focused-sibling\\:${rule.selector.slice(1)}`;
    });
  });
});

module.exports = {
  // ...
  plugins: [focusedSiblingPlugin],
  variants: {
    extend: {
      backgroundColor: ["focused-sibling"],
    },
  },
};

Answer 3

您可以使用任意值来定位同级元素。

[&:checked+label]:bg-[#bfb]

（出于演示目的，我使用了一个复选框）

[&:checked+label]:bg-[#bfb]

Answer 4

目前 Tailwind 中还没有内置任何东西。最接近的功能是伪类变体，其中有一个“checked”前缀。但这仅适用于收音机本身。为了瞄准兄弟姐妹，您需要编写自己的复杂变体，然后您可以执行类似的操作

<input id="choice-yes" type="radio"/>
<label for="choice-yes" class="bg-gray-100 sibling-checked:bg-blue-500">Yes</label>