> ## Content Index
> Fetch the complete content index at: https://reactpractice.dev/llms.txt
> Use this file to discover other available public pages before exploring further.

# How setup a React project with Vite, Typescript and Tailwind
- URL: https://reactpractice.dev/articles/how-setup-a-react-project-with-vite-typescript-and-tailwind/
- Published: 2025-02-12T13:25:45.000Z
- Updated: 2026-06-01T01:58:35.000Z
- Author: Corina Udrescu
- Tags: Articles, #corina-2, #Import 2026-06-09 12:07

This is my favourite way to scaffold solutions for the practice projects.  
It's super straight forward, so let's get to it.

### Create a React project with Vite

It's as simple as:

```
npm create vite@latest

```

You will get a nice wizard that will ask you what you want to create - pick "React" and "Typescript". See the [official docs](https://vite.dev/guide/?ref=reactpractice.dev) for more details.

### Initialise a git repository

It's useful to be able to track the changes to your project.  
To do that, you can initialise a git repository by running `git init` in the root folder.

I usually just commit the initial files now, to have a snapshot of how the project looked like at the very start:

```
git status
git add .
git commit -m "Initial commit"

```

### Remove Vite demo content

The Vite starter comes with a counter app showing the Vite and React logo. We don't need it, so to cleanup the starter content, do these steps:

- Delete the logos - `public/vite.svg` and `src/assets/react.svg`
- Cleanup the CSS by just deleting all the content inside `src/index.css` and removing `src/App.css`
- Cleanup demo code by removing everything in the `App.tsx` render method - you can return `null` or add a simple `<p>Hello world</p>` message
- Update the imports in `App.tsx` to no longer point to all the deleted files

Now is a good time to commit these changes as well.

### Add Tailwind

[Adding Tailwind to Vite](https://tailwindcss.com/docs/installation/using-vite?ref=reactpractice.dev) works just as described in the official docs.

First, you need to install Tailwind:

```
npm install tailwindcss @tailwindcss/vite

```

Next, you need to hook the Tailwind plugin into your Vite build:

```
// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
});

```

Last, you need to include Tailwind's CSS utils to your main css file - which is`index.css` in our case:

```
@import "tailwindcss";

```

And that's it - you can now use Tailwind classes in your components.

You are ready to go ahead and build things now 💪🍀!

But wait .. what about **testing**?!

Keep reading this follow-up tutorial for [how to setup Vitest and React Testing Library in this project](https://reactpractice.dev/articles/add-unit-testing-support-to-a-react-project-using-vite-and-typescript/) ✨.