Tailwind with Vue single-file components - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

Which Tailwind class applies a responsive padding of 2rem on medium screens and above?

Choose the correct Tailwind CSS class that adds padding of 2rem (32px) on medium (md) screens and larger, but no padding on smaller screens.

A p-8 md

B p-md-8

C p-8-md

D md:p-8

💡 Hint

Tailwind uses breakpoint prefixes before the utility class.

In Tailwind, responsive prefixes like md: come before the utility. So md:p-8 means padding 2rem on medium screens and up.

❓ rendering

intermediate

What will this Vue SFC render visually?

Given this Vue single-file component using Tailwind, what is the visible background color of the button on a large screen?

Tailwind

<template>
  <button class="bg-blue-500 lg:bg-red-500 text-white p-4">Click me</button>
</template>

A Blue background on small and medium, red on large screens and above

B Blue background on all screen sizes

C Red background on all screen sizes

D No background color

💡 Hint

Tailwind applies the last matching class for the current screen size.

The button has bg-blue-500 by default and lg:bg-red-500 for large screens and above. So on large screens, the background is red; otherwise, blue.

🧠 Conceptual

advanced

What is the purpose of the scoped attribute in Vue SFC style blocks when using Tailwind?

In a Vue single-file component, why would you add the scoped attribute to the <style> tag when also using Tailwind CSS classes?

A To enable Tailwind's utility classes inside the style block

B To limit the CSS rules in the style block to only this component, preventing global style leaks

C To automatically add responsive variants to Tailwind classes

D To disable Tailwind CSS for this component

💡 Hint

Think about CSS scope and how Vue isolates styles.

The scoped attribute ensures styles inside the block only apply to this component's elements, avoiding affecting other parts of the app. Tailwind classes are global utilities and unaffected by this.

❓ layout

advanced

Which Tailwind classes create a responsive two-column grid that stacks on small screens?

Select the correct Tailwind CSS classes to make a grid with two columns on medium screens and larger, but one column on smaller screens.

A grid grid-cols-2 md:grid-cols-1

B grid-cols-2 grid md:grid-cols-1

C grid grid-cols-1 md:grid-cols-2

D grid-cols-1 grid-cols-2 md:grid

💡 Hint

Remember the mobile-first approach: base classes apply to all, prefixes override on larger screens.

Using grid-cols-1 sets one column by default (small screens). Then md:grid-cols-2 changes to two columns on medium and larger screens.

❓ accessibility

expert

How to make a Tailwind-styled Vue button accessible with keyboard and screen readers?

You have a button styled with Tailwind in a Vue component. Which option best improves accessibility for keyboard users and screen readers?

Tailwind

<template>
  <button class="bg-green-600 text-white p-3 rounded">Submit</button>
</template>

A No changes needed; button is accessible by default

B Add <code>tabindex="0"</code> and <code>aria-label="Submit form"</code> to the button

C Add <code>aria-hidden="true"</code> to the button

D Add <code>role="button"</code> and <code>tabindex="-1"</code> to the button

💡 Hint

Think about keyboard focus and descriptive labels for screen readers.

Buttons are natively focusable and accessible by default. Adding tabindex="0" is redundant, and aria-label should only be added if the button text is not descriptive. Therefore, no changes are needed for basic accessibility.

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