How to set dynamic width and translate using Tailwind only (no custom CSS)

[moshiur01]

Hi Tailwind team 👋,

I'm trying to create a tab indicator (like an animated underline for active tab) using Tailwind CSS only. Right now, I'm relying on custom CSS variables like this:

.active-tab-bar {
  @apply absolute bottom-[-0.8px] left-[26%] right-0 h-[2px] bg-primary-500 transition-[translate] ease-in-out duration-500 origin-left;
  width: var(--_width, 178px);
  translate: var(--_left, 0px) 0;
}

I want to avoid using custom CSS variables or inline styles — instead, I’d like to do it entirely with Tailwind classes, if possible.

Is there a recommended way in Tailwind to dynamically set width and translateX values without falling back to custom properties or inline style?

Would love any ideas, plugins, or patterns that fit well with Tailwind's philosophy.

Thanks in advance! 🙏

[wongjn]

Adam Wathan (creator of Tailwind) does seem to advocate avoiding @apply:

• https://twitter.com/adamwathan/status/1226511611592085504
• https://twitter.com/adamwathan/status/1559250403547652097
• https://x.com/adamwathan/status/1890406016291938701

Instead, consider utilizing your templating system.