How to Use Tailwind CSS with Vue and Vite

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that helps developers create modern and responsive user interfaces quickly.

Unlike traditional CSS frameworks like Bootstrap, Tailwind provides low-level utility classes that allow you to build custom designs without writing custom CSS.

Why Use Tailwind CSS with Vue and Vite?

Vue.js is a powerful JavaScript framework for building interactive user interfaces, and Vite is a modern build tool designed to optimize the development experience. When combined with Tailwind CSS, you get:

• A fast, efficient development environment.
• A highly customizable styling system.
• Automatic optimizations for production.

Setting Up the Project

To use Tailwind CSS with Vue and Vite, the first step is to set up a new Vue project using Vite.

Installing Vue with Vite

Run the following command to create a new Vue project using Vite:

npm create vite@latest my-vue-tailwind-app --template vue

Once the installation is complete, navigate into the project folder:

cd my-vue-tailwind-app

Then install dependencies:

npm install

Project Structure Overview

Your project folder should look like this:

my-vue-tailwind-app/
│── node_modules/
│── public/
│── src/
│   │── assets/
│   │── components/
│   │── App.vue
│   │── main.js
│── index.html
│── package.json
│── vite.config.js

Installing Tailwind CSS

Now, let’s install Tailwind CSS into our Vue project.

Run the following command to install Tailwind and its dependencies:

npm install -D tailwindcss postcss autoprefixer

After installation, generate the Tailwind configuration files:

npx tailwindcss init -p

This will create two files in your project:

• tailwind.config.js (Tailwind configuration)
• postcss.config.js (PostCSS configuration)

Configuring Tailwind for Vue and Vite

Now, let’s configure Tailwind to work with Vue and Vite.

Editing tailwind.config.js

Open tailwind.config.js and update the content array to include Vue files:

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Adding Tailwind Directives to CSS

Create a new CSS file (or edit src/assets/main.css) and add the Tailwind directives:

@tailwind base;
@tailwind components;
@tailwind utilities;

Then, import this file inside main.js:

import { createApp } from 'vue';
import App from './App.vue';
import './assets/main.css';

createApp(App).mount('#app');

Using Tailwind in Vue Components

Now that Tailwind is set up, let’s use it in a Vue component.

Example of Styling a Vue Component

Edit App.vue and update it with Tailwind classes:

<template>
  <div class="flex items-center justify-center min-h-screen bg-gray-100">
    <div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-4">
      <h1 class="text-xl font-bold text-gray-900">Welcome to Vue + Tailwind</h1>
      <p class="text-gray-600">Build fast, modern, and beautiful interfaces with Vue and Tailwind CSS.</p>
      <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
        Click Me
      </button>
    </div>
  </div>
</template>

This component:

• Centers the content using flex and min-h-screen.
• Creates a card-style UI with rounded corners and shadows.
• Styles the button with Tailwind’s utility classes.

Enabling JIT Mode for Faster Development

Tailwind’s Just-In-Time (JIT) mode speeds up development by generating styles on demand.

What is JIT Mode?

JIT mode compiles only the classes you use, making development faster and reducing CSS size.

How to Enable It

JIT mode is enabled by default in Tailwind v3, so no extra configuration is needed.

Optimizing for Production

Before deploying, ensure that Tailwind removes unused styles.

Purge Unused CSS

Tailwind automatically purges unused CSS based on the content array in tailwind.config.js.

Improving Performance with Vite

Vite already optimizes CSS for production. Run the following command to build the project:

npm run build

Adding Custom Styles and Plugins

Tailwind CSS is highly customizable. You can extend it with custom styles and plugins.

Extending Tailwind with Custom Styles

You can add custom styles in tailwind.config.js under the extend section:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#1E40AF', // Custom color
        secondary: '#E11D48',
      },
      spacing: {
        128: '32rem',
      },
    },
  },
}

Using Tailwind Plugins

Tailwind has official plugins that add extra features. Install them using npm:

npm install -D @tailwindcss/forms @tailwindcss/typography

Then, enable them in tailwind.config.js:

module.exports = {
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
  ],
}

Using Tailwind with Vue Transitions and Animations

Vue’s transition system works well with Tailwind’s animation utilities.

Creating Animations with Tailwind

Tailwind provides built-in animations like animate-bounce, animate-pulse, and more.

Example:

<template>
  <div class="flex justify-center items-center h-screen">
    <button class="px-6 py-3 bg-green-500 text-white rounded-full animate-bounce">
      Bouncing Button
    </button>
  </div>
</template>

