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.

Practice

1. What does the Tailwind class text-lg md:text-xl do in terms of font size?

easy

A. Sets the font size to large on small screens and extra large on medium and bigger screens.

B. Sets the font size to extra large on all screen sizes.

C. Sets the font size to large only on medium screens.

D. Sets the font size to extra large only on small screens.

Solution

1. Step 1: Understand Tailwind responsive prefixes

   The prefix md: applies styles starting from medium screen sizes (768px and up).

2. Step 2: Interpret the class text-lg md:text-xl

   It sets font size to large by default, then changes to extra large on medium and larger screens.

3. Final Answer:

   Sets the font size to large on small screens and extra large on medium and bigger screens. -> Option A

4. Quick Check:

   Responsive prefix changes font size at medium breakpoint [OK]

Hint: Look for prefixes like md: to spot screen size changes [OK]

Common Mistakes:

• Thinking md: applies to small screens
• Assuming no change in font size
• Confusing default and prefixed classes

2. Which of the following is the correct Tailwind syntax to make text size small on mobile and medium on large screens?

easy

A. text-md lg:text-sm

B. text-sm lg:text-md

C. text-sm lg:text-lg

D. text-lg md:text-sm

Solution

1. Step 1: Identify correct font size classes

   Tailwind uses text-sm for small, text-md is not a valid class, text-lg is medium-large.

2. Step 2: Check responsive prefix usage

   lg: applies styles at large screens (1024px+). So text-sm lg:text-lg means small text on mobile, larger text on large screens.

3. Final Answer:

   text-sm lg:text-lg -> Option C

4. Quick Check:

   Use valid classes and correct prefixes [OK]

Hint: Remember text-md is invalid; use text-sm, text-base, text-lg [OK]

Common Mistakes:

• Using invalid class text-md
• Reversing screen size prefixes
• Mixing up font size names

3. What font size will the text have on a 1200px wide screen with this class: text-base sm:text-lg md:text-xl lg:text-2xl?

medium

A. text-base

B. text-xl

C. text-lg

D. text-2xl

Solution

1. Step 1: Identify screen size breakpoints

   1200px width is larger than lg breakpoint (1024px), so lg: classes apply.

2. Step 2: Determine which font size applies

   Since lg:text-2xl applies at 1024px+, the font size will be 2xl on 1200px screen.

3. Final Answer:

   text-2xl -> Option D

4. Quick Check:

   Largest breakpoint prefix applies at wide screens [OK]

Hint: Pick the largest breakpoint prefix less than screen width [OK]

Common Mistakes:

• Choosing smaller breakpoint sizes
• Ignoring lg: prefix effect
• Confusing breakpoint order

4. You wrote text-base md:text-lg sm:text-xl but the font size is not increasing on medium screens. What is the problem?

medium

A. Tailwind does not support multiple responsive prefixes on one element

B. The order of responsive prefixes is incorrect; sm: should come before md:

C. You must use lg: instead of md: for medium screens

D. The base font size must be larger than responsive sizes

Solution

1. Step 1: Understand responsive prefix order

   Tailwind applies styles in order of screen size: base, sm, md, lg, xl.

2. Step 2: Check class order impact

   Classes are applied left to right, so md:text-lg is overridden by sm:text-xl because sm: is smaller breakpoint but comes later.

3. Final Answer:

   The order of responsive prefixes is incorrect; sm: should come before md: -> Option B

4. Quick Check:

   Order responsive classes from smallest to largest breakpoint [OK]

Hint: Write responsive classes from smallest to largest breakpoint [OK]

Common Mistakes:

• Placing larger breakpoint classes before smaller ones
• Assuming Tailwind ignores class order
• Confusing breakpoint sizes

5. You want text to be text-sm on mobile, text-base on tablets (640px+), and text-lg on desktops (1024px+). Which Tailwind class combination achieves this?

hard

A. text-sm md:text-base lg:text-lg

B. text-sm sm:text-lg md:text-base

C. text-sm sm:text-base md:text-lg

D. text-base sm:text-sm lg:text-lg

Solution

1. Step 1: Match breakpoints to screen sizes

   Mobile is default (no prefix), tablets start at sm (640px), desktops at lg (1024px). For 1024px+, lg: is correct for desktops.

2. Step 2: Check class correctness

   text-sm default for mobile, md:text-base applies at 768px+, and lg:text-lg applies at 1024px+. This combination ensures text-base on tablets (md breakpoint) and text-lg on desktops (lg breakpoint).

3. Final Answer:

   text-sm md:text-base lg:text-lg -> Option A

4. Quick Check:

   Use default, then md:, then lg: for ascending screen sizes [OK]

Hint: Use default, then md:, then lg: for ascending screen sizes [OK]

Common Mistakes:

• Mixing breakpoint order
• Using lg: instead of md: for tablets
• Setting smaller sizes on larger screens