Why responsive design is non-negotiable in Tailwind - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the container responsive using Tailwind CSS.

Tailwind

<div class="[1] mx-auto p-4">
  <p class="text-center">Welcome to my responsive site!</p>
</div>

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

Ahidden

Bfixed

Cabsolute

Dcontainer

Attempts:

3 left

💡 Hint

Common Mistakes

Using fixed width classes like 'fixed' or 'absolute' which do not respond to screen size.

The container class in Tailwind CSS creates a responsive fixed width container that adjusts at different screen sizes.

2fill in blank

medium

Complete the code to apply padding that changes on medium screens using Tailwind CSS.

Tailwind

<div class="p-2 [1]:p-6">
  <p>Content with responsive padding.</p>
</div>

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

Amd

Bsm

Clg

Dxl

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong breakpoint prefix like 'sm' or 'lg' which apply at different screen sizes.

The prefix md: applies styles starting at the medium breakpoint, making padding larger on medium and bigger screens.

3fill in blank

hard

Fix the error in the Tailwind class to make the text center on small screens and larger.

Tailwind

<p class="[1]:text-center text-left">Responsive text alignment</p>

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

Axl

Bsm

Clg

Dmd

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'md' or larger breakpoints which do not affect small screens.

The sm: prefix applies styles starting at small screens, so text will be centered on small and larger screens.

4fill in blank

hard

Fill both blanks to create a responsive grid with 1 column on small screens and 3 columns on large screens.

Tailwind

<div class="grid grid-cols-[1] [2]:grid-cols-3 gap-4">
  <div class="bg-blue-200 p-4">Box 1</div>
  <div class="bg-blue-400 p-4">Box 2</div>
  <div class="bg-blue-600 p-4">Box 3</div>
</div>

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

A1

B2

Csm

Dlg

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong breakpoint prefixes or column numbers that don't match the requirement.

Setting grid-cols-1 creates one column by default. The lg: prefix changes the grid to 3 columns on large screens.

5fill in blank

hard

Fill all three blanks to create a responsive button with blue background, white text, and padding that increases on medium screens.

Tailwind

<button class="bg-[1]-500 text-[2] p-2 [3]:p-4 rounded">
  Click me
</button>

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

Ared

Bwhite

Cmd

Dblue

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong colors or breakpoint prefixes that don't match the design.

The button uses a blue background (bg-blue-500), white text (text-white), and padding that increases on medium screens (md:p-4).