---
title: "Many arbitrary colors / pixel values bypass the design tokens (lint/tw-arbitrary-sprawl)"
description: "lint/tw-arbitrary-sprawl: `text-[#a1a1aa]`, `p-[13px]` and `rounded-[7px]` scattered through components drift from the token scale: dark mode can't retheme…"
canonical: https://void-design.vercel.app/rules/lint/tw-arbitrary-sprawl
lastModified: 2026-09-16
---

# Many arbitrary colors / pixel values bypass the design tokens

`lint/tw-arbitrary-sprawl` · severity **info** · category Lint · detected by `void lint` and `void audit`

## 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

- https://tailwindcss.com/docs/theme
- https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values

## More lint rules

`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.

- `tw-js-config-ignored` `tailwind.config.*` exists but the CSS entry has no `@config` — [lint/tw-js-config-ignored](https://void-design.vercel.app/rules/lint/tw-js-config-ignored)
- `tw-dark-variant-os` `dark:` follows the OS, but the app toggles themes with a class/attribute — [lint/tw-dark-variant-os](https://void-design.vercel.app/rules/lint/tw-dark-variant-os)
- `tw-v3-renamed` Utility whose meaning changed between Tailwind v3 and v4 — [lint/tw-v3-renamed](https://void-design.vercel.app/rules/lint/tw-v3-renamed)
- `tw-important-soup` Many `!important` utilities in one file — [lint/tw-important-soup](https://void-design.vercel.app/rules/lint/tw-important-soup)
- `page-level-use-client` `"use client"` at the top of a page or layout — [lint/page-level-use-client](https://void-design.vercel.app/rules/lint/page-level-use-client)
- `heavy-import` Heavy dependency imported into client code — [lint/heavy-import](https://void-design.vercel.app/rules/lint/heavy-import)
- `img-raw` Raw `<img>` in a Next.js app — [lint/img-raw](https://void-design.vercel.app/rules/lint/img-raw)
- `img-missing-dimensions` Image without width/height (or fill / aspect-ratio) — [lint/img-missing-dimensions](https://void-design.vercel.app/rules/lint/img-missing-dimensions)

Detected by `void lint` and `void audit`. Explain it in a terminal: `void rules lint/tw-arbitrary-sprawl`