tailwind css change color of button on focus

Question

i have two buttons, blue and red.

i want to set when red button is clicked/focused blue button should also turn red.

how can i achieve it using tailwind css.

user_15545116 · Answer

Tailwind don't has the css combinators. Guess, you have two way to achieve this.

Create an extra css file and add this line

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);
}

You can create your own custom class with @Variants documentation, but not with a link from CDN.

Before using the CDN build, please note that many of the features that make Tailwind CSS great are not available without incorporating Tailwind into your build process. documentation

Solution with 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);




  
  BLUE


APPLY COLOR HERE

tailwind css change color of button on focus

1 Answers