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.)

When using Tailwind you’re likely to use something like React components, so your actual code is more likely to look like:

  <Menu>
    <MenuButton>Dropdown button</MenuItems>
    <MenuItems>…</MenuItems>
  </Menu>

which is even better than what Bootstrap provides since you get type safety for component props (and more opportunities for customization than what Bootstrap allows)

Type safety is good, but the class soup inside the components is just abysmal. And honestly, more often than not I see it spilling out of the components and onto the page layouts.

Design tokens are the one Tailwind feature I genuinely like. Everything else – kill it with fire. Just use whatever scoped CSS your stack does (<style> in Svelte/Vue, Emotion in React?).

class soup is what tailwind is. It's terrible because is just abbreviations of css attributes which you still need to know because you'll inevitably fiddle around devtools trying things out.

The only "smart" thing about it is leaning strongly on using rem.

how can it spill out onto the page? it's inline css. The (rare) inline selectors target only descendants.

Truth is that it's winning over because it works best with LLMs. Inline soup works better than looking for styling on different files in the context of the project, so here we are.