react-doctor/no-gradient-text

Use solid text colors for readability. If you need emphasis, use font weight, size, or a distinct color instead of gradients

• 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 either sets backgroundClip (or WebkitBackgroundClip) to 'text' AND has background or backgroundImage containing a gradient() function, or uses both bg-clip-text and bg-gradient-to-* Tailwind utilities together. Loading-skeleton shimmer elements that contain no readable text are an acceptable exception.

Fix prompt

Use this once validation confirms the diagnostic is real.

Replace with a solid color value. For emphasis, prefer increased font-weight, larger size, or a brand accent color over a gradient fill. Reserve gradient text for at most one display headline per page; never apply it to body copy, links, or anything users need to read carefully. See https://web.dev/learn/design/typography

Related rules

More Architecture rules from the rules reference:

• react-doctor/no-inline-exhaustive-style: Move styles to a CSS class, CSS module, Tailwind utilities, or a styled component — inline objects with many properties hurt readability and create new references every render
• react-doctor/no-many-boolean-props: Split into compound components or named variants: `<Button.Primary />`, `<DialogConfirm />` instead of stacking `isPrimary`, `isConfirm` flags
• react-doctor/no-multi-comp: Move secondary components into their own files.
• react-doctor/no-polymorphic-children: Expose explicit subcomponents (`<Button.Text>`, `<Button.Icon>`) so consumers don't need to switch on `typeof children`
• react-doctor/no-prop-types: Move propTypes to TypeScript types: `type Props = { value: number }; function Component(props: Props)` — React 19 ignores runtime propTypes