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