How setup a React project with Vite, Typescript and Tailwind

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 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 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 isindex.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 ✨.