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

Posted 2023-03-06

【中文标题】Tailwind CSS：有没有办法定位下一个兄弟姐妹？

【英文标题】：Tailwind CSS : Is there a way to target next sibling?

【发布时间】：2020-11-29 17:30:00

【问题描述】：

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

<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 中是否有类似的东西我可以使用？

【参考方案1】：

目前 Tailwind 中没有内置任何内容。最接近的特征是Pseudo-Class Variants，其中有一个“已检查”前缀。但这仅适用于收音机本身。为了定位兄弟姐妹，您需要编写自己的complex variant，然后您可以执行类似的操作

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

【讨论】：

我想知道我们是否可以有一个兄弟变种：sibling:checked:bg-blue-500

【参考方案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"],
    ,
  ,
;

【讨论】：

也适用于 Tailwind 1.9！感谢您的解决方案！

【参考方案3】：

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

我对先前答案的问题是该课程专注于兄弟姐妹。该类应附加到第一项并按原样使用：

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

【参考方案4】：

您可以在这种情况下使用 group-hover。

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

【讨论】：

不鼓励仅链接答案，因为链接可能会中断，使答案变得毫无意义。请总结链接信息以帮助未来的读者。仅链接的答案可能会被删除。

【参考方案5】：

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