Tailwind with Vue single-file components

Introduction

Tailwind helps you style your Vue components quickly using ready-made classes. It keeps your styles neat and easy to change.

You want to build a Vue app with fast, consistent styling.

You prefer using utility classes instead of writing custom CSS.

You want to keep your component files clean and organized.

You need responsive design that works well on phones and desktops.

You want to avoid writing long CSS files and focus on HTML structure.

Syntax

Tailwind

<template>
  <div class="bg-blue-500 text-white p-4 rounded">
    Hello Tailwind in Vue!
  </div>
</template>

<script setup>
// Vue 3 script setup syntax
</script>

<style>
/* Optional extra styles here */
</style>

Use class attribute to add Tailwind utility classes directly in your template.

Vue single-file components combine template, script, and style in one file for easy management.

Examples

A button styled with Tailwind classes for color, padding, and hover effect.

Tailwind

<template>
  <button class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
    Click me
  </button>
</template>

A card layout with centered max width, padding, shadow, and rounded corners.

Tailwind

<template>
  <div class="max-w-md mx-auto mt-10 p-6 bg-white shadow-lg rounded-lg">
    <h1 class="text-2xl font-semibold mb-4">Welcome</h1>
    <p class="text-gray-700">This is a card component.</p>
  </div>
</template>

A navigation bar using flexbox utilities for layout and spacing.

Tailwind

<template>
  <nav class="flex justify-between items-center p-4 bg-gray-800 text-white">
    <div class="text-lg font-bold">MySite</div>
    <ul class="flex space-x-4">
      <li><a href="#" class="hover:underline">Home</a></li>
      <li><a href="#" class="hover:underline">About</a></li>
      <li><a href="#" class="hover:underline">Contact</a></li>
    </ul>
  </nav>
</template>

Sample Program

This Vue component shows a centered card with a heading, paragraph, and a button. Tailwind classes handle spacing, colors, and hover effects.

Tailwind

<template>
  <main class="min-h-screen bg-gray-100 flex flex-col items-center justify-center p-6">
    <section class="bg-white p-8 rounded-lg shadow-md max-w-sm w-full">
      <h2 class="text-3xl font-bold mb-4 text-center text-blue-600">Hello Vue + Tailwind!</h2>
      <p class="text-gray-700 mb-6 text-center">This is a simple card styled with Tailwind inside a Vue single-file component.</p>
      <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 rounded transition-colors">
        Press me
      </button>
    </section>
  </main>
</template>

<script setup>
// No script needed for this example
</script>

<style>
/* No extra styles needed */
</style>

Important Notes

Make sure Tailwind CSS is properly installed and configured in your Vue project to use the classes.

Use semantic HTML tags like <main> and <section> for better accessibility.

Tailwind classes can be combined to create responsive designs by adding prefixes like sm:, md:, etc.

Summary

Tailwind lets you style Vue components quickly with utility classes.

Use Vue single-file components to keep template, script, and style together.

Tailwind classes help create clean, responsive, and accessible UI easily.

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