Vanilla JavaScript support for Tailwind Plus

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

Tachyons CSS was also around at the same time but Tailwind had simpler naming conventions so instead of `br4` you had `rounded-lg`.

1. https://tachyons.io/

Dont’t forget Tailwind is popular because people can copy paste chunks of HTML. Selling premade HTML is how Tailwind is funded.

It is also pretty good configurable utility framework but that is secondary and new version 4 is worse at customisation.

So people are moving to https://unocss.dev/ with tailwind naming conventions.