Misleading order of steps in the "Using Vite" installation guide

[mohammad-kenaan]

Page:
https://tailwindcss.com/docs/installation/using-vite

Section:
Get started with Tailwind CSS

Problem:
As a new user, I followed the guide step by step.
When I selected Vite as the installation method, the first command I was instructed to run was:
npm install tailwindcss @tailwindcss/vite

Then in Step 2, it asks me to Configure the Vite plugin by editing vite.config.js.

However, at this point, I haven't even created a Vite project yet, and the file vite.config.js does not exist.

Nowhere in the page does it say that I need to initialize a Vite project first using:
npm create vite@latest my-app

This led to confusion, especially as a beginner who followed the documentation literally.

Suggestion:
Please consider updating the page to include a clear first step for creating a Vite project before installing Tailwind packages, or at least a note that assumes the reader has already initialized a Vite project.

This small clarification can make a big difference for beginners.

[rozsazoltan]

The issue with this is that installing Vite is not directly related to TailwindCSS. If the Vite installation process changes tomorrow, this step in the documentation would need to be updated unnecessarily. To install Vite, use the official Vite Docs, and to install TailwindCSS in an existing Vite project, use the mentioned Using Vite section. I believe this is how it should work for all dependencies.

• Step 1. Generate Vite project
• Step 2. Install TailwindCSS to existed Vite project

With these two links, anyone - whether a beginner or experienced - can do everything they need.

Instead of updating the documentation, I recommend that any beginner who ends up here become familiar with the documentation of the programs, tools, and dependencies they are using. In general, the dependencies and projects that tend to be sustainable are those that provide very user-friendly documentation for installation and usage. I believe both TailwindCSS and Vite do an excellent job in this regard.

[mohammad-kenaan]

Thank you for the clarification.

However, I’d like to respectfully add that as a beginner coming from a basic HTML/CSS/JS background (still using Live Server), I didn’t know what Vite was at all. When I reached the “Using Vite” section in Tailwind’s docs, I naturally assumed that running:

npm install tailwindcss @tailwindcss/vite 

[mohammad-kenaan]

That command above, would set up everything I need — including Vite. But I was left confused when asked to configure a vite.config.js file that didn’t exist.

📌 Suggestion (from a beginner’s point of view):
Please consider adding a short note at the beginning of the “Using Vite” section, such as:

“To use Tailwind CSS with Vite, you must first have a Vite project set up. If you don’t have one yet, please refer to the official Vite documentation to create a project first.”

This would avoid confusion for those who are just starting and don’t yet know how tools like Vite work.

Thanks again for the amazing tool and documentation!

[mohammad-kenaan]

I admit that I almost gave up and considered using another tool because the results I got didn’t match the documentation steps. Thankfully, ChatGPT helped me understand what was missing and why — but not everyone may have access to that kind of support. A simple clarification could save many beginners from frustration and keep them on track.

Thanks again for your time and the great work you do!

[mohammad-kenaan]

You're absolutely right — the ideal approach is to follow the Vite documentation first to properly create a Vite project, and then integrate Tailwind CSS into it.

However, as a new learner, I simply went to the Tailwind CSS website, clicked the "Get started" button, and ended up on the Using Vite page. From there, I followed the listed steps assuming it was a complete guide. Since there was no mention of needing to create a Vite project beforehand, I became confused when asked to edit vite.config.js — a file that didn't exist.