How to find hardcoded colors and spacing in React, Vue and Tailwind

Hardcoded values are the most common kind of design drift. In 20 well-known open-source codebases, Buoy found 2,685 hardcoded-value findings across 35,458 components (see the reports). Here is how to find them in your own code, from a quick search to a check that runs on every pull request.

Quick search with ripgrep

These searches cover the usual places literals hide. Run them from the repository root.

Hex colors in components and stylesheets

rg -n --glob '*.{tsx,jsx,vue,svelte,css,scss}' '#[0-9a-fA-F]{3,8}\b'

Tailwind arbitrary values holding a literal

rg -n '\b[a-z-]+-\[(#[0-9a-fA-F]{3,8}|[0-9.]+(px|rem))\]'

Pixel values in inline style objects

rg -n 'style=\{\{[^}]*\b[0-9]+px'

Why raw search over-reports

A search finds every literal. Many of them are correct, and counting them buries the real problems:

• Artwork. fill and stroke on SVG icons and logos are drawings, not theme colors.
• Email templates. Most email clients ignore CSS variables, so literals are required.
• Tests, stories, fixtures and Open Graph images hold values on purpose.
• Layout math. calc(100% - 2rem), 100dvh and 1px hairlines are not design decisions.
• Values that use a token, such as bg-[var(--brand)].
• Deliberate choices. A comment such as // match the OS scrollbar or a 2–3px optical nudge.

Keep them out with lint rules

• Stylelint: color-no-hex bans hex colors; declaration-property-value-disallowed-list bans literals for chosen properties; the stylelint-declaration-strict-value plugin requires variables.
• ESLint with Tailwind: tailwindcss/no-arbitrary-value from eslint-plugin-tailwindcss flags arbitrary classes.

Lint rules are strict by design: they do not know which literal equals an existing token, so they cannot suggest the fix, and they fire on the correct literals above unless you add exceptions.

A token-aware scan

A scanner that reads your tokens can tell #2563eb apart from a random blue: if --color-primary holds exactly that value, the fix is a one-line swap. Buoy does this for CSS, Sass, Tailwind, React, Vue, Svelte and Angular:

npx @buoy-design/cli drift check          # findings, each with the token to use
npx @buoy-design/cli drift check --staged # only the lines you are committing

Or paste a public GitHub URL into buoy.design/scan.

Fix in order of payoff

1. Literals that exactly equal an existing token: swap them.
2. The same literal repeated across files: add a token, then swap.
3. One-off values: check for a reason before changing them.