Font size and scaling in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the font size to large using Tailwind CSS.

Tailwind

<p class="text-[1]">This is large text.</p>

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

Asm

Blg

Cxl

Dbase

Attempts:

3 left

💡 Hint

Common Mistakes

Using text-sm which is smaller size.

Using text-base which is default size.

The class text-lg sets the font size to large in Tailwind CSS.

2fill in blank

medium

Complete the code to make the text size responsive, larger on medium screens.

Tailwind

<p class="text-base [1]:text-xl">Responsive text size</p>

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

Amd

Blg

Csm

Dxl

Attempts:

3 left

💡 Hint

Common Mistakes

Using lg: which applies on large screens, not medium.

Using sm: which applies on small screens.

The prefix md: applies styles on medium screens and up. So md:text-xl makes text larger on medium screens.

3fill in blank

hard

Fix the error in the code to correctly set font size to extra large.

Tailwind

<h1 class="text[1]">Big heading</h1>

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

A-xl

Bxl

C-2xl

D:xl

Attempts:

3 left

💡 Hint

Common Mistakes

Writing textxl without dash.

Using colon :xl which is invalid here.

Tailwind font size classes use a dash after text, so text-xl is correct. The blank is after text, so -xl completes it.

4fill in blank

hard

Fill both blanks to create a paragraph with small text on mobile and medium text on medium screens.

Tailwind

<p class="text-[1] [2]:text-base">Adaptive text size</p>

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

Asm

Bmd

Clg

Dxl

Attempts:

3 left

💡 Hint

Common Mistakes

Using text-base as default instead of small.

Missing the md: prefix.

The class text-sm sets small text by default. The prefix md: applies styles on medium screens, so md:text-base sets medium text size on medium screens.

5fill in blank

hard

Fill all three blanks to create a heading with base font size, bold weight, and extra large size on large screens.

Tailwind

<h2 class="[1] [2] [3]:text-xl">Styled heading</h2>

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

Afont-bold

Btext-base

Clg

Dtext-lg

Attempts:

3 left

💡 Hint

Common Mistakes

Using text-lg as default instead of base.

Missing the font-bold class.

text-base sets the base font size, font-bold makes the text bold, and lg:text-xl applies extra large text on large screens.