0
0
Tailwindmarkup~10 mins

Scroll-snap containers in Tailwind - Interactive Code Practice

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Practice - 5 Tasks
Answer the questions below
1fill in blank
easy

Complete the code to make the container snap horizontally.

Tailwind
<div class="overflow-x-auto [1]">
  <div class="flex">
    <div class="w-64 h-40 bg-blue-500 flex-shrink-0">Item 1</div>
    <div class="w-64 h-40 bg-green-500 flex-shrink-0">Item 2</div>
    <div class="w-64 h-40 bg-red-500 flex-shrink-0">Item 3</div>
  </div>
</div>
Drag options to blanks, or click blank then click option'
Asnap-x
Bsnap-y
Csnap-none
Dsnap-mandatory
Attempts:
3 left
💡 Hint
Common Mistakes
Using 'snap-y' which is for vertical snapping.
Using 'snap-none' which disables snapping.
Using 'snap-mandatory' which is not a valid Tailwind class.
2fill in blank
medium

Complete the code to make each item snap to the start of the container.

Tailwind
<div class="overflow-x-auto snap-x">
  <div class="flex">
    <div class="w-64 h-40 bg-blue-500 flex-shrink-0 [1]">Item 1</div>
    <div class="w-64 h-40 bg-green-500 flex-shrink-0 [1]">Item 2</div>
    <div class="w-64 h-40 bg-red-500 flex-shrink-0 [1]">Item 3</div>
  </div>
</div>
Drag options to blanks, or click blank then click option'
Asnap-center
Bsnap-start
Csnap-end
Dsnap-align
Attempts:
3 left
💡 Hint
Common Mistakes
Using 'snap-center' which centers the snap position.
Using 'snap-end' which snaps to the end edge.
Using 'snap-align' which is not a Tailwind class.
3fill in blank
hard

Fix the error in the code to enable mandatory snapping behavior.

Tailwind
<div class="overflow-x-auto snap-x [1]">
  <div class="flex">
    <div class="w-64 h-40 bg-blue-500 flex-shrink-0 snap-start">Item 1</div>
    <div class="w-64 h-40 bg-green-500 flex-shrink-0 snap-start">Item 2</div>
    <div class="w-64 h-40 bg-red-500 flex-shrink-0 snap-start">Item 3</div>
  </div>
</div>
Drag options to blanks, or click blank then click option'
Asnap-mandatory
Bsnap-strict
C[--tw-scroll-snap-strictness:mandatory]
Dsnap-required
Attempts:
3 left
💡 Hint
Common Mistakes
Using 'snap-mandatory' which is not a Tailwind class.
Using 'snap-strict' which does not exist.
Using 'snap-required' which is invalid.
4fill in blank
hard

Fill both blanks to create a vertical scroll snap container with items snapping to center.

Tailwind
<div class="overflow-y-auto [1] [2] h-64">
  <div class="flex flex-col">
    <div class="h-40 bg-purple-500 snap-center">Item A</div>
    <div class="h-40 bg-pink-500 snap-center">Item B</div>
    <div class="h-40 bg-yellow-500 snap-center">Item C</div>
  </div>
</div>
Drag options to blanks, or click blank then click option'
Asnap-y
Bsnap-x
C[--tw-scroll-snap-strictness:mandatory]
Dsnap-center
Attempts:
3 left
💡 Hint
Common Mistakes
Using 'snap-x' instead of 'snap-y' for vertical scrolling.
Using 'snap-center' on the container instead of items.
Omitting the snapping behavior class.
5fill in blank
hard

Fill all three blanks to create a horizontal scroll snap container with items snapping to end and mandatory snapping enabled.

Tailwind
<div class="overflow-x-auto [1] [2] h-48">
  <div class="flex">
    <div class="w-48 bg-teal-500 flex-shrink-0 [3]">Box 1</div>
    <div class="w-48 bg-orange-500 flex-shrink-0 [3]">Box 2</div>
    <div class="w-48 bg-indigo-500 flex-shrink-0 [3]">Box 3</div>
  </div>
</div>
Drag options to blanks, or click blank then click option'
Asnap-x
B[--tw-scroll-snap-strictness:mandatory]
Csnap-end
Dsnap-start
Attempts:
3 left
💡 Hint
Common Mistakes
Using 'snap-y' instead of 'snap-x' for horizontal snapping.
Using 'snap-start' on items instead of 'snap-end'.
Omitting the mandatory snapping class.