Mobile-first philosophy in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to apply a blue background on mobile devices using Tailwind CSS.

Tailwind

<div class="bg-[1]-500 p-4">
  Mobile first background color
</div>

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

Ared

Bgreen

Cblue

Dyellow

Attempts:

3 left

💡 Hint

Common Mistakes

Using a color other than blue.

Adding screen size prefixes like md: which apply styles only on larger screens.

The class bg-blue-500 sets a blue background color. Tailwind applies this style by default on all screen sizes, starting with mobile.

2fill in blank

medium

Complete the code to make the text size larger on medium screens and above using Tailwind CSS.

Tailwind

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

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

Amd

Bsm

Clg

Dxl

Attempts:

3 left

💡 Hint

Common Mistakes

Using sm: which applies on smaller screens than medium.

Using no prefix, which applies styles on all screen sizes.

The prefix md: applies styles starting at the medium screen size (tablet and up). Here, it changes text size to large on medium screens and bigger.

3fill in blank

hard

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

Tailwind

<div class="[1]:p-8">
  Large screen padding
</div>

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

Alg

Bsm

Cxl

Dmd

Attempts:

3 left

💡 Hint

Common Mistakes

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

Using sm: which applies on small screens.

The prefix lg: applies styles starting at large screen sizes (desktop and up). This sets padding to 8 only on large screens and bigger.

4fill in blank

hard

Fill both blanks to create a responsive layout with a column on mobile and a row on medium screens and above.

Tailwind

<div class="flex [1] [2]:flex-row">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

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

Aflex-col

Bblock

Cmd

Dinline

Attempts:

3 left

💡 Hint

Common Mistakes

Using block or inline which are not flexbox directions.

Using the wrong screen size prefix.

By default, flex-col stacks items vertically (column) on mobile. The prefix md: changes layout to flex-row on medium screens and larger, arranging items horizontally.

5fill in blank

hard

Fill all three blanks to create a button that is full width on mobile, half width on medium screens, and has padding 2 on mobile and padding 4 on large screens.

Tailwind

<button class="w-[1] [2]:w-1/2 p-2 [3]:p-4">
  Responsive Button
</button>

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

Afull

Bmd

Clg

Dsm

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong width values like w-1/2 on mobile.

Mixing up screen size prefixes.

The class w-full makes the button full width on mobile. The prefix md: changes width to half on medium screens. Padding p-2 applies on mobile, and lg:p-4 increases padding on large screens.