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.

Practice

1. In a Vue single-file component using Tailwind CSS, where do you place the Tailwind utility classes to style an element?

easy

A. Inside the <script> tag as JavaScript variables

B. Inside the <template> tag on the element's class attribute

C. Inside the <style> tag as CSS selectors

D. In a separate CSS file only

Solution

1. Step 1: Understand Vue single-file component structure

   Vue components have <template>, <script>, and <style> sections. The HTML markup is inside <template>.

2. Step 2: Identify where Tailwind classes go

   Tailwind utility classes are added directly to HTML elements using the class attribute inside the <template> section.

3. Final Answer:

   Inside the <template> tag on the element's class attribute -> Option B

4. Quick Check:

   Tailwind classes go in class attribute inside <template> [OK]

Hint: Tailwind classes always go in HTML class attributes [OK]

Common Mistakes:

• Trying to put Tailwind classes inside <script>
• Writing Tailwind classes in <style> as CSS rules
• Assuming Tailwind needs separate CSS files

2. Which of the following is the correct syntax to apply Tailwind classes to a button in a Vue single-file component?

easy

A.

B. Click me

C. Click me

D. Click me

Solution

1. Step 1: Check proper HTML class attribute syntax

   The class attribute must be in quotes and contain space-separated Tailwind classes.

2. Step 2: Identify correct Vue syntax for static classes

   Static classes use class="...". Dynamic binding uses :class but requires an object or array syntax.

3. Final Answer:

   <button class="bg-blue-500 text-white p-2 rounded">Click me</button> -> Option D

4. Quick Check:

   Static Tailwind classes use class="..." [OK]

Hint: Use class="..." for static Tailwind classes in Vue [OK]

Common Mistakes:

• Using curly braces without binding syntax
• Missing closing quotes in class attribute
• Placing button text outside the button tags

3. Given this Vue template snippet using Tailwind:

<template>
  <div class="flex justify-center items-center h-64 bg-gray-100">
    <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">Submit</button>
  </div>
</template>

What will the button look like when hovered over?

medium

A. Button background changes to a darker green

B. Button text color changes to black

C. Button becomes larger in size

D. Button background changes to gray

Solution

1. Step 1: Identify the hover class in Tailwind

   The class hover:bg-green-700 changes the background color on hover to a darker green shade.

2. Step 2: Understand other classes' effects

   Text color remains white, size stays the same, and no gray background on hover is specified.

3. Final Answer:

   Button background changes to a darker green -> Option A

4. Quick Check:

   hover:bg-green-700 means darker green background on hover [OK]

Hint: hover:bg-* changes background color on hover [OK]

Common Mistakes:

• Thinking text color changes on hover
• Assuming size changes without scale classes
• Confusing background colors with gray

4. You wrote this Vue template with Tailwind:

<template>
  <div class="flex justify-center items-center bg-gray-100">
    <button class="bg-blue-500 text-white p-2 rounded">Click</button>
  </div>
</template>

But the button is not centered vertically. What is the likely cause?

medium

A. The button needs margin auto to center

B. Tailwind classes must be in the <style> tag

C. The parent div needs height set for vertical centering

D. The flex class should be on the button, not the div

Solution

1. Step 1: Check parent div height

   Vertical centering with flex requires the container to have a height. The shown code lacks it.

2. Step 2: Confirm flex and alignment classes

   flex, justify-center, and items-center on the div center children horizontally and vertically if height exists.

3. Final Answer:

   The parent div needs height set for vertical centering -> Option C

4. Quick Check:

   Flex vertical centering needs container height [OK]

Hint: Flex vertical center needs container height set [OK]

Common Mistakes:

• Putting Tailwind classes in <style> instead of class attribute
• Adding margin auto on button instead of flex alignment
• Moving flex to button instead of container div

5. You want to create a responsive Vue component with Tailwind that shows a vertical stack of cards on small screens and a horizontal row on medium and larger screens. Which class combination on the container div achieves this?

hard

A. flex flex-col md:flex-row gap-4

B. grid grid-cols-1 md:grid-cols-3 gap-4

C. block md:flex-row flex-col gap-4

D. flex-row flex-col md:flex gap-4

Solution

1. Step 1: Understand responsive Tailwind classes

   flex-col stacks items vertically; md:flex-row switches to horizontal row on medium screens and up.

2. Step 2: Check gap usage

   gap-4 adds spacing between cards in both layouts.

3. Step 3: Evaluate options

   flex flex-col md:flex-row gap-4 correctly uses flex with flex-col by default and md:flex-row for medium+ screens. Others misuse grid or class order.

4. Final Answer:

   flex flex-col md:flex-row gap-4 -> Option A

5. Quick Check:

   flex-col then md:flex-row creates responsive vertical to horizontal layout [OK]

Hint: Use flex-col then md:flex-row for responsive stack to row [OK]

Common Mistakes:

• Using grid instead of flex for this layout
• Wrong order of classes causing no effect
• Missing responsive prefix md: on flex-row