SHAD0004Avoid inline styles

Why it happens

Ordinary inline properties bypass class-based styling. The Rule checks JSX elements, unreadable style objects, hardcoded colors in custom properties, and style elements.

Fix

Use classes for styling. Pass dynamic values through CSS custom properties when needed, and use theme variables for colors.

Example

Replace an inline color with a theme class

Before

<div style={{ color: "var(--color-primary)" }}>Account settings</div>

After

<div className="text-primary">Account settings</div>

Verify the fix

Run only this rule after editing so the report stays focused on the diagnostic you are closing:

pnpm vite-doctor . --extends shadcn/strict --rules shadcn/no-inline-styles

Useful links

• Upstream docs

Related rule

• shadcn/no-inline-styles