Responsive typography scaling in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Tailwind's responsive typography classes

Which Tailwind CSS class correctly applies a font size of 1.25rem on small screens and scales up to 1.5rem on medium screens and larger?

A text-lg md:text-xl

B text-base md:text-2xl

C text-sm md:text-lg

D text-xl md:text-2xl

💡 Hint

Remember that text-xl is 1.25rem and text-2xl is 1.5rem by default in Tailwind.

In Tailwind CSS, text-xl corresponds to 1.25rem and text-2xl corresponds to 1.5rem by default. Option D (text-xl md:text-2xl) correctly applies 1.25rem on small screens and 1.5rem on medium screens and larger. (Note: Tailwind's default sizes can be customized, but this is the standard scale.)

📝 Syntax

intermediate

Fix the Tailwind class for responsive font size

Which option correctly fixes the syntax error in this Tailwind class string to apply 1rem font size on mobile and 1.25rem on large screens?

class="text-base lg:text-lg text-xl"

A class="text-base lg:text-lg text-xl"

B class="text-base lg:text-xl"

C class="text-base lg:text-xl text-lg"

D class="text-lg lg:text-xl"

💡 Hint

Tailwind applies classes from left to right, so avoid conflicting font sizes.

The original class string has conflicting font sizes: text-xl overrides the base size. The correct fix is to remove the conflicting text-xl so the font size is 1rem on mobile (text-base) and 1.25rem on large screens (lg:text-xl).

❓ rendering

advanced

What is the visual font size on a medium screen?

Given this HTML snippet with Tailwind classes:

<p class="text-sm md:text-lg lg:text-xl">Hello</p>

What font size will the text "Hello" have on a medium screen (width between 768px and 1023px)?

Tailwind

<p class="text-sm md:text-lg lg:text-xl">Hello</p>

A 1.125rem (18px)

B 0.875rem (14px)

C 1.25rem (20px)

D 1rem (16px)

💡 Hint

Check Tailwind's default font sizes for text-sm and text-lg.

On medium screens, the md:text-lg class applies. Tailwind's text-lg is 1.125rem (18px). So the text will be 18px on medium screens.

❓ selector

advanced

Which Tailwind selector applies font size only on screens wider than 1024px?

You want to apply a font size of 1.25rem only on screens wider than 1024px. Which Tailwind class selector should you use?

A md:text-xl

B xl:text-xl

C lg:text-xl

D sm:text-xl

💡 Hint

Check Tailwind's default breakpoints for 'lg'.

Tailwind's default 'lg' breakpoint starts at 1024px. So lg:text-xl applies font size 1.25rem (text-xl) only on screens wider than 1024px.

❓ accessibility

expert

Ensuring accessible responsive typography scaling

Which approach best ensures accessible and readable responsive typography scaling in Tailwind CSS?

A Use relative font sizes with responsive classes and respect user browser settings for font scaling

B Use fixed font sizes like text-base and text-lg without considering user preferences

C Use only large font sizes on all screen sizes to ensure readability

D Use custom pixel values in inline styles for precise control

💡 Hint

Think about users who change default font sizes or zoom settings.

Using relative font sizes with responsive classes allows the text to scale properly on different screen sizes. Respecting user browser settings for font scaling ensures accessibility for users with visual impairments or preferences. Fixed sizes or inline pixel values can break accessibility.