react-doctor/design-no-space-on-flex-children

Use `gap-*` on the flex/grid parent. `space-x-*` / `space-y-*` produce phantom gaps when a sibling is conditionally rendered, lose vertical spacing on wrapped lines, and don't mirror in RTL

• 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.

Fires when ONE className contains both a flex/grid display token (flex, inline-flex, grid, inline-grid — variant prefixes like md:flex are honored by stripping to the last segment) AND a space-x-N or space-y-N token. The rule does NOT flag space-* on plain block containers, even though gap is preferable there too.

Fix prompt

Use this once validation confirms the diagnostic is real.

Replace space-x-N with gap-x-N and space-y-N with gap-y-N on the parent — keep the axis suffix (bare gap-N adds the other direction silently). gap survives conditional siblings without phantom margins, mirrors correctly in RTL, and handles flex-wrap rows. https://tailwindcss.com/docs/gap

Related rules

More Architecture rules from the rules reference:

• react-doctor/design-no-three-period-ellipsis: Use the typographic ellipsis "…" (or `…`) instead of three periods — pairs with action-with-followup labels ("Rename…", "Loading…")
• react-doctor/display-name: Give each component a stable displayName so React DevTools shows a real name instead of "Unknown".
• react-doctor/forbid-component-props: Configure forbidden props per component via the `forbidComponentProps.forbid` setting.
• react-doctor/forbid-dom-props: Configure forbidden DOM props via the `forbidDomProps.forbid` setting to keep disallowed attributes off DOM nodes.
• react-doctor/forbid-elements: Replace each configured forbidden element with its sanctioned component or wrapper.