How to install TailwindCSS 4 in Vue project

Create new Vue project

To create new Vue project run yarn dlx create-vue@latest. Go to next step if you are installing to an existing Vue project.

Installing TailwindCSS 4

To install TailwindCSS 4 into Vue project run yarn add tailwindcss @tailwindcss/vite in your project.

Add TailwindCSS to Vite config

In vite.config.ts add tailwindcss as a plugin.

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import tailwindcss from '@tailwindcss/vite' // import tailwindcss

export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
    // add tailwindcss in plugins
    tailwindcss()
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

Importing TailwindCSS

Before we can use it, we need to import tailwindcss in our main.css file.

/* main.css */
@import "tailwindcss";

Using TailwindCSS

Now TailwindCSS has been installed in Vue project, we can start using the utilities class. For example create a heading in the Vue template.

<template>
 <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</template>

The heading level 1 should be bold and underlined.

Tags: Vue