Tailwind CSS
What it is: Utility-first CSS framework. Adam Wathan, 2017. Replaced the “component classes” era (Bootstrap, Foundation) with class-per-style-property. ~94k GitHub stars. Backed by Tailwind Labs (paid template products fund OSS). Status: Dominant in modern frontend. Spawned shadcn/ui ecosystem (see separate note). MIT licensed. Most relevant to Locara: Reference example of a contrarian OSS framework that took years to take off, then dominated. Sustainable monetization via paid templates (UI kit, premium templates) without breaking the OSS.
Background
When Tailwind launched (2017), the conventional wisdom was “semantic CSS” — <button class="primary">, with styling defined in stylesheets. Tailwind argued the opposite: write <button class="bg-blue-500 text-white px-4 py-2 rounded"> and skip the stylesheet entirely. This was deeply controversial; “but isn’t that just inline styles?” was the dominant reaction for years.
Wathan and team kept shipping. JIT mode (2021) solved the bundle-size problem. The shadcn/ui wave (2023+) made Tailwind effectively required for modern React. By 2024 Tailwind was the default; the original criticisms had become quaint.
The business model — paid templates (Tailwind UI, Tailwind Plus, premium components) — funded full-time OSS development without breaking the framework’s openness.
Key design decisions
- Utility-first. Class per CSS property.
flex,mt-4,text-center,bg-blue-500. - Configuration-driven design tokens.
tailwind.config.jslets you customize the design system. - JIT mode (v3+) generates only used classes — file size scales to actual usage.
- Arbitrary values via brackets —
mt-[37px]for one-off cases without escape hatches. - Variant prefixes —
hover:bg-blue-700,md:px-8,dark:text-white. Stackable. - Plugins for extension — typography plugin, forms plugin, etc.
- Built with TypeScript + Rust as of recent versions.
- MIT licensed framework.
- Paid templates / UI Kit (Tailwind UI / Tailwind Plus) — premium components, funds OSS development.
- Refactor.tv / Build UIs / etc. — Adam Wathan’s video courses, additional revenue.
What worked
- Solved real pain. “I need to write CSS” became “I need to remember class names” — for many devs, a strict win.
- JIT mode killed the dominant criticism (bundle size).
- Strong opinionated design tokens. “What’s a tasteful spacing scale?” Tailwind answered.
- Persistent founder voice. Wathan blogged, talked, defended the framework relentlessly through years of skepticism.
- Paid product cleanly funds OSS. Tailwind UI doesn’t gate the framework; it’s an additive offering. Worked beautifully.
- shadcn/ui made it default. Once shadcn took off, Tailwind became required infrastructure.
- Minimum viable framework. Tailwind itself is small; it’s the design tokens and plugin system that have grown.
What failed / criticisms
- HTML soup.
<div class="flex items-center justify-between p-4 bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow ...">is real; some devs find it ugly. - Long onboarding — must learn the class vocabulary before being productive.
- Lock-in — apps that go all-in on Tailwind are hard to migrate off.
- JS-required — pure HTML projects can’t use Tailwind without a build step.
- Customization can hide complexity — extensive
tailwind.config.jssetups become their own mini-framework. - Ecosystem fragmentation — many “Tailwind-style” alternatives (Windi, UnoCSS, Panda) splintered attention briefly.
Specific learnings for Locara
- Contrarian OSS frameworks take years to win. Tailwind was widely mocked for years before it dominated. Locara may experience the same — early skepticism is normal. Don’t optimize for the first 6 months; optimize for the third year.
- One controversial choice is worth twelve safe ones. “Utility-first CSS” was a sharp opinion. Locara’s sharp opinion: “fully local, capability-bounded, signed apps.” Don’t water it down — sharpness is the differentiation.
- Solve the dominant criticism properly. Tailwind’s bundle-size problem was real until JIT mode. Whatever Locara’s biggest criticism becomes (probably “too restrictive sandbox” or “models are limited”), invest in solving it credibly, not waving it away.
- Paid premium adjacent product funds the OSS. Tailwind UI kits → Tailwind sustainability. Locara’s analogue: paid premium components / themes / app templates that fund the framework. Mac App Store apps charging is fine, but Locara could also offer “Locara Pro” templates for paying app authors.
- Founder voice is real. Adam Wathan personally argued for Tailwind for years. Locara needs a similar steady voice articulating why and how. (Tied to Tailscale, Pieter Levels, gpt-engineer notes — same theme.)
- Configuration-driven design tokens is a great pattern. Locara’s manifest as a configuration file that establishes the app’s “design tokens” (capabilities, models, profiles) is the right shape. Customizable but with strong defaults.
- Resist ecosystem fragmentation. When Tailwind clones (Windi, UnoCSS) appeared, Wathan didn’t rage; he kept shipping. The official version maintained mindshare by quality, not by hostility. Locara should similarly tolerate alternative runtimes / forks rather than fighting them.
- The OSS is the marketing. Tailwind didn’t pay for ads — the framework’s existence and quality were the marketing. Same model for Locara.
- The framework + ecosystem flywheel. Tailwind alone was useful; Tailwind + shadcn became unstoppable. Locara analogue: framework + a vibrant component/registry ecosystem. Plan for the flywheel, don’t expect just the framework to carry adoption.
References
- https://tailwindcss.com/
- https://github.com/tailwindlabs/tailwindcss
- https://tailwindui.com/ / https://tailwindplus.com/
- Adam Wathan blog & podcast
- “Why I don’t use Tailwind CSS” / “Tailwind is great” debate articles (2017–2022)