Question 205339 in CSS Question posted in
Some basic documentation can be found here.

Css – Change button color in Tailwind/TypeScript when button is Active

I have a Carousel Object which contains Buttons. These buttons represent the "Semester" content that is shown below (an image is provided below).

enter image description here

I want the "semester 1" button to be Dark Blue by default and when another button is clicked I want that button to Dark Blue.

At the moment I can achieve this when I add the following focus: class to the Button Component but since it’s a focus class it turn lightblue the moment I click somewhere else and the button "semseter 1" is not darkblue by default:

class="rounded-full w-64 dark:bg-blue-300 dark:hover:bg-blue-500 focus:bg-blue-500"

enter image description here

I tried adding an class="active:bg-blue-500" but it was unsuccessful.
Why doesn’t simply adding an active class won’t work and how can I make this work?

Tags:

2

Answers


  1. 0

    Tailwind’s active is about the CSS pseudo :active state and this is different from what you expect as an active button in your situation. For example, in plain JS:

    const defaultColor = 'bg-blue-300'; // Default color
const activeColor = 'bg-blue-500'; // Active color
const buttons = document.querySelectorAll('.btn'); // Select all buttons

buttons.forEach((btn) => {
  btn.addEventListener('click', () => {
    // Rest all button colors
    buttons.forEach((b) => {
      b.classList.add(defaultColor);
      b.classList.remove(activeColor);
    });
    // Add active color on the clicked button, remove default color
    btn.classList.remove(defaultColor);
    btn.classList.add(activeColor);
  });
});
    /*Used as Tailwind Library*/

.flex {
  display: flex;
}

.gap-2 {
  gap: 8px;
}

.bg-blue-300 {
  background: rgb(147 197 253);
}

.bg-blue-500 {
  background: rgb(59 130 246);
}

.text-white {
  color: rgb(255 255 255);
}
    <div class="flex gap-2">
  <button class="btn text-white bg-blue-300">Button 1</button>
  <button class="btn text-white bg-blue-300">Button 2</button>
  <button class="btn text-white bg-blue-300">Button 3</button>
</div>

    If you are using React, you’ll have to use a useState to store which button is active:

    const Buttons = () => {
  const [active, setActive] = useState('b1'); // b1 = button1, b2 = button2, etc...
  return (
    <div className="flex gap-2">
      <button
        className={`rounded-full w-64 ${active === 'b1' ? 'bg-blue-500' : 'bg-blue-300'}`}
        onClick={() => setActive('b1')}
      >Button 1</button>
      <button
        className={`rounded-full w-64 ${active === 'b2' ? 'bg-blue-500' : 'bg-blue-300'}`}
        onClick={() => setActive('b2')}
      >Button 2</button>
      <button
        className={`rounded-full w-64 ${active === 'b3' ? 'bg-blue-500' : 'bg-blue-300'}`}
        onClick={() => setActive('b3')}
      >Button 3</button>
    </div>
  );
}
    Login or Signup to reply.
  2. 0

    The pseudo class active is corresponding to when the user has an interaction with an element (in this case, when the user is clicking on the button), but once the interaction is over the pseudo class won’t be active.

    What you want cannot be done with only css, you need some javascript to add a stlye or a class to the button you clicked on (and remove those class / style on the last clicked button)

    For example if you are in vanilla js and you have three buttons with the class "navigation-buttons", what can do what you want is to add a class ‘active’ when one is clicked.

    
const buttons = document.querySelectorAll('.navigation-buttons')
buttons.forEach((button) => {
  button.addEventListener('click', () => {
    // Remove active class on all buttons
    buttons.forEach((b) => b.classList.remove('active')
    // Add active on the one clicked
    button.classList.add('active')
  });
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search