@shinyaz

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.

Tailwind CSS
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.

Share this post

Shinya Tahara

Shinya Tahara

Solutions Architect @ AWS

I'm a Solutions Architect at AWS, providing technical guidance primarily to financial industry customers. I share learnings about cloud architecture and AI/ML on this site.The views and opinions expressed on this site are my own and do not represent the official positions of my employer.