Vite is a build tool and development server designed for modern JavaScript applications. Vite is built on the principles of ES modules and leverages the native module system supported by modern browsers. Unlike bundlers that combine all your code into a single bundle, Vite serves the modules as separate files during development. This approach eliminates the need for a time-consuming bundling step, resulting in faster startup times and quicker reloading of modules as you make changes.

Tailwind CSS is a utility-first CSS framework that offers a wide range of pre-defined utility classes for rapidly building user interfaces. It enables developers to easily style their components by composing these classes, promoting flexibility and efficiency in web development.

Vite is not a React-specific tool, but it is one of the quicker ways of setting up a React project.

Scaffold the project

Navigate to the directory where you want to create the project. Run the following command and answer the prompts.

npm create vite@latest

This command might ask you to allow installation for the latest Vite package. Answer yes.

First, enter your project name.

Next, select your framework. In our case, we will choose React.
You could also set up a simple JavaScript, or Svelte or Preact project as well.

Then, we need to select the variant. In our case, I am going to select TypeScript.
You can also select JavaScript.
By default, Vite uses Rollup as the module bundler.
You also have the option to add SWC, which is Speedy Web Compiler. SWC is a Rust-based JavaScript and TypeScript compiler/transpiler, minifier, and bundler. It promises faster build times but has some limitations as of now. For now, we will avoid it.

The scaffolding of the project is complete now.

Install dependencies

To install the dependencies, you will need to change the directory to the project directory and run the command below.

npm install

Run the application

To start the application for development, run

npm run dev

The application should be running at http://localhost:5173

The project files have been created. You can see the main App.tsx file in the src directory.

You can create new components and files and the Vite dev server automatically picks it up and will rerender your site. Makes for a great development setup.

Set up Tailwind CSS

Install Tailwind CSS

npm install -D tailwindcss postcss autoprefixer

Run the command below to generate the tailwind and postcss config files.

npx tailwindcss init -p

Add the paths of all the files which will contain tailwind classes i.e. all your template files to the tailwind.config.js file. In our case that will be the index.html file and all typescript, and javascript files in the src directory.

content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ]

Add tailwind directive to your index.css file. Delete any existing CSS before pasting these directives. These need to be placed at the top of the file.

@tailwind base;
@tailwind components;
@tailwind utilities

Run the project by running npm run dev

Delete existing any JSX in the App.tsx file and add a normal div element with some tailwind CSS styling.

<div className="text-3xl text-yellow-300 underline">
    Hello world!
</div>

Navigate to the browser and you should see Tailwind styling applied.

That's it 🙌🏾 You are ready to work on your next billion-dollar idea 🚀