How to Set Up a ReactJS Project with Vite, TypeScript, and TailwindCss

Setting up a React.js project with Vite and Tailwind CSS can be simpler than you think. This step-by-step guide will help you build a fast and modern React app with ease. By the end of this article, you will have a fully functional React app that looks great and runs smoothly.

Why Choose Vite and Tailwind CSS?

Vite is a modern build tool. It provides faster startup and development speeds than "Create React App.”
Tailwind CSS is a utility-first CSS framework that lets you build custom designs without writing much custom CSS.

Combining these two tools with React creates a fast and efficient development environment, perfect for beginners and experienced developers.

Prerequisites

Before you begin, have a text editor and a web browser ready. In this tutorial, I used Visual Studio Code (VSCode) as the editor. To get started, ensure you install the following tools :

Node.js (version 16 or later). If you don’t have it yet, download it from Node.js.
A code editor, such as Visual Studio Code.
Basic knowledge of JavaScript and React.

Now that you have these tools, follow the steps below to create your React app with Vite, TypeScript and Tailwind CSS!

Step 1: Create a React.js Project with Vite

Open your terminal
Run this command to create a new React project using Vite:
```

npm create vite@latest my-react-app --template react

```

Replace my-react-app with your desired project name, for example, react-project. The command will look like this:

```

npm create vite@latest react-project --template react

```

Create new project command

3. After running the command, you will see a prompt in your terminal asking you to select the framework. Use the arrow keys to ‘React’ and press Enter:

Framework prompt

4. Next, a prompt will display to select a variant. Use the arrow keys to ‘TypeScript’ and press Enter. This tutorial uses TypeScript, but you can choose a different variant if you prefer:

Variant prompt

Step 2: Install Dependencies

Change into the project directory by running the following command

```

cd react-project

```

2) Install the project dependencies using this command

```

npm install

```

It will take a few minutes for your React.js project to set up with Vite.

Install Reactjs dependencies

Step 3: Install Tailwind CSS

Next, use this command to install Tailwind CSS and its dependencies

```

npm install -D tailwindcss postcss autoprefixer

```

This will install Tailwind CSS packages and their dependencies.

Taiwindcss command

2. Run this command to generate the Tailwind configuration files:

```

npx tailwindcss init -p

```

This command generates the Tailwind configuration files, which include:

tailwind.config.js: This file configures Tailwind CSS, like specifying where your templates are located and adding custom settings if necessary.
postcss.config.js: This file processes Tailwind CSS styles during the build process.

Tailwind configuration

Step 4: Configure Tailwind CSS

Open the tailwind.config.js file.

Tailwind config file

Update the content property with:

```

"./index.html", "./src/**/*.{js,ts,jsx,tsx}"

```

This tells Tailwind to scan your files for classes and ensures it generates styles based on the classes you use in your project. It should look like this:

Update content property

Step 5: Add Tailwind CSS to Your Project

Open the file src/index.css.
Add the Tailwind’s base styles, components, and utilities at the top of the existing content or remove all the existing content and add them in the index.css file:

```

index.css

@import 'tailwindcss/base';

@import 'tailwindcss/components';

@import 'tailwindcss/utilities';

```

Tailwind base , component and utilities

Step 6: Test Your Setup

Open the src/App.tsx file.
Replace its content with the following code to test your setup :

```

export default function App() {

return (

<div className="flex items-center justify-center min-h-screen bg-gray-100">

<h1 className="text-4xl font-bold text-blue-600">

Welcome to React with Typescript and Tailwind CSS!

</h1>

</div>

);

}

```

App.tsx content

3. Finally, run this command to start the development server

```

npm run dev

```

This command will display this,

Development starter

The URL (http://localhost:5173/) is clickable. Click on it to open your project in the browser, or copy the URL and paste it into your browser’s address bar to view your project.

Web browser

Conclusion

Great job! You have set up a React.js project with Vite and Tailwind CSS. Now, you can build amazing websites that are both fast and beautiful.

If this guide helped you, share it with your friends or anyone interested in web development. Connect with me on Twitter, and LinkedIn for more helpful tips and resources.

Further Learning

To continue your learning journey, here are some additional resources:

Keep building and happy coding!

Link to Source Code

Check the source code on my GitHub repository to see the full project structure or to clone a pre-configured version of this setup.

You can fork the repository or download the project to get started quickly.

Error Handling: Common Errors and Troubleshooting

As you proceed with this tutorial, you might encounter some common errors. Here are a few troubleshooting tips for beginners:

1. Error: "npm command not found"

Solution: Ensure that you install Node.js correctly. Check if you install Node.js and npm using :

```

node -v

```

and

```

npm -v

```

If not, reinstall Node.js from nodejs.org.

2. Error: "Vite is not recognized"

Solution: Ensure you select the correct Vite template. If the problem persists, try reinstalling Vite with

```

npm create vite@latest.

```

3. Tailwind CSS not working

Solution: Check if you configured the tailwind.config.js correctly, and ensure that you have added the Tailwind imports to src/index.css. Also, make sure you've restarted the dev server after installing dependencies.

4. The React development server not starting

Solution: Ensure you install the project dependencies correctly by running :

```