Vanilla JavaScript support for Tailwind Plus

Tailwind is fine, but I do find it humorous that they discourage wrapping up tw classes into a component class ala Bootstrap, but they wrap html up like this:

    <el-dropdown class="relative inline-block text-left">
      <button class="inline-flex w-full justify-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm ...">
        Options
      </button>
      <el-menu anchor="bottom end" popover class="w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black/5 transition transition-discrete ...">
      ...
      </el-menu>
    </el-dropdown>

Bootstrap:

    <div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle" type="button">
        Dropdown button
      </button>
      <ul class="dropdown-menu">
        ...
      </ul>
    </div>

(I realize you have full control over looks with TW, but Bootstrap and others have utility classes too for the common stuff.)

The wordiness is a common complaint but TBH it's a minor issue, I do have a growing problem with using tailwind that's hidden just behind that superficial complaint though.

px-3, py-2, bg-red-400 etc. are everywhere in tailwind code and they become more or less undocumented conventions. Technically you can configure them, but practically without unintended side effects on an existing project? And if you make extensive config changes, have you just locked yourself out of the ecosystem?

I don't use bootstrap, but from a brief look at the documentation it seems much more reasonable to diverge from defaults. Looking at themes (https://themes.getbootstrap.com/) it seems more flexible than an average tailwind setup.