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.
Why This Matters
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.
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.
The rule
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.