Custom breakpoints in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a custom breakpoint named 'tablet' with a minimum width of 640px.

Tailwind

module.exports = {
  theme: {
    screens: {
      tablet: '[1]',
    },
  },
}

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

A"480px"

B"768px"

C"640px"

D"1024px"

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong pixel value like 768px or 1024px.

Not including the pixel unit in quotes.

The custom breakpoint 'tablet' is set to a minimum width of 640px, so the value must be "640px".

2fill in blank

medium

Complete the code to apply a background color only on screens wider than the custom 'tablet' breakpoint.

Tailwind

<div class="[1]:bg-blue-500 bg-red-500 p-4">
  Responsive box
</div>

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

Amobile

Btablet

Cdesktop

Dsm

Attempts:

3 left

💡 Hint

Common Mistakes

Using a non-existent breakpoint name like 'mobile'.

Forgetting the colon after the breakpoint name.

The 'tablet' prefix applies styles starting from the custom 'tablet' breakpoint (640px and up). So the background will be blue on tablet and larger screens, red otherwise.

3fill in blank

hard

Fix the error in the custom breakpoint definition to use the correct syntax for a min-width media query.

Tailwind

module.exports = {
  theme: {
    screens: {
      tablet: '[1]',
    },
  },
}

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

A"(min-width: 640px)"

B"min-width: 640px"

C"640px"

D"min-width=640px"

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting parentheses around the media query.

Using '=' instead of ':' in the media query.

Custom breakpoints can be defined using raw media queries. The correct syntax for min-width is "(min-width: 640px)" with parentheses.

4fill in blank

hard

Fill both blanks to define two custom breakpoints: 'tablet' at 640px and 'laptop' at 1024px.

Tailwind

module.exports = {
  theme: {
    screens: {
      tablet: '[1]',
      laptop: '[2]',
    },
  },
}

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

A"640px"

B"768px"

C"1024px"

D"1280px"

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up the pixel values for tablet and laptop.

Forgetting quotes around the pixel values.

The 'tablet' breakpoint is 640px and 'laptop' breakpoint is 1024px, so those values must be used.

5fill in blank

hard

Fill all three blanks to create a responsive text size: small on mobile, medium on tablet, and large on laptop.

Tailwind

<p class="text-[1] [2]:text-[3] laptop:text-lg">
  Responsive text
</p>

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

Asm

Bbase

Ctablet

Dlg

Attempts:

3 left

💡 Hint

Common Mistakes

Using breakpoint names as text sizes or vice versa.

Forgetting the colon after the breakpoint prefix.

The base text size is 'sm' for small screens. The 'tablet' prefix applies 'base' text size on tablet screens. The 'laptop' prefix applies 'lg' text size on laptop screens.