Skip to content
Gopher

ADR-017: Tailwind CSS 4 with shadcn/ui

Status: Accepted (2026-08-31)

Decision: The panel is Tailwind CSS 4 with shadcn/ui, superseding ADR-014 (CSS that we wrote). The stylesheet the project wrote is deleted. Every part of the panel is now one of these registry components:

Alert, Avatar, Badge, Button, ButtonGroup, Card, Collapsible, Dialog, Empty, Input, Item, Select, Separator, Skeleton, Spinner, Table, Toggle.

components/globals.css carries the palette and the theme.

Three things did not change, because they are not questions of style:

  • The palette. The values are Gopher’s own, measured against WCAG 2.1 level AA. They carry shadcn/ui names now; they are the same colours.
  • The layout. Container queries, not the width of the window.
  • The keyboard. The list of memberships and the list of posts keep one tab stop that the arrow keys move. A registry component cannot do this, because the list of posts removes the rows that are not on the screen. Each row is a registry component that renders as a <button>, thus useRovingFocus still owns the focus.

The registry gave the project four things it did not have before:

  • A focus trap and a lock of the scroll in the image viewer (Dialog).
  • A popup for the language setting that the width of a 360 px panel cannot clip (Select).
  • A shape for the list of memberships while Dexie opens the cache (Skeleton).
  • One grammar for a state that is empty (Empty).

This decision was itself superseded in its choice of registry by ADR-018, which does not change the framework named here.

Read the panel and the stack.