Breakpoint prefixes (sm, md, lg, xl, 2xl) in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to apply a red background only on small screens and larger.

Tailwind

<div class="[1]:bg-red-500">Hello</div>

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

Amd

Bsm

Clg

Dxl

Attempts:

3 left

💡 Hint

Common Mistakes

Using a larger breakpoint prefix like md or lg when sm is needed.

The sm prefix applies styles starting from small screens (640px) and up.

2fill in blank

medium

Complete the code to make the text size large only on medium screens and above.

Tailwind

<p class="[1]:text-lg">Welcome!</p>

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

Amd

Bsm

Cxl

D2xl

Attempts:

3 left

💡 Hint

Common Mistakes

Using sm or xl instead of md for medium screens.

The md prefix applies styles starting from medium screens (768px) and up.

3fill in blank

hard

Fix the error in the code to apply padding only on large screens and above.

Tailwind

<section class="[1]:p-4">Content</section>

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

Alg

Bmd

Cxl

Dsm

Attempts:

3 left

💡 Hint

Common Mistakes

Using md or sm instead of lg for large screens.

The lg prefix applies styles starting from large screens (1024px) and up.

4fill in blank

hard

Fill both blanks to apply margin on extra large screens and padding on 2xl screens.

Tailwind

<div class="[1]:m-6 [2]:p-8">Box</div>

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

Axl

Blg

C2xl

Dmd

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up xl and 2xl prefixes.

The xl prefix applies styles from 1280px and up, and 2xl applies from 1536px and up.

5fill in blank

hard

Fill all three blanks to set font bold on small screens, text center on medium, and text blue on large screens.

Tailwind

<h1 class="[1]:font-bold [2]:text-center [3]:text-blue-600">Title</h1>

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

Alg

Bmd

Csm

Dxl

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong prefixes or wrong order of breakpoints.

sm applies font bold starting at small screens (640px), md centers text at medium screens (768px), and lg colors text blue at large screens (1024px).