Tailwind
The article critiques Tailwind CSS, arguing that its utility-first approach leads to bloated HTML, poor separation of concerns, and maintenance issues. It compares Tailwind unfavorably to traditional CSS and component-based styling methods, suggesting that while Tailwind offers speed initially, it ultimately sacrifices readability and long-term scalability.
Background
- **Tailwind CSS** is a popular "utility-first" CSS framework. Instead of writing custom CSS classes (e.g., `.button { background: blue; }`), you apply small, single-purpose utility classes directly in your HTML (e.g., `class="bg-blue-500 text-white p-4"`). Its biggest selling point is speed and consistency, and it has an unusually passionate (and vocal) community of advocates.
- **The "Tailwind vs. Vanilla CSS" debate** is one of the most divisive topics in frontend web development. Critics argue Tailwind bloats HTML, violates separation of concerns, and creates a proprietary syntax that locks developers into a framework—essentially "just writing inline styles with extra steps." Defenders claim it eliminates context-switching, enforces design-system constraints, and is far more maintainable at scale than hand-rolled CSS.
- **Why this matters:** Tailwind has become the default choice for many startups, solo developers, and the Next.js/React ecosystem. Understanding the trade-offs is relevant for anyone working on or hiring for modern web projects.