Spacing Gotcha: Arbitrary Pixel Values

Gotcha: Mixing Tailwind's spacing scale with arbitrary pixel values frequently (e.g., `m-[3px]`, `p-[7px]`). While sometimes necessary for pixel-perfect adjustments, overdoing it can undermine the visual consistency Tailwind aims to provide. It's generally better to stick to Tailwind's predefined scale (e.g., `m-1`, `p-2`) for a more harmonious design.

Demonstrating the Issue

With Arbitrary Values (Less Consistent)

Box A: padding `p-[7px]`, margin-bottom `mb-[3px]`
Box B: padding `p-[11px]`, margin `m-[5px]`
Box C (Tailwind Scale): `p-2`, `m-1` (for comparison)

Notice how the custom `mt-[5px]` here feels slightly 'off' when next to scaled elements.

With Tailwind's Scale (More Consistent)

Box X: padding `p-2` (8px), margin-bottom `mb-1` (4px)
Box Y: padding `p-3` (12px), margin `m-1` (4px)
Box Z (Tailwind Scale): `p-2`, `m-1`

The `mt-1` here aligns perfectly with the scale.

Key Takeaway:

Try to exhaust Tailwind's spacing scale options (`m-0.5`, `m-1`, `m-1.5`, `m-2`, etc., and their `p-*` counterparts) before resorting to arbitrary values like `m-[value]`. This helps maintain the design system's integrity and visual harmony. If you find yourself using many arbitrary values, consider customizing your `tailwind.config.js` to extend the spacing scale.