Minimize use of arbitrary values like [w-347px], [color:#1a2b3c]. Arbitrary values bypass Tailwind's design tokens, making the design system meaningless and creating one-off values that are impossible to maintain consistently.
Every arbitrary value is a design system escape hatch. When a codebase accumulates dozens of arbitrary values, the design system becomes advisory rather than enforced — spacing, colors, and sizes drift across pages, creating a visually inconsistent product that requires per-element debugging.
BeforeMerge scans your pull requests against this rule and 4+ others. Get actionable feedback before code ships.
Tailwind's value comes from its constrained design tokens: a consistent spacing scale, a curated color palette, and standardized sizing. Arbitrary values ([w-347px], [color:#1a2b3c], [text-15px]) bypass all of these constraints.
A few arbitrary values are harmless. But they compound: once one developer uses bracket notation, others follow. Within months, the codebase has dozens of one-off pixel values, hex colors outside the palette, and font sizes that do not match any design token. The design system becomes advisory rather than enforced.
The result is a visually inconsistent product where every page has slightly different spacing, colors, and sizing — differences too small to catch in code review but large enough for users to notice as a lack of polish.
Avoid arbitrary value bracket notation in Tailwind classes. Use theme tokens for spacing, colors, and sizing. If a design requires a value not in the default theme, extend the theme in tailwind.config.ts so it becomes a reusable token.
<div className="w-[347px] h-[218px] bg-[#f0f4f8] rounded-[7px]">
<h2 className="text-[22px] text-[#1a1a2e] mb-[13px]">Title</h2>
<p className="text-[15px] leading-[1.35] text-[#4a4a68]">Body text</p>
</div><div className="w-80 h-56 bg-slate-100 rounded-lg">
<h2 className="text-xl text-slate-900 mb-3">Title</h2>
<p className="text-sm leading-relaxed text-slate-600">Body text</p>
</div>Search for bracket notation in Tailwind classes:
grep -rn '\[.*px\]\|\[#[0-9a-fA-F]' --include="*.tsx" --include="*.jsx"Consider adding a custom ESLint rule or Stylelint plugin to flag arbitrary values in CI.
text-[22px] → text-xl)tailwind.config.ts under theme.extend