Handling Vue Transitions

You can combine Vue’s <transition> component with Tailwind classes:

<template>
  <button @click="isVisible = !isVisible" class="bg-blue-500 text-white px-4 py-2 rounded">
    Toggle Box
  </button>

  <transition enter-active-class="transition-opacity duration-500" enter-from-class="opacity-0" enter-to-class="opacity-100"
              leave-active-class="transition-opacity duration-500" leave-from-class="opacity-100" leave-to-class="opacity-0">
    <div v-if="isVisible" class="mt-4 p-4 bg-gray-200 rounded">
      This box appears with a smooth transition!
    </div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      isVisible: false,
    };
  },
};
</script>

Responsive Design with Tailwind

Tailwind makes responsive design easy with mobile-first utility classes.

Using Breakpoints

Tailwind uses sm, md, lg, xl, and 2xl for different screen sizes:

<template>
  <div class="p-6 bg-white shadow-lg rounded-lg text-center sm:bg-gray-100 md:bg-blue-100 lg:bg-green-100 xl:bg-red-100">
    Resize the window to see the background color change!
  </div>
</template>

Creating a Responsive Layout

You can use grid or flex to build responsive layouts:

<template>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <div class="p-6 bg-blue-200">Item 1</div>
    <div class="p-6 bg-green-200">Item 2</div>
    <div class="p-6 bg-red-200">Item 3</div>
  </div>
</template>

Dark Mode with Tailwind in Vue

Tailwind has built-in dark mode support.

Configuring Dark Mode

Enable dark mode in tailwind.config.js:

module.exports = {
  darkMode: 'class', // or 'media' for system-based dark mode
}

Toggling Dark Mode Dynamically

You can toggle dark mode in Vue by adding a class to html:

<template>
  <button @click="toggleDarkMode" class="px-4 py-2 bg-gray-800 text-white rounded">
    Toggle Dark Mode
  </button>

  <div class="p-6 bg-white dark:bg-gray-900 dark:text-white mt-4">
    This section changes based on dark mode.
  </div>
</template>

<script>
export default {
  methods: {
    toggleDarkMode() {
      document.documentElement.classList.toggle('dark');
    },
  },
};
</script>

Handling Forms and Inputs with Tailwind

Tailwind provides powerful styling for form elements.

Styling Forms with Tailwind

Use @tailwindcss/forms for better styling:

<template>
  <form class="space-y-4">
    <label class="block">
      <span class="text-gray-700">Email</span>
      <input type="email" class="mt-1 block w-full border-gray-300 focus:border-blue-500 focus:ring focus:ring-blue-200 rounded-md">
    </label>

    <button class="bg-blue-500 text-white px-4 py-2 rounded">Submit</button>
  </form>
</template>

Creating a Simple UI with Tailwind and Vue

Let’s build a simple navbar and a card component.

Building a Navbar

<template>
  <nav class="bg-blue-500 text-white p-4 flex justify-between">
    <h1 class="text-xl font-bold">My App</h1>
    <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>

Creating a Card Component

<template>
  <div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-4">
    <h2 class="text-xl font-semibold">Card Title</h2>
    <p class="text-gray-600">This is a simple card component using Tailwind CSS.</p>
    <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
      Learn More
    </button>
  </div>
</template>

Common Errors and Troubleshooting

Fixing Tailwind Not Applying Styles

• Ensure Tailwind is correctly imported in main.css.
• Check if tailwind.config.js has the correct paths under content.

Resolving Build Issues in Vite

• Run npm run dev to check for errors.
• Delete node_modules and package-lock.json, then reinstall dependencies:

rm -rf node_modules package-lock.json
npm install

Conclusion and Next Steps

You now have a complete setup for using Tailwind CSS with Vue and Vite.

Frequently Asked Questions (FAQs)

1. Can I use Tailwind CSS with Vue 3 and Vite?
Yes, Tailwind CSS works perfectly with Vue 3 and Vite. Just follow the setup instructions in this guide.

2. How do I enable dark mode in Tailwind CSS?
Set darkMode: 'class' in tailwind.config.js and toggle the dark class on html.

3. How do I make my Vue app responsive with Tailwind?
Use Tailwind’s responsive utilities like sm:, md:, lg:, etc.

4. Why is Tailwind not working in my Vue components?
Ensure your tailwind.config.js includes ./src/**/*.{vue,js,ts,jsx,tsx} in content.

5. How do I optimize my Tailwind CSS for production?
Tailwind automatically removes unused CSS in production when using Vite’s build process.