HeadlinesBriefing favicon HeadlinesBriefing.com

Why I Don't Recommend Tailwind CSS

Hacker News •
×

Tailwind CSS is a highly popular utility-first CSS framework that helps developers quickly build user interfaces without deep design knowledge. It standardizes spacing, colors, and sizing while enforcing a methodology of composing complex layouts from simple utility classes. Despite its benefits and extensive documentation, the author argues against using Tailwind CSS in medium to large projects.

The first issue is the learning curve. Developers must memorize or constantly reference a vast number of utility classes. While autocomplete and documentation help, initial development slows down significantly. Mixing custom classes with Tailwind's adds further complexity.

Second, Tailwind disrupts the traditional separation of structure (HTML) and design (CSS). Although creator Adam Wathan argues that coupling shifts rather than disappears, this trade-off only makes sense in component-based frameworks like React or Vue, not in server-rendered applications with classic templates.

Third, Tailwind's naming conventions are inconsistent and unintuitive. Classes like `items-center`, `justify-center`, and `text-center` lack clear patterns, making them harder to remember and distinguish.

Fourth, while Tailwind promotes design consistency through its system, arbitrary values (e.g., `w-[347px]`) allow developers to bypass it entirely. Discipline, not the framework, ensures consistency.

Finally, Tailwind can hinder true CSS mastery. For beginners, it creates a false sense of understanding, while experienced developers may lose touch with core CSS principles. The abstraction obscures fundamental concepts like cascade and specificity, leading to confusion when resolving style conflicts.