Use Tailwind's responsive prefixes (sm:, md:, lg:) and theme tokens instead of arbitrary pixel values. Arbitrary values ([w-347px]) bypass the design system, creating inconsistent spacing/sizing that doesn't adapt to different screen sizes.
Arbitrary pixel values bypass Tailwind's design system, creating one-off measurements that do not participate in responsive breakpoints. The result is layouts that look correct on the developer's screen but break on mobile, tablet, or ultrawide monitors — and each arbitrary value must be individually debugged.
BeforeMerge scans your pull requests against this rule and 4+ others. Get actionable feedback before code ships.
Tailwind's design tokens (spacing scale, color palette, breakpoints) exist to enforce consistency. When you use arbitrary values like w-[347px] or mt-[13px], you bypass this system entirely. The value does not participate in the responsive design system, does not scale with the spacing scale, and cannot be updated by changing a theme token.
The practical impact is layouts that look pixel-perfect on the developer's 1440px monitor but break on mobile (375px), tablet (768px), or ultrawide (2560px) screens. Each arbitrary value creates a potential breakpoint where the layout fails.
Using Tailwind's responsive prefixes (sm:, md:, lg:) and theme tokens ensures your layout adapts consistently across all screen sizes and can be updated globally by changing theme configuration.
Use Tailwind's built-in spacing scale, color tokens, and responsive prefixes instead of arbitrary values. If a design requires a value not in the theme, add it to tailwind.config rather than using bracket notation.
// Arbitrary values that bypass the design system
<div className="w-[347px] mt-[13px] p-[22px] text-[#1a2b3c]">
<img className="w-[120px] h-[120px]" />
<p className="text-[15px] leading-[1.4]">Content</p>
</div>// Theme tokens with responsive prefixes
<div className="w-full md:w-96 mt-3 p-6 text-gray-800">
<img className="w-28 h-28 md:w-32 md:h-32" />
<p className="text-sm leading-relaxed">Content</p>
</div>Search for bracket notation in class names:
grep -rn '\[.*px\]\|\[.*rem\]\|\[#' --include="*.tsx" --include="*.jsx"w-[348px] becomes w-96 which is 384px)tailwind.config.ts under theme.extend