How to Setup a React + Vite Project with TailwindCSS Framework
Tags: react, vscode, tailwindcss, tutorial
Published: 2022-10-31 04:12:42



## Introduction
In this article,  you we learn how to set React app with Vite using TailwindCss.

React is a JavaScript Framework for Front-end Development widely used by front-end Developers.

Tailwindcss is a CSS framework, that is currently in trend and used by most Developers just like Bootstrap and other frameworks.


## Prerequisites
To set up this project we need Vscode and Nodejs to help us with all the dependencies we need.

Visit the link below to help you install Vscode[(https://code.visualstudio.com/download#)]

visit the link below to also install Nodejs
[(https://nodejs.org/en/download/)]

## Creating a folder
After we must have installed our Nodejs and Vscode, the next step is to create a folder on our Desktop or Preferably on our Local Disk and name it according to your project. For this article, we name our folder 

> Newfile


## Using Vscode to open our folder

Now, We will open the folder we created by opening our Vscode


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ncm6w6r3703r21mub0pd.JPG)


## Installation of vite
We are going to install Vite

use this link [(https://vitejs.dev/guide/)]

you should have a screen like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lml2cgnj75wm16vyj7ap.JPG)


## Installing Vite
We are going to copy the highlight command 

```
(npm create vite@latest)
```
 
and open our Vscode then click on the terminal and open a new terminal


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tqlpg136mhpgygeb9tip.JPG)

and paste it just like this

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kph347lsasndc2fl8x43.JPG)

using our keyboard we are going to type the letter y to proceed. And add our project name as requested.


## Selecting the framework we need
We click on the enter button, and next up we use the arrow key to navigate through the framework we want. for this, we are using React. just like what we see below.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j5yo3ghbohjcziyy56a7.JPG)


## Making our desired option
After navigating we click on React, another option to select from will be out to select either JavaScript or TypeScipt, we are going to click on JavaScript. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mrmriey8ubqbyo4uv7oi.JPG)


After installation, we have a screen like this to run the following commands

```
cd <project name>
  npm install
  npm run dev

```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4xlz1xawqnk0871ghotg.JPG)


## Redirecting into our main project
we are using the cd command to go back to our root directory

> cd ./text/
which is our project name


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rsbsf2iz6r4ovirlbhiw.JPG)


Now we are in our root directory, next up is to run our next command which is

```
npm install
```

 After installation we run this command also 

```
npm run dev
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5634g5ivdsd426wue0vz.JPG)

Now we have installed all our necessary dependencies, our welcome screen should look like this


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dx9xdkmh245dhzm53ovw.JPG)


## Adding TailwindCss to our Project
We have succeeded in installing React and Vite, the last installation we need is the TailwindCss framework.

For that, we visit the tailwindcss documentation to help us install it in our project

here is the link [(https://tailwindcss.com/docs/installation/using-postcss)]


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hyz447c9wyizzuey4zfz.JPG)


## Installing TailwindCss
We are going to copy the first command as shown above and paste it into our terminal, click the enter button to begin the installation.

Secondly, we install the next command shown

```
npx tailwindcss init
```


## Adding the config

Go back to our tailwind documentation so we can copy the config


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1w1a504jbug1gpmxbksw.JPG)

We copy the three config statements and paste them into our `index.css` file inside our `src` folder


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cr6r64y10llxtqdg1eig.JPG)



We click on `tailwind.config.cjs` file and add the extensions as shown below on the screen

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ztjlozeeoj0nagrmvxk1.JPG)


## A sample Test
Wow !! we have set up a React Project and tailwindcss for styling, let do a sample text on tailwind

```
import React from 'react'

export const App = () => {
  return (
    <div className='py-10'>
      <div className='text-white font-serif justify-center items-center py-2 w-auto'>
        <h2 className='w-auto bg-blue-600 rounded-lg px-3 py-2'>Congratulation you finally Install React + Vite + TailwindCss</h2>
      </div>
    </div>

  )
}

export default App

```
then run the command

```
npm run dev
```

We will have an output of this below


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nve3pn32wmu2mc6318i2.JPG) 


## Conclusion
In this article, we learned how to install React Project and Vite, then scaffold Tailwind CSS as our UI framework library.

Here is the link to the GitHub repository [(https://github.com/Meenah-gurl/react_vite_tailwindcss.git)]