logo标签列表

Tailwind CSS：有没有一种方法可以定位下一个同级元素？

tailwind-css
16

我有一个带标签的单选框输入，如下所示。 输入是隐藏的，标签被用来制作一个视觉上吸引人的圆形，用户可以点击它。

我有一个类似以下的带标签的单选框输入。输入框是隐藏的，标签被用来制造一个视觉上吸引人的圆圈，用户可以在其上点击。

<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中有类似的东西可以替代吗？

7个回答
17

对于那些想要实现这一点的人，自从引入即时模式（Tailwind CSS v2.1+）同级选择器变体是可用的。

4
v3+ https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-sibling-state - Jaider
我来这里就是为了OP所问的问题，我认为这个答案是误导性的。TW在v3版本中没有使用相邻（下一个）兄弟选择器的实用程序。不同的同级实用程序可能适用于相同的目的，但它们也不使用相邻的兄弟选择器。你需要像Sanka在下面解释的那样使用[&+label]这样的东西。 - undefined
12

这是我为此目的编写的复杂变体（在 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！感谢您的解决方案！ - zauni
5

目前Tailwind没有内置此功能。最接近的功能可能是伪类变体，其中有一个"checked"前缀。但这只适用于单选按钮本身。为了针对兄弟元素进行定位，您需要编写自己的复杂变体，然后可以执行以下操作：

<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 - Chiptus
4
您可以使用任意值来定位同级元素。
[&:checked+label]:bg-[#bfb]

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

<script src="https://cdn.tailwindcss.com"></script>

<input id="choice-yes" type="checkbox" class="opacity-0 w-0 fixed [&:checked+label]:bg-[#bfb]"/>
<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>

1
谢谢！这是唯一一个在tailwindcss中使用相邻兄弟组合器（+运算符）并且不使用插件的答案。所提到的peer-*类使用了一般兄弟组合器（~运算符）。 - undefined
1
@PutziSan 我认为这是正确的答案，因为 peer-* 使用 ~ 可能会同时影响到相同时间使用的元素，而使用 + 只会影响到下一个元素。 - undefined
2
1
不鼓励仅提供链接的答案，因为链接可能会中断导致答案无意义。请总结链接信息以帮助未来的读者。仅链接的答案可能会被删除。 - DaveL17
1
自Tailwind v2.1以来，JIT引擎支持peer变体，它与group类似，但基于直接兄弟状态。例如：

<input id="choice-yes" type="radio" class="peer opacity-0 w-0 fixed"/>

<label for="choice-yes" class="peer-checked:bg-[#bfb] border peer-checked:border-[#4c4] 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>

来源：https://v2.tailwindcss.com/docs/just-in-time-mode#sibling-selector-variants

1

所以，我一直在思考同样的问题，自从我首次使用Tailwind以来，我已经创建了自己的变体，因此我想为您创建一个快速的变体。

我对之前答案的问题在于类别是针对兄弟元素的。该类别应附加到第一个项目并按如下方式使用：

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

变体的代码应该是这样的：

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。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接