Project Set-up

Set up the environment first by creating a React project with Vite, then install Tailwind CSS and add Font Awesome icons:

Step 1: Create a React project with Vite

Start by creating a new project folder and opening it in VS Code.

• Open the terminal and run:

npm create vite@latest

• Then move into the project folder by running this command:

cd Word-Counter-Tool   (cd <Your Project Name>)

• For installing dependencies, run:

npm install

• Start the development server through this command:

npm run dev

• After running npm run dev, your project will be live on your local host at:

http://localhost:5173/

Step 2: Install Tailwind CSS

Set up and configure Tailwind CSS by following the official Vite installation guide: Get Started

Step 3: Install Font Awesome Dependencies

Run the following commands in your project terminal to use Font Awesome icons in your project:

npm i --save @fortawesome/react-fontawesome@latest

npm i --save @fortawesome/fontawesome-svg-core

npm i --save @fortawesome/free-solid-svg-icons

npm i --save @fortawesome/free-regular-svg-icons

npm i --save @fortawesome/free-brands-svg-icons