Install Tailwind CSS 4 with Vue 3 - 38

Now we are going to install Tailwind CSS in its version 4 along with a project in Vue 3, the steps are the same as if you are using a project in Node without Vue except for the vite configuration file that already exists in Vue and does not have to be recreated; we install the framework and its plugin for vite:

$ npm install tailwindcss @tailwindcss/vite

CSS file

We create main.css it can obviously have any name and here the important thing is to load the Tailwind module:

src\css\main.css

@import "tailwindcss";

Referencing CSS

We reference the CSS file defined above, in this example, from the Vue bootstrap file:

src\main.js

import { createApp } from 'vue'
import "./css/main.css"
import axios from "axios"
// ***

vite.config

We now have the vite.config.js file, unlike previous versions of Tailwind, Tailwind now auto-scans our files to determine which classes to use; we add the vite plugin for Tailwind:

vite.config.js

***
import tailwindcss from '@tailwindcss/vite'

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