Skip to main content

No Inline Styles Unless Specified

Prefer Tailwind over inline styles unless specified

Source: .agents/rules/no-inline-styles.mdc

Metadata

alwaysApply: true

Content

No Inline Styles Unless Specified

Do not use inline style={{ ... }} for layout or dimensions in React/JSX.
Prefer Tailwind utility classes for width, height, spacing, colors, etc.
Use arbitrary values when needed: e.g. w-[60px], h-[18px], w-[110px].
Inline styles are only allowed when explicitly required (e.g. dynamic values from props, third-party APIs, or design specs that cannot be expressed in Tailwind).

// ❌ Avoid
<div style={{ width: 80, height: 40 }} className="animate-pulse" />
<div style={{ height: 40 }} className="flex-grow rounded-4" />

// ✅ Prefer
<div className="w-[80px] h-[40px] animate-pulse" />
<div className="h-[40px] flex-grow rounded-4" />

Metadata
Content