how to make tabs changing multiple class target?

[laptopmutia]

the example is only showing how to change active tab class for one target

I want it to change multiple target at once how?

the css example from tailwind give me this

<!-- Current: "border-indigo-500 text-indigo-600", Default: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300" -->
<a href="#" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 group inline-flex items-center py-4 px-1 border-b-2 font-medium text-sm">
  <!--
    Heroicon name: solid/user

    Current: "text-indigo-500", Default: "text-gray-400 group-hover:text-gray-500"
  -->
  <svg class="text-gray-400 group-hover:text-gray-500 -ml-0.5 mr-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
    <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" />
  </svg>
  <span>Invoice</span>
</a>

how to make it your tabs controller to change the <a> and <svg> class ?

[ZilvinasKucinskas]

I needed such functionality for dropdowns. I have looked through the codebase and it seems we can have only one data-dropdown-active-target and data-dropdown-active-class.

In the Flyouts Menus, TailwindUI requires both text and SVG icons to change their classes while active. Those classes need to be different as well based on the target.

@excid3 Are there any plans to support multiple items (active-targets) being active as in TailwindUI?

[excid3]

If we can figure out a good way to do it, sure. I'm not sure what it would look like off the top of my head though.

[excid3]

Best solution I can come up with for this is to create a new controller that extends the controller and adds extra targets to handle this.

import { Tabs } from "tailwindcss-stimulus-components"

export default class extends Tabs {
  static targets = ['icon']

  showTab() {
    super.showTab()
    // your additions here
  }
}