<Slushman />

unsplash-logo SOCIAL.CUT

How to Create a New React App Using Vite

Published Nov 17, 2023

When you find yourself looking up the same set of instructions and consistently finding the wrong ones over and over again, it’s time to document things for yourself. So, future self (and everyone else), this is how to create a new React app using Vite. This uses Typescript as well.

Before we get started, there a few requirements. First, use node version 18 or higher.

nvm use 18

Second, I’m using yarn for all the instructions here. If you prefer something else, you’ll need to translate it to the correct commands; they are slightly different.


Run this command in your terminal to create the project and starter files:

yarn create vite app-name --template react-ts

Next, go into the folder, install all the dependencies, then get started:

cd app-name && yarn install

Add Tailwind

Now, let’s add Tailwind because, why not?

yarn add --dev tailwindcss postcss autoprefixer

Then, create the tailwind config file:

npx tailwindcss init -p

Configure the template paths in the tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
  theme: {
    extend: {},
  plugins: [],

Open the ./src/index.css file and add the @tailwind directives:

@tailwind base;
@tailwind components;
@tailwind utilities;

Build Stuff

Start things up and test it out:

yarn dev

Go build stuff!

Share this post!

Check out these most recent posts:

Write Comments in HTML

Learn the different ways to write comments in HTML , where you can and cannot put them, and how it can help you write code.