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.