Vanilla JavaScript support for Tailwind Plus

Oh yeah, when I open a typical big project with Tailwind I always love to see some:

  <div class="group relative w-full max-w-md mx-auto bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-lg p-6 md:p-8 transition-all duration-300 hover:shadow-xl hover:border-blue-500 dark:hover:border-blue-400">
  <div class="flex items-center justify-between mb-4">
    <h3 class="text-lg sm:text-xl font-semibold text-gray-800 dark:text-white tracking-tight group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">Team Settings</h3>
  </div>
  <p class="text-sm sm:text-base text-gray-600 dark:text-gray-400 leading-relaxed mb-6">Manage your team permissions, invites, roles, and integrations here. Changes apply instantly across all team workspaces.</p>
  <div class="flex flex-col sm:flex-row gap-4 sm:justify-end">
    <button class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-md transition-colors">Cancel</button>
    <button class="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-300 transition-all duration-150">Save Changes</button>
    </div>
  </div>

I just can't fathom how someone can look at this and think "yeahhhh thats some good clean code". How did tailwind get so popular? Learn plain CSS. It's really good now

In real projects I typically group the classes in a way that makes it easier to read, something like this:

    <div class={tw(
      "block",
      "transform transition-all",
      "bg-white ring-1 ring-black/5 rounded-xl shadow-2xl",

      "max-w-3xl mx-auto overflow-hidden",

      "group-data-closed/dialog:opacity-0",
      "group-data-closed/dialog:scale-95",

      "group-data-enter/dialog:duration-300",
      "group-data-enter/dialog:ease-out",

      "group-data-leave/dialog:duration-200",
      "group-data-leave/dialog:ease-in"
    )}>
        ...
    </div>

I have a feeling that Tailwind started with a good intention to be a utility classes CSS framework, akin to “Bourbon on Steroids”, but people began to accept and use their prototype/sample/example codes way better than they had intended, and they ran with it.

I stumbled on Tailwind in 2018 and introduced it to a team looking to revamp a pretty massive project. I remember that the initial proposal I made was to treat it like Bourbon[1] and write classes that build on Tailwind’s utilities. That way, you can still have `.button`, `.button-primary`, and `.button-primary__accent` etc without the cryptic classes in the HTML.

However, after reading Tailwind, the team found it much easier to write the pre-built classes and stack them as they progressed. And it worked; if I don’t care about how the code is written, things were consistent. It reminds me of “Pixel Perfection” before the responsive design era, when things looked as designed in Photoshop and printed for clients during presentations.

1. https://www.bourbon.io

We actually ended up adding the custom animation-specific data props to all dialog specific custom elements before the release, so the group-*/dialog is no longer necessary but I forgot to update the code in the post.

I doubt that changes your mind, though.

I came to comment that at least something good happened to the otherwise cursed project... but you made me reconsider.

Not to mention that for every class here there is also definition in CSS that client needs to download.

It's like Forth and CSS had some kind of hideous offspring.

This has been soooooooo long in the making, i remember playing with webcomponents for personal stuff years ago when i didn't care about compat. Good to see mainstream libraries finally picking it up

12 years I’ve been saying this… 12, damn, years. React graduates look at me crazy. Angular devs say it’s not needed anyway. Svelte bros say get bent. I’m so happy that someone is paying attention.

You don’t need a shadow dom, you don’t need rerendering of everything when a simple value changes. You simply need web components and scoped js/ts with vite or whatever rollup you use.

I remember toying with Polymer circa 2014, for some reason the word "transclusion" jumps into my mind, I remember being excited about it at the time. I barely remember what it means today though.

We use web components at the hook for my company's advertising code but I've found them pretty thoroughly disappointing, personally. They make it simple to trigger code execution but their API isn't really that good

Put simply: if you’re using something like React, Vue, Svelte, whatever, then Web Components are strict overhead in terms of bundle size and runtime overhead. And when there’s impedance mismatch between the two worlds, which I hear is particularly common in React (can’t attest it personally, I don’t use React), you have to compromise on functionality or ergonomics, or else do fancier bindings, at which point why even bother with Web Components?

It will also commonly not play nicely with some more advanced aspects of the frameworks, like server-side rendering will probably suffer (depending on how exactly things are done).

In a world where React is dominant and you’re wanting to use React yourself, targeting Web Components just doesn’t make sense.

Then “headless” makes it worse. The more comprehensive implementations have a lot of overhead.

Worried about money? They are already rich beyond their wildest dreams. They are, reasonably, excited about growing and expanding and building a company that does much more, but that is not driven by a need for money, it is driven by their ambition.

edit: I can’t speak for Adam etc., this is just my impression. My impression is that they want to build a business of which tailwind (the open source project) is one part. I think that regardless of money in the bank they would want to have revenue generating projects. Laravel is a good comparable.

Fwiw I feel like their components are something I'd be less likely to want to pay for now that you can generate tailwind components so easily with ai. I guess now that I think of it I actually paid for them back when it was called Tailwind UI, but instead of using them I'm just telling claude to generate a UI for me, which has the advantage that there's no licensing issues. It'll be interesting to see how their business does going forward

> Kind of like how Jeff Bezos threw a bunch of money at 37signals

Honestly, I kinda feel like 37Signals would have been better off with the founders having someone to report to...

The “full Tailwind experience” is already freely available. What “lost opportunities for deep integration” is a frontend CSS framework missing?

Tailwind Plus (the commercial product) is like buying an off-the-shelf template. It’s just a collection of themes and pre-built components — useful for devs who want to get started quickly on a project, but it’s cookie-cutter and can easily be replicated by anyone with Tailwind itself.

> There are so many lost opportunities for deep integration with other projects.

What kind of integrations are you thinking of?

I think you are confused? Tailwind is already free and open source? These are just components they sale that are pre-made to save you time. It doesn’t take away much at all from the full experience?

This is Vue support.

With so many frameworks out there it's infeasible to build custom wrappers for them all. With web components they can build once, and work everywhere. It's only up to the frameworks to make sure they have great web components support (which just means great HTML support).

Vue has great web component support. Even React 19 (finally!) does.

Web components are a mess but this is a great application of them: shipping reusable components that work in all frameworks. It's the one and only killer application of web components.

Frankly I'm surprised they're marketing this as "for vanilla javascript" and not as a "now supports all frameworks" type positioning.

They also had a figma design library that went away. Kinda silly if you want to get designers on the same page.

It’s tailwindcss for a reason

Tailwind Plus is a paid collection of UI components and templates.

TailwindCSS itself is meant to be nothing more than a styling tool, like Bootstrap...

Thanks! It's a paid feature because we just spent around $250,000 developing the library. Couldn't have built it if we were just going to give it away and maintain it forever for free, our engineers are talented people and deservingly well-paid.

Another hilariously paid feature is https://sso.tax/

It's funny because they're unintuitive to their end users. However, that is deliberate - they are looking for a decision point that comes after, but not too long after, devs have heavily invested in the product.

Yeah this seems like an odd thing to paywall. In the web dev world where everything is free, it's a pretty crazy ask to ask people to tie themselves to a UI framework where I guess you're forever paying a subscription just to continue using the framework?

It's like putting if postgres expected you to pay them a monthly fee.

edit: I see now their pricing is one-time perpetual access. Still, I'm genuinely curious how well this model works.