How to Create a New React App Using Vite

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.

Instructions

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: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  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!