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 使用 next sibling 选择器来实现。

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

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

Answer 1

Tailwind 目前没有内置任何东西。最接近的特征是 Pseudo-Class Variants of which there is a "checked" prefix. But that would only apply to the radio itself. In order to target siblings you'd need to write your own complex variant 然后你可以做类似

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

Answer 2

这是我为此写的 complex variant（使用 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

所以，我也一直在想同样的问题，自从我的 Tailwind 首次亮相以来我已经创建了自己的变体，我想我可以为您快速创建一个。

我对之前答案的问题是 class 关注的是兄弟姐妹。 class 应该附加到第一项并这样使用：

<input id="choice-yes" type="radio" class="nextOnChecked:bg-blue-500 nextOnChecked:border-blue-800"/>

variant 的代码应该类似于：

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

const nextOnChecked = plugin(function ({ addVariant, e }) {
  addVariant('nextOnChecked', ({ modifySelectors, separator }) => {
    modifySelectors(({ className }) => {
      return `.${e(`nextOnChecked${separator}${className}`)}:checked + *`;
    })
  });
});
module.exports = {
  variants: {
    extend:{
      border: ['nextOnChecked'],
      backgroundColor: ['nextOnChecked'],
    },
  },
  plugins: [
    nextOnChecked
  ],
};

这部分 .${e('nextOnChecked${separator}${className}')}:checked + * 将在本示例的上下文中使用，如下所示：

.nextOnChecked\:bg-blue-500:checked + *{
   background-color: ...;
}

这就是我构建大部分变体的方式，从更改状态的 DOM 到重新设计样式的 DOM。

Answer 4

对于这种情况，您可以使用 group-hover。

https://tailwindcss.com/docs/hover-focus-and-other-states

Answer 5

对于那些希望实现这一点的人，因为引入了即时模式 (Tailwind CSS v2.1+) sibling selector variant 可用。

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

Tailwind CSS : Is there a way to target next sibling?

tailwind-css