Tailwind with Vue single-file components - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a Tailwind class that makes the text bold.

Tailwind

<template>
  <div class="[1]">Hello, Vue with Tailwind!</div>
</template>

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

Afont-bold

Btext-center

Cbg-blue-500

Dp-4

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing padding or background color classes instead of font weight.

Using text alignment classes which don't affect boldness.

The font-bold class makes the text bold in Tailwind CSS.

2fill in blank

medium

Complete the code to apply a responsive padding of 4 on small screens and 8 on medium screens.

Tailwind

<template>
  <div class="p-4 [1]">Responsive padding</div>
</template>

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

Alg:p-4

Bsm:p-8

Cmd:p-6

Dmd:p-8

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong screen size prefix like sm: or lg:.

Choosing padding values that don't match the requirement.

The class md:p-8 applies padding 8 on medium screens and above, combined with p-4 for smaller screens.

3fill in blank

hard

Fix the error in the Tailwind class that should center text horizontally.

Tailwind

<template>
  <p class="[1]">Centered text</p>
</template>

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

Atext-center

Bcenter-text

Ctext-align-center

Dalign-center

Attempts:

3 left

💡 Hint

Common Mistakes

Using CSS property names as class names.

Mixing up class names from other CSS frameworks.

The correct Tailwind class to center text is text-center. Other options are invalid.

4fill in blank

hard

Fill both blanks to create a flex container that centers items vertically and horizontally.

Tailwind

<template>
  <div class="flex [1] [2]">
    Centered content
  </div>
</template>

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

Aitems-center

Bjustify-start

Cjustify-center

Ditems-start

Attempts:

3 left

💡 Hint

Common Mistakes

Using items-start or justify-start which align to the start, not center.

Confusing vertical and horizontal alignment classes.

Use items-center to center items vertically and justify-center to center horizontally in a flex container.

5fill in blank

hard

Fill all three blanks to create a Vue component with a button styled with Tailwind that changes color on hover.

Tailwind

<template>
  <button class="bg-blue-500 [1] text-white [2] rounded [3]">
    Click me
  </button>
</template>

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

Ahover:bg-blue-700

Bpx-4

Cpy-2

Dhover:text-black

Attempts:

3 left

💡 Hint

Common Mistakes

Using hover classes that change text color instead of background.

Mixing up padding directions or missing padding classes.

The button uses hover:bg-blue-700 to change background on hover, px-4 for horizontal padding, and py-2 for vertical padding.