CSS's problems are Tailwind's problems

Original Article ↗ Hacker News Discussion ↗

Why People Like Tailwind

  • Co-locates styles with markup, avoiding “file hopping” between HTML/JSX and CSS; many say this makes debugging and iteration much faster.
  • Removes class‑naming overhead: you don’t invent semantic class names for every element, you just describe the layout/spacing/color directly.
  • Ships a strong design system by default: spacing scale, colors, radii, typography. The required config (or defaults) gives teams shared tokens and reduces design drift.
  • Atomic utilities make it obvious at a glance what styles a component has; no hunting through multiple stylesheets or fighting implicit inheritance.
  • Especially valued in teams with varying CSS skill: it constrains people into a more consistent baseline.
  • Works well when wrapped in components: the ugly class soup is hidden behind <Button> or variants.

Main Criticisms

  • Long class lists (“class spam”) are seen as noisy, hard to scan, and painful to maintain, especially when inheriting someone else’s Tailwind-heavy codebase.
  • Some argue Tailwind reintroduces inline‑style problems: duplication, lack of semantic hooks (e.g. .primary-btn), and difficulty changing a pattern globally.
  • Mixing Tailwind with other styling systems can make it harder to trace where styles come from.
  • Critics say it discourages learning CSS well and replaces it with another abstraction layer; supporters counter that Tailwind is just CSS with different names.
  • Some dislike that many Tailwind workflows still lean heavily on media queries and don’t foreground newer CSS features like clamp().

CSS, CSS‑in‑JS, and Alternatives

  • Several commenters prefer CSS Modules, BEM, or “plain” component-scoped CSS as clearer and more semantic.
  • CSS‑in‑JS is widely criticized; one camp argues libraries like vanilla‑extract (no runtime, extracted CSS) or PandaCSS give better encapsulation than Tailwind for React-style components. Others find writing styles in JS object syntax miserable.
  • Tailwind’s big unique win, many agree, is forcing or strongly encouraging centralized design tokens; SCSS could do this but didn’t make it mandatory.

Tooling, AI, and DX

  • Tailwind editor plugins (LSP, autocomplete, diagnostics) mitigate misspellings and overlapping utilities.
  • Several people say LLMs are particularly good at generating Tailwind UIs, which reinforces its popularity; others report better results asking AI to output clean vanilla CSS instead.
  • There is disagreement over performance: some cite atomic CSS wins and compression, others point to large unused CSS bundles and heavier DevTools experiences.