如何使用Tailwind CSS实现点击/聚焦红按钮时蓝按钮同步变红

你可以用Tailwind自带的peer兄弟节点状态选择器实现这个需求，不需要额外写JS代码，步骤如下：

• 给红色按钮添加peer类，标记它为状态触发源
• 给蓝色按钮添加peer-focus:bg-red-400（对应红色按钮聚焦时的样式）、peer-active:bg-red-400（对应红色按钮点击激活时的样式）类即可，如果你需要红色按钮聚焦时蓝色按钮的颜色和红色按钮聚焦色保持一致，把对应类改为peer-focus:bg-red-700即可

完整可运行代码 #

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>

<button class="peer focus:bg-red-700 bg-red-400 font-bold px-4 py-4 rounded-lg">
RED
</button>

<button class="bg-blue-400 peer-focus:bg-red-700 peer-active:bg-red-400 font-bold px-4 py-4 rounded-lg">
BLUE
</button>

内容的提问来源于stack exchange，提问作者Fayakon