How to install Tailwind v4 in a Vite project

A few days ago, I created a new React project using Vite, and I intended to use Tailwind for styling. However, I ran into some issues — Tailwind just couldn’t be initialised! I used the usual command npx tailwind init -p, but I got errors in my console.

So here’s what I did and how you can avoid similar issues when using Tailwind in your next Vite project.

1. ## Update NodeJS and NPM

This was the first step I took as my Node version was outdated. To check your Node version, use the command node -v. The latest version of Node can be obtained via the official website.

For NPM update, first check your version using npm -v, and to update it, use the command npm install -g npm. If you still encounter issues, let’s head onto the next step.

Use the new Vite installation guide for Tailwind

Since Tailwind v4, the process for installing Tailwind in a Vite project has slightly changed. The full guide can be found on the Tailwind website. It’s been simplified, and below are the steps.

// Install tailwindcss via npm
npm install tailwindcss @tailwindcss/vite

// vite.config.ts 
// (Configure the Vite plugin)

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

You’d notice in the second code block that the configuration is now done in the vite.config.ts and not the tailwind.config.js as in earlier versions. This step is crucial in determining whether your installation is successful or not.

After taking these steps, my installation was successful, and I could use Tailwind to style my application as I wanted freely.

In the coming articles, I’ll be writing articles about Tailwind and how to customise themes with the tailwind.config.js now gone in v4. If you appreciate this article, consider leaving a comment below. I’ll swiftly reply to you.

Thanks for reading and have a good day. Ciao 👋