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.