How to Use Tailwind CSS with Vue.js

In Vue.js, besides adding our own CSS styles, we can use predefined style libraries. For example, today we’ll see how to use Tailwind CSS in our project.

Tailwind CSS is a very popular CSS utility framework known for its simplicity and speed of use for developers.

Tailwind CSS provides predefined classes to style interfaces directly in the HTML. This makes it highly compatible with component-based frameworks like Vue.js.

Let’s see how to configure and use Tailwind in our Vue.js project 👇.

Configuration of Vue + Vite + Tailwind CSS

To install Tailwind CSS for use with Vue + Vite, we simply do the following.

Once installed, we modify the Vite configuration file to use Tailwind CSS. To do this, edit the vite.config.js file and register the Tailwind plugin:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite' // like this

export default defineConfig({
  plugins: [vue(), tailwindcss()],
})

Next, we need to create and import the styles file. To do this, create a src/style.css file (or whatever name you prefer) and add:

@import "tailwindcss";

Finally, in your src/main.js file, import this styles file.

import './style.css'

That easy! ✅ Now you can use Tailwind CSS utility classes directly in your Vue components.

Basic Example

To check that everything is working, it’s best to do a small example.

<template>
  <h1 class="text-3xl font-bold text-blue-600 text-center mt-10">
    Hello, Tailwind v4!
  </h1>
</template>

If everything went correctly, you’ll see your text styled with Tailwind CSS.

Usage with Reactive Variables

Of course, we can use Vue’s reactive variables together with TailwindCSS classes, just as we would with any of our own classes.

Let’s see it with an example.

<template>
  <div 
    :class="[
      'p-4 rounded-md',
      isActive ? 'bg-green-100 border-green-500' : 'bg-gray-100'
    ]"
  >
    <!-- Rest of the content -->
  </div>
</template>

<script setup>
import { ref } from 'vue';

const isActive = ref(true);
</script>