Skip to content

Rule · Lint

Many arbitrary colors / pixel values bypass the design tokens

lint/tw-arbitrary-sprawlinfovoid lintupdated

Why it matters

text-[#a1a1aa], p-[13px] and rounded-[7px] scattered through components drift from the token scale: dark mode can't retheme them, spacing stops aligning to the grid and the palette grows one-off shades.

How to fix it

Map repeated values to semantic tokens in @theme (--color-fg-muted, --spacing-*) and use the generated utilities. Keep arbitrary values for true one-offs.

Example

css
@theme { --color-fg-muted: oklch(0.72 0.01 275); }
tsx
<p className="text-fg-muted" />  // not text-[#a1a1aa]

References

void lint reports 67 rules in this category. Static source checks with no browser: Tailwind v4 silent failures, Next.js 16 API traps, React render-body bugs, accessibility markup, SEO files and motion hygiene.