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)]
Top comments (0)