How to Use Tailwind CSS with Vue.js

In Vue.js, in addition to adding our CSS styles, we can use predefined style libraries. For example, today we will 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 programmers.

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

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

Setting up Vue + Vite + Tailwind CSS

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

npm install -D tailwindcss @tailwindcss/vite

Once installed, we modify the Vite configuration file to use Tailwind CSS. To do this, we 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 stylesheet file. To do this, create a file src/style.css (or any name you prefer) and add:

@import "tailwindcss";

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

import './style.css'

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

Basic Example

To verify that everything works, it’s best to create 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 well, you will see your text styled with Tailwind CSS styles.

Using with Reactive Variables

Of course, we can use Vue’s reactive variables along with TailwindCSS classes, just as we would with any of our 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>