Tailwind with Vue single-file components - Mini Project: Build & Apply

Building a Responsive Card Component with Tailwind CSS and Vue Single-File Components

📖 Scenario: You are creating a simple card component for a website. This card will show a title and a description. You will use Vue single-file components and style it with Tailwind CSS to make it look nice and responsive.

🎯 Goal: Build a Vue single-file component named Card.vue that displays a card with a title and description styled using Tailwind CSS. The card should have padding, a border, rounded corners, and a shadow. It should be responsive and look good on small and large screens.

📋 What You'll Learn

Create a Vue single-file component named Card.vue with a template, script, and style section.

Use Tailwind CSS classes to style the card with padding, border, rounded corners, and shadow.

Add a title and description inside the card.

Make sure the card is responsive using Tailwind's responsive utilities.

💡 Why This Matters

🌍 Real World

Cards like this are common UI elements on websites and apps to display grouped information clearly and attractively.

💼 Career

Knowing how to combine Vue components with Tailwind CSS is a valuable skill for frontend developers building modern, responsive user interfaces.

1

Create the Vue single-file component skeleton

Create a Vue single-file component named Card.vue with the basic structure: a <template> section containing a <div>, an empty <script setup> section, and an empty <style> section.

Tailwind

  
    
  



// Your code here



/* Your styles here */

Hint

Start by writing the basic Vue SFC structure with template, script setup, and style tags.

2

Add title and description inside the card

Inside the <div> in the <template>, add an <h2> with the text Card Title and a <p> with the text This is a description of the card..

Tailwind

Hint

Use simple HTML tags inside the div to add the title and description text.

3

Add Tailwind CSS classes to style the card

Add Tailwind CSS classes to the <div> to give it padding p-6, a border border, rounded corners rounded-lg, and a shadow shadow-md. Also add a max width max-w-sm and center it horizontally with mx-auto.

Tailwind

  
    Card Title
    This is a description of the card.
  

Hint

Use Tailwind utility classes inside the class attribute of the div.

4

Make the card text responsive and add semantic HTML

Add Tailwind classes to the <h2> to make the font size large on small screens text-lg and extra large on medium screens md:text-xl. Add font-semibold for weight. For the <p>, add text-gray-700 for color and mt-2 for margin top. Also add lang="en" attribute to the <template> root <div> for accessibility.

Tailwind

  
    
      Card Title
    
    
      This is a description of the card.
    
  

Hint

Use Tailwind classes for responsive font sizes and colors. Add the lang attribute for 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