Comment by immibis
3 days ago
Can someone explain to me the advantage of writing class="bg-blue" instead of style="background-color: blue;" and why anyone ever thought they could make meaningful money from enabling the former?
3 days ago
Can someone explain to me the advantage of writing class="bg-blue" instead of style="background-color: blue;" and why anyone ever thought they could make meaningful money from enabling the former?
The advantage is in both the speed of the shorthand when transferring the CSS you know you need for a layout from your brain to the element (flex items-center gap-2 vs. display: flex; align-items: center; gap: .5rem; - just try typing them both out), plus all the stuff inline styles can't do, such as variants based on screen size, colour scheme, user preference, pseudo-classes, parent/sibling state, etc. which you can get done in one place in one file in one sitting.
The money wasn't coming from that.
I don't see a significant difference between your two examples.
Narrowing in on background color is an extreme oversimplification of what Tailwind provides. I found it to be a great tool for working with CSS, especially for layout. Business viability can be debated, but the value is way beyond what you suggested.
For your first question, IMO the purported advantage is mainly convention at scale. There's nothing inherently wrong with raw CSS in style tags or other authoring models (well, except CSS-in-JS at runtime...). Tailwind is one simple authoring model that works at scale without fuss and bikeshedding. Wrote up my experience with the advantages and disadvantages on this though a bit ago to be able to point to[1].
For the second question, depends on your definition of "meaningful" I guess. I doubt the original goal was to make money. There's OSS less prolific than Tailwind that makes money. Is it unreasonable for those projects to seek ways to compensate their projects?
[1] https://wlls.dev/blog/on-tailwind
> why anyone ever thought they could make meaningful money from enabling the former
A better question might be why buyers thought it was worth paying for that "advantage" you want explained. When buyers think a thing like that, someone will fulfill their ask.
If LLMs are eating the revenue stream, that likely gives the answer:
Buyers thought Tailwind meant they didn't have to learn or do a thing in order to achieve an outcome. And someone built a niche around that.
Is it true, and if not, why does it persist? Also not hard to explain given today's approaches to learning and the abysmal state of the ad delivery sites that used to be web search.
It's almost impossible today to find the very few sites that show the standard component lib rendered as web components with modern CSS as supported cross browser -- no single party stands to profit from making that case. You'll see it in parts from other frameworks that aren't trying to do the UI saying "our framework drives native HTML/CSS/JS/WASM" with a few examples, but that's surprisingly unlikely to find from Google with "How do I make my web app look good?" if you don't know which terms to use.
One could probably make a niche living giving modern web-native training for corporates. (Plenty firms purport to offer this, but generally don't really teach past the days of bootstrap.) Price against their recurring licensing costs, and a $10K to $30K class (the type enterprise SaaS products like Hashicorp offers for e.g. Terraform ecosystem) for modern web might even pay better than Tailwind.
Generally, though, arbitrage plays can't be expected to last unless the value-add is actual work others don't want to do, so business model decay is likely to happen to things like Tailwind that have their ideas become standards that get implemented by the browser industry (see Apple and "Sherlocking": https://appdevelopermagazine.com/sherlocked:-the-controversi...
Can you modify your style tag to make the background turn purple on a mobile device? No? Ok.
If that's your goal, you probably shouldn't call the class bg-blue? It should be bg-blue-but-purple-on-mobile. But then it's definitely so specific it's the wrong way to select a style. If you want the page background to be blue but purple on mobile, write that in your CSS with a selector of "body" instead of ".bg-blue-but-purple-on-mobile"
The point being you can't do this with inline styles: "bg-purple md:bg-blue"
3 replies →