Tailwind CSS Unit Reference
Understand how Tailwind CSS sizing classes map to pixel and rem values for precise implementation.
Context (affects rem/em/vw/vh/%)
Common pixel sizes → rem (at 16px base)
Tailwind CSS tips
Tailwind's default base is 16px. Its 4-point spacing system means 1 unit = 0.25rem = 4px. Set the base to 16 and enter 4 to see text-xs: 0.75rem = 12px.
Tailwind text sizes: text-xs (12px/0.75rem), text-sm (14px/0.875rem), text-base (16px/1rem), text-lg (18px/1.125rem), text-xl (20px/1.25rem).
Tailwind spacing: p-4 = 1rem = 16px, p-6 = 1.5rem = 24px, p-8 = 2rem = 32px. Use this tool to verify any class's pixel equivalent quickly.
When extending Tailwind with custom sizes in tailwind.config.js, define them in rem for consistency: fontSize: { "2xs": "0.625rem" } = 10px at 16px base.
එය ක්රියා කරන්නේ කෙසේද
අපගේ දේ ඇයි භාවිතා කරන්නේ?
Also check out…
PX to REM for Web Development
Convert pixel values to rem units for scalable, ac
CSS Units for Responsive Design
Convert between px, vw, vh, and % to build layouts
Convert Design Specs to CSS Units
Translate Figma or Sketch pixel values to rem/em u
Convert CSS Units for Print Stylesheets
Convert between px, pt, and rem for print media qu