How to Setup a React + Vite Project with TailwindCSS Framework

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

Installation of vite

We are going to install Vite

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

you should have a screen like this:

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

and paste it just like this

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.

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.

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

cd <project name>
  npm install
  npm run dev

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

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

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

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)]

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

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

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

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

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)]