Responsive typography scaling in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to apply a responsive text size that is small on mobile and larger on medium screens.

Tailwind

<p class="text-sm [1]">This text changes size on different screens.</p>

Drag options to blanks, or click blank then click option'

Asm:text-base

Blg:text-xl

Cmd:text-lg

Dxl:text-2xl

Attempts:

3 left

💡 Hint

Common Mistakes

Using sm:text-lg which applies on small screens, not medium.

Forgetting the prefix and just writing text-lg which applies everywhere.

The class md:text-lg sets the text size to large starting at medium screen sizes, making the typography responsive.

2fill in blank

medium

Complete the code to make the heading text size scale from medium on small screens to extra large on large screens.

Tailwind

<h1 class="[1] lg:text-4xl">Welcome to our site</h1>

Drag options to blanks, or click blank then click option'

Atext-lg

Btext-sm

Ctext-base

Dtext-xl

Attempts:

3 left

💡 Hint

Common Mistakes

Using text-sm which is too small for a heading.

Using text-xl which is larger than medium but not the best base for scaling.

The class text-lg sets the base text size to large on small screens, then lg:text-4xl makes it extra large on large screens.

3fill in blank

hard

Fix the error in the code to correctly apply responsive font sizes for paragraph text.

Tailwind

<p class="text-base [1]">This paragraph adjusts size on screens.</p>

Drag options to blanks, or click blank then click option'

Amd:text-2x

Bmd:text-xl

Cmd:text-2xl

Dmd:text-3xl

Attempts:

3 left

💡 Hint

Common Mistakes

Using md:text-2x which is not a valid Tailwind class.

Using sizes too large for paragraph text.

The correct Tailwind class is md:text-xl. The option md:text-2x is invalid and will cause no effect.

4fill in blank

hard

Fill both blanks to create a responsive heading that is medium on small screens and extra large on extra large screens.

Tailwind

<h2 class="[1] [2]">Responsive Heading</h2>

Drag options to blanks, or click blank then click option'

Atext-lg

Btext-xl

Cxl:text-5xl

Dlg:text-4xl

Attempts:

3 left

💡 Hint

Common Mistakes

Using lg:text-4xl instead of xl:text-5xl for the extra large size.

Choosing a base size larger than the responsive size.

The base size text-lg applies on small screens, and xl:text-5xl makes the text extra large on extra large screens.

5fill in blank

hard

Fill all three blanks to create a paragraph with small text on mobile, medium on medium screens, and large on large screens.

Tailwind

<p class="[1] [2] [3]">Adaptive paragraph text.</p>

Drag options to blanks, or click blank then click option'

Atext-sm

Bmd:text-base

Clg:text-lg

Dxl:text-xl

Attempts:

3 left

💡 Hint

Common Mistakes

Using xl:text-xl instead of lg:text-lg for large screens.

Forgetting to set a base text size without a prefix.

The classes text-sm, md:text-base, and lg:text-lg set the text size to small by default, medium on medium screens, and large on large screens respectively.