How to install an older version of tailwindCSS into a new vite project?

The new version of Tailwind CSS is 4.0.0, but it is an unfamiliar user experience. I felt it. I am using v3.4.17, which has a lot of plugin support because it is an old version. However, Tailwind v4 provides inbuilt support for Vite projects, but since it is new, it does not support many plugins. I find this very annoying. Based on my experience, I want to explain how to successfully use an old version of Tailwind CSS with a Vite project.

Why don’t we take a moment to explore the steps together, one by one?

Kick off the Vite project.

I have shown above how to start a Vita project using the WebStorm IDE. Otherwise, you can use these npm commands to start a project as usual.

npm create vite@latest my-project -- --template react

cd my-project

 

Uninstall Tailwind CSS that came with the inbuild.

As I said before, since Vite now supports Tailwind v4, we need to remove it first. So we go to the package.json file, there are devDependencies in it, we select tailwinds from the devDependencies inside it, and change the dependency that is "tailwindcss": "^4.0.0", to "tailwindcss": "^3.4.17".

Update dependencies.

If we have made changes to the package.json file, we need to update the dependencies. This can be done with the following npm command.

npm install or npm i

 

install tailwind 3.4.17.

We need to create the configure files for tailwind 3.4.17, so we run the following npm commands.

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

After we can see that 2 files like this have been created.

Okay.. we have successfully changed the Tailwind CSS version. So the next thing we need to do is configure the template paths and add Tailwind directives to our CSS. I think you can do it yourself. For that, follow the Tailwind CSS Documentation.

Tailwind CSS v3 documentation

Summary

Tailwind CSS 4.0.0 is the latest version, but it feels unfamiliar and lacks plugin support compared to v3.4.17. To overcome this, I shared how to successfully use Tailwind CSS v3.4.17 with a Vite project by downgrading the version and configuring it properly.  

If you’ve found a better way or have insights, feel free to drop a comment and let me know!  

Cheers!