This content originally appeared on DEV Community and was authored by Geane Ramos
With the launch of TailwindCSS v4, the process of building a project with Vite has become even simpler, as it eliminates the need to manually configure PostCSS and Autoprefixer for Vite projects. Instead, TailwindCSS v4 now includes a dedicated Vite plugin that simplifies the setup process , providing improved performance and a better developer experience.
In this guide, let's walk through the steps to create a project using Vite, React, and TypeScript, and integrate TailwindCSS v4. Let’s get started! 🚀
Project Setup
Step 1: Create a New Vite Project
First, let’s create a new Vite project with React and TypeScript. Open your terminal and run the following command:
npm create vite@latest . -- --template react-ts
Note: This command creates the project in the current directory. If you want to create the project in a different folder, simply add the folder name (in this example, the folder name is "my-project"):
npm create vite@latest my-project -- --template react-ts
After running the command, navigate to your project directory (if applicable):
cd my-project
Step 2: Install TailwindCSS and the Vite Plugin
To install Tailwind CSS and the necessary plugin for Vite, run:
npm install tailwindcss @tailwindcss/vite
Step 3: Configure TailwindCSS in vite.config.ts
Now, let’s configure TailwindCSS in your Vite project. Open the vite.config.ts file and add the Tailwind plugin:
Step 4: Add TailwindCSS to Your CSS
Next, open the src/index.css file and add the TailwindCSS import:
Note: In v4 you import Tailwind using a regular CSS @importstatement, not using the @tailwind directives @tailwind base, @tailwind components, and @tailwind utilities you used in v3.
Step 5: Remove Unnecessary Files
After setting up Tailwind, you can safely remove the App.css file from your project as it is no longer needed.
Step 6: Use TailwindCSS in Your Components
Now that TailwindCSS is set up, you can start using its utility classes in your components. To check if it works, for example, modify your App.tsx file as follows:
Step 7: Run Your Project
Finally, start your development server to see your project in action:
npm run dev
As you can see above, it worked perfectly!
Recommendation: Tailwind IntelliSense for VS Code
To enhance your development experience, I highly recommend installing the Tailwind IntelliSense extension for VS Code. It provides advanced features like:
Autocomplete for Tailwind classes.
Syntax highlighting.
Linting for TailwindCSS.
Conclusion
Congratulations! 🎉 You’ve successfully set up a Vite project with React, TypeScript, and TailwindCSS v4. With the new dedicated Vite plugin, the process is now faster and simpler than ever. If you found this guide helpful, feel free to share it with your fellow developers or leave a comment below with your thoughts. Happy coding! 🚀
This content originally appeared on DEV Community and was authored by Geane Ramos
Geane Ramos | Sciencx (2025-02-26T22:27:14+00:00) How to setup your Vite project with React, TypeScript, and TailwindCSS v4 🚀. Retrieved from https://www.scien.cx/2025/02/26/how-to-setup-your-vite-project-with-react-typescript-and-tailwindcss-v4-%f0%9f%9a%80/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.