`react-doctor/no-side-tab-border`

Use a subtler accent (box-shadow inset, background gradient, or border-bottom) instead of a thick one-sided border

Category: Architecture
Severity: warn
Source: oxlint-plugin-react-doctor
Framework: global
Enabled when: always

Validation prompt

Use this to decide whether a fired diagnostic is real or a false positive.

Confirm the element has a one-sided border (borderLeft, borderRight, borderInlineStart, borderInlineEnd, or Tailwind border-l-N/border-r-N/etc) at least 3px wide (1px when border-radius > 0; 4px for Tailwind without rounded) AND the border color has chroma. Neutral grays, white, black, and transparent are skipped. False positive: established design-system active-tab indicators.

Fix prompt

Use this once validation confirms the diagnostic is real.

Use a subtler accent: box-shadow: inset 3px 0 0 var(--muted), a thin linear-gradient strip, or a 2px border-bottom for tab rows. Reserve thick side bars for editor gutters or annotation rails where they encode real meaning. See https://www.nngroup.com/articles/tabs-used-right/