顺风 css 更改焦点上按钮的颜色

Question

我有两个按钮，蓝色和红色。

我想设置何时点击红色按钮/聚焦蓝色按钮也应该变成红色。

我如何使用顺风 css 实现它。

 <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/> <button class="focus:bg-red-700 bg-red-400 font-bold px-4 py-4 rounded-lg"> RED </button> <button class=" bg-blue-400 font-bold px-4 py-4 rounded-lg"> BLUE </button>

Answer 1

Tailwind 没有 css组合器。 猜猜，您有两种方法可以实现这一目标。

1. 创建一个额外的 css 文件并添加这一行

button.bg-red-400:focus ~ button.bg-blue-400 {
  background-color: rgba(185, 28, 28, 1);
}

 button.bg-red-400:focus~button.bg-blue-400 { background-color: rgba(185, 28, 28, 1); }

 <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" /> <button class="focus:bg-red-700 bg-red-400 font-bold px-4 py-4 rounded-lg">RED</button> <button class="bg-blue-400 font-bold px-4 py-4 rounded-lg">BLUE</button>

2. 您可以使用@Variants文档创建您自己的自定义类，但不能使用来自 CDN 的链接。

在使用 CDN 构建之前，请注意，如果不将 Tailwind 纳入您的构建过程，就无法使用许多使 Tailwind CSS 变得出色的功能。 文件

3. 用javascript解决

 // Select all elements with `bg-blue-400` class const blueBox = document.querySelectorAll('.bg-blue-400'); const changeColor = ev => { // Define button in the DOM const button = ev.target.closest('button'); // Check, if the button was clicked if (button) { // Chenge color in the DIVs for (const box of blueBox) { box.classList.add('bg-red-400'); box.classList.remove('bg-blue-400'); } return; } // If clicked outside, the color will switch back for (const box of blueBox) { box.classList.add('bg-blue-400'); box.classList.remove('bg-red-400'); } }; document.addEventListener('click', changeColor);

 <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" /> <div> <button class="one bg-red-400 font-bold px-4 py-4 rounded-lg">RED</button> <div class="bg-blue-400 font-bold px-4 py-4 rounded-lg">BLUE</div> </div> <div class="two bg-blue-400 font-bold px-4 py-4 rounded-lg">APPLY COLOR HERE</div>