In a scenario such as tabs with 3 or more tabs, all tabs would need to have the group class for all tab buttons.

However, this starts to make the class attribute more bloated than it already could be in TailwindCSS.

So, a solution is either:

1. Simply let the class attribute get bloated from multiconditional animations like Tabs
2. Create more logic for some kind of class called main-group-anim:[unique_id] where a default like from-anim:hidden and to-anim:block could be applied in a broad stroke where the button overrides the default of from-anim:hidden or something.

Option number 2 would only work for Tabs and Tab-like use-cases. Option number 1 would be a lot more versatile. In that sense, I tend to favor Option 1. On the other hand, Option 2 is a sort-of syntax sugar that would make use cases like Tabs a lot less annoying to implement.

I will think about this.

The issue #2 mentioned syntax sugar. It would definitely be nice to have a toggle-anim if simply toggling to and from a certain state. It may even serve as a better solution for the original existence of #2 in the first place.

Whether it does or not, though, #2 does at least reveal if/else changes need to be solved at some point for more complex use-cases than Tabs.

When animating an SVG, I run into the error:
Uncaught TypeError: element.className.split is not a function

Fix:

function animateElement(element) {
  let classNames = null;
  if (element.tagName === 'svg'){
    classNames = element.className.baseVal.split(' ');
  } else {
    classNames = element.className.split(' ');
  }
  let fromClasses = [], toClasses = [];

  // Extract 'from' and 'to' classes
  classNames.forEach(name => {
    if (name.startsWith('from-anim:')) fromClasses.push(name.slice(10)); // remove 'from-anim:'
    if (name.startsWith('to-anim:')) toClasses.push(name.slice(8)); // remove 'to-anim:'
  });

  // Toggle classes
  fromClasses.forEach((fromClass, index) => {
    if (element.classList.contains(fromClass)) {
      element.classList.remove(fromClass);
      element.classList.add(toClasses[index]);
    } else {
      element.classList.remove(toClasses[index]);
      element.classList.add(fromClass);
    }
  });
}

I will add this to the next release.