How to setup your Vite project with React, TypeScript, and TailwindCSS v4 🚀

With the launch of TailwindCSS v4, setting up a project with Vite has changed. You no longer need to install PostCSS and Autoprefixer. Instead, TailwindCSS v4 comes with a dedicated Vite plugin, making the setup process simpler while offering better performance and an improved 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 in the browser screenshot below, 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! 🚀