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 */

Need a 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

Need a 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.
  

Need a 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.
    
  

Need a hint?

Use Tailwind classes for responsive font sizes and colors. Add the lang attribute for accessibility.