Moving away from Tailwind, and learning to structure my CSS

Original Article ↗ Hacker News Discussion ↗

Tailwind vs “Plain” CSS

  • Many argue Tailwind speeds up development, keeps styles close to components, avoids naming CSS classes, and reduces cascade bugs and style collisions.
  • Critics say it creates unreadable “class soup,” violates DRY, and re‑introduces inline-style problems under a new syntax.
  • Some feel Tailwind solves problems caused by poor CSS discipline; others counter that large CSS codebases are inherently hard to manage and Tailwind’s constraints help.

Semantic HTML & Accessibility

  • Several posts stress starting from semantic HTML and accessibility, then layering CSS. Tailwind is seen as encouraging “CSS‑first” thinking and extra divs.
  • Others respond that Tailwind doesn’t force bad HTML; misuse and “divitis” predate Tailwind and can happen with any tool.
  • Strong disagreement over how much Tailwind ergonomically nudges people toward non-semantic markup and ARIA-heavy patterns.

Separation of Concerns & Component Scoping

  • One camp views Tailwind as breaking separation of concerns by pushing style into markup.
  • Another camp argues HTML+CSS are the same “presentation concern” and that locality of behavior at component level matters more than file separation.
  • Frameworks like Svelte, Vue SFCs, Angular, CSS Modules, styled-components, etc., are cited as ways to get scoped, component-level CSS without Tailwind.

Learning CSS vs. Framework Dependence

  • Some see Tailwind popularity as evidence most devs never learned CSS (cascade, specificity, architecture patterns like BEM/SMACSS/ITCSS/CUBE).
  • Others admit they don’t want to invest heavily in CSS; Tailwind is “good enough,” and time is better spent on backend, data modeling, or business logic.
  • Debate over whether not learning accessibility and CSS is “lazy” or just rational prioritization.

Alternatives and Hybrid Approaches

  • Mentioned alternatives: Pico/Blades, Tachyons/Tachyonsneo, Frankenstyle, Open Props, CSS Modules, ITCSS, SMACSS, component-scoped CSS in Astro/Svelte/Vue.
  • Some use a hybrid: Tailwind utilities plus scoped CSS via @apply, or Tailwind only for utilities and layout, with traditional CSS for higher-level components.

AI / LLM Angle

  • Some claim LLMs work especially well with Tailwind because classes are small, composable tokens and require no global stylesheet reasoning.
  • Others argue AI also makes writing and refactoring regular CSS easier, weakening Tailwind’s advantage.