Font size and scaling in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Tailwind's font size scale

Which Tailwind CSS class sets the font size to approximately 1.25rem (20px) by default?

A text-xl

B text-lg

C text-base

D text-sm

💡 Hint

Tailwind uses a scale where text-base is 1rem, and sizes increase or decrease from there.

The text-xl class sets the font size to 1.25rem (20px) by default. text-lg is 1.125rem (18px).

📝 Syntax

intermediate

Correct Tailwind syntax for responsive font size

Which option correctly applies a font size of 1rem on small screens and 1.25rem on medium screens using Tailwind CSS?

A text-base md:text-xl

B text-base text-md

C text-base-md text-xl

D text-md md:text-base

💡 Hint

Tailwind uses breakpoint prefixes like md: to apply styles at medium screen sizes and above.

Option A uses the correct breakpoint prefix md: to change font size from text-base (1rem) to text-xl (1.25rem) at medium screens.

Other options either use invalid class names or incorrect breakpoint usage.

❓ rendering

advanced

Visual effect of font size scaling with rem units

If the root font size is set to 16px, what will be the computed font size in pixels for an element with class text-2xl in Tailwind CSS?

A 20px

B 24px

C 32px

D 18px

💡 Hint

Tailwind's text-2xl corresponds to 1.5rem by default.

Since 1rem equals 16px, 1.5rem equals 24px. Tailwind's text-2xl sets font size to 1.5rem, so the computed size is 24px.

❓ selector

advanced

Selecting font size with Tailwind's arbitrary values

Which Tailwind class correctly sets the font size to exactly 22px using arbitrary values?

A text-22

B font-size-22

C text-22px

D text-[22px]

💡 Hint

Tailwind allows arbitrary values inside square brackets for many utilities.

Option D uses the correct syntax for arbitrary values: text-[22px].

Other options are invalid Tailwind class names.

❓ accessibility

expert

Ensuring accessible font scaling with Tailwind

Which approach best supports user accessibility preferences for font scaling in Tailwind CSS?

A Disable browser zoom to keep font sizes fixed

B Use only fixed pixel font sizes for consistency

C Use relative font sizes like rem and avoid fixed pixel sizes

D Use inline styles with px units for font size

💡 Hint

Accessibility means respecting user settings and allowing text to scale properly.

Using relative units like rem allows font sizes to scale with user preferences and browser settings, improving accessibility.

Fixed pixel sizes or disabling zoom harm accessibility.