TailwindCSS - 选中单选按钮时更改标签答案

【问题标题】：TailwindCSS - Change Label When Radio Button CheckedTailwindCSS - 选中单选按钮时更改标签
【发布时间】：2021-04-23 07:57:09
【问题描述】：

我看到 TailwindCSS checked: 变体可以启用以在选中时更改输入元素，但是如何在选中时更改输入的标签？

这是相关的 Tailwind CSS docs。

下面的示例代码。

启用tailwind.config.js 中的变体后，将checked:bg-green-300 放在div 或标签中不起作用。它只在输入中起作用。

<div>
  <label>
    <input checked type="radio" name="option1" id="option1" className="hidden" />
    <div>option1</div>
  </label>
  <label>
    <input checked type="radio" name="option2" id="option1" className="hidden" />
    <div>option2</div>
  </label>
</div>

【问题讨论】：

标签： radio-button tailwind-css

【解决方案1】：

编辑：随着2.2+版的发布，它内置了对名为peer的兄弟选择器变体的支持（观看更新release）

此功能仅在即时模式下可用。

<label>
    <input checked type="radio" name="option" id="option1" class="hidden peer" />
    <div class="peer-checked:bg-red-600">option1</div>
</label>

对于 2.2 以下的版本： 您需要编写自己的插件来添加新变体。更多信息here

例如，将其命名为label-checked

tailwind.config.js

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

module.exports = {
    purge: [],
    darkMode: false, // or 'media' or 'class'
    theme: {},
    variants: {
        extend: {
            backgroundColor: ['label-checked'], // you need add new variant to a property you want to extend
        },
    },
    plugins: [
        plugin(({ addVariant, e }) => {
            addVariant('label-checked', ({ modifySelectors, separator }) => {
                modifySelectors(
                    ({ className }) => {
                        const eClassName = e(`label-checked${separator}${className}`); // escape class
                        const yourSelector = 'input[type="radio"]'; // your input selector. Could be any
                        return `${yourSelector}:checked ~ .${eClassName}`; // ~ - CSS selector for siblings
                    }
                )
            })
        }),
    ],
};

此配置应该适用于下一种情况（我们扩展了 backgroundColor，因此它应该适用于 bg-color 类）：

1 - label 是包装器，它的文本应该包装在任何选择器中（在本例中为 div）

<label>
    <input checked type="radio" name="option1" id="option1" class="hidden" />
    <div class="label-checked:bg-red-600">option1</div>
</label>

2 - 标签输入后

<input checked type="radio" name="option1" id="option1" class="hidden" />
<label for="option-1" class="label-checked:bg-red-600"></label>

演示 - https://play.tailwindcss.com/SEQ4NRpPV3

【讨论】：

【解决方案2】：

按照顺风 2.2.0 使用对等类

<input type="checkbox" name="themeToggler" id="themeToggler" class="peer" />
<label for="themeToggler" class="w-10 h-10 bg-gray-400 peer-checked:bg-red-400"></label>

DEMO

【讨论】：

【解决方案3】：

Tailwind 的对等类是解决此问题的现代方法。

您可以通过向 HTML 添加两个类来添加对等行为。

将对等类添加到要观察其状态的 HTML 标记中。
将经过对等检查的类添加到同级元素，然后更改所需的行为。

查看详细示例here

【讨论】：