gpt4 book ai didi

tailwind-css - 顺风 CSS : Is there a way to target next sibling?

转载 作者:行者123 更新时间:2023-12-03 15:27:19 24 4
gpt4 key购买 nike

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

<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 中的类似内容吗?

最佳答案

这是一个 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-css - 顺风 CSS : Is there a way to target next sibling?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63334626/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com