tailwind-css - Tailwind CSS:有没有办法定位下一个兄弟姐妹?
问题描述
我有一个带有如下标签的无线电输入。输入被隐藏,标签用于制作一个视觉上吸引人的圆圈,用户可以点击该圆圈。
<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 中的类似内容吗?
解决方案
这是我为此目的编写的一个复杂变体2.0.1
(使用 tailwindcss 测试)
// 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"],
},
},
};
推荐阅读
- google-apps-script - 为表单提交分配类别的 For 循环中的颜色行
- android - Volley,ngrok - 无法使用 Volley 向 ngrok REST api 发出发布请求
- java - 为什么数组被最后一种方法覆盖?
- antlr4 - 如何在 ANTLR4 中指定可选的尾随字符?
- api - Uber API 调用正在获取 HTTP 401 响应代码
- regex - 用于多语言标记化的稳定正则表达式或简单库?
- node.js - 如何利用 npm 审计?
- javascript - 按降序对整数的数字进行排序
- node.js - Node.js 模块导入仅在顶级文件层次结构中工作
- c# - 如何查询以获取 Azure 资源类型的友好显示名称?