Use Tailwind v4 arbitrary values to get font sizes between text-sm and text-base
1 min read
While tweaking the font size for a series navigation component, text-sm (14px) was too small and text-base (16px) was too large. Tailwind v4's default scale has no step in between.
The fix is arbitrary values.
text-[0.9375rem] → 15px
text-[0.875rem] → 14px (same as text-sm)
text-[1rem] → 16px (same as text-base)Using rem ensures it respects the user's browser font size setting. In Tailwind v4, the [] syntax works without a tailwind.config.ts, making it easy to fill gaps in the design token scale.
