Jared talks with Stephen Margheim about a “missing” middle layer in modern design systems: reusable CSS affordances that sit between Tailwind utilities and full components. Stephen shares how building a no-JavaScript half-star rating input (radio buttons + labels + SVG + careful hover/layout CSS) reinforced his bias toward solving problems with the smallest toolset to avoid incidental complexity and to make solutions portable across frameworks. That philosophy leads to his critique that components are a poor vehicle for purely visual styles because they bundle structure, behavior, and aesthetics in ways that are hard to reuse—so instead, teams should name and standardize visual signals like “button” as composable classes that can apply to many semantic HTML elements. He explains how Tailwind can support this via custom utilities (@utility), tree-shaking, autocomplete, variants, and low-specificity defaults using :where(), and argues a four-layer approach—tokens → utilities → affordances → components—helps teams maintain design systems and progressively drop JavaScript as the web platform adds more native UI primitives (dialog, popover, details/name, etc.).
Links:
Tailwind: Introducing Catalyst
Tailwind docs: Functions & directives
MDN blog: Exclusive accordions with <details name>
web.dev: Interop 2026 proposals
Dead Code Podcast Links:
Jared’s Links:
Hosted on Acast. See acast.com/privacy for more information.
