How to create a react app using Vite js and tailwind CSS

How to create a react app using vite js and tailwind CSS

This article will teach you how to create a react app using Vite js and Tailwind CSS. We will install react in our project with the help of Vite js. And we will use Tailwind CSS instead of standard CSS. We can create this app using a regular web pack. But the web pack is slower than Vite js. I’m not forcing you to use it, but Vite js gives you the speed. And it has more features than the web pack.

First of all, let’s figure out why we use Vite js.

Why Vite?

It is essential to know why we use vite in place of the regular web pack. Vite is a build tool that provides a faster development experience for new projects. It has various better features than Web pack.

• It improves the page reloading speed of your web project by converting standard JS to ESM.
• It rewrites the imports of valid URLs so that web browsers can import them correctly.
• The most impressive feature of Vite js is the Hot Module Replacement (HMR). Vite with Hot Module Replacement capabilities can pull the API to provide fast,  correct updates without reloading the web page.

We learned why we use Vite instead of web pack. Now let’s figure out why we use Tailwind CSS in this application.

Why Tailwind CSS?

Although we can use standard CSS to style react apps. And it is good to use only  CSS for beginners. But as we move from basic to advance it is almost impossible to handle standard CSS. To tackle this problem we should go with the frameworks like Bootstrap, Tailwind, etc. Bootstrap is also a good CSS  framework. But Tailwind is more flexible and reliable than Bootstrap.

Tailwind CSS is a utility-first framework with classes that can be directly added to your markup language. No doubt, it improves your productivity and saves a lot of time to style web projects. Let’s take a look at its features,

• Tailwind CSS is easy to use and more flexible than any other framework.
• It compresses the long CSS classes like "margin-bottom: 3rem;" into short classes like "mb-3".
• It encourages us to build whatever we want without repeating the same design pattern.
• Making web applications responsive is simple in Tailwind CSS without using complex media queries.
• The most impressive feature is the dark mode. We can set “dark mode” or “Toggle dark mode” easily to Tailwind CSS websites.
• It provides the power to set our style with tailwindcss websites. In Tailwind, we can customize almost every class.

After gathering knowledge about these technologies,

Let’s explore How to create a react app with the help of Vite js. We also add and set up tailwind later.

In our case, we will set up the application with the help of  Visual Studio Code,

How to create React app with the help of Visual Studio Code.

VS Code has multiple extensions and language intellisence to make you more productive. If you don”t install VS Code first install it. Or you can do it with a terminal (power shall). It depends on you!

Let’s set up Visual Studio Code

To set up VS Code to create react app. Follow these steps-

1. Run VS Code on your device. After running you will see it like this.
   
2. Now, open the desired folder in which you want to create this web application. For example, I used a folder named “React projects”.
3. After opening the folder, Start the terminal of VS Code. You can manually start it or use this shortcut Ctrl+Shift+` to start the terminal. After opening the folder and VS Code terminal, it looks like this-

   

   Note:- Ignore the projects showing in this folder.

We successfully set up VS Code and Now get on to the important part.

Creating React app with the help of Vite JS

Now, Let’s create a vite project 

Note:- Make sure you installed Nodejs in your system. Vite requires Node.js version 14 or more.

To create a Vite project run the following command in your terminal.

If you are using NPM

npm create vite@latest

If you are using Yarn:

yarn create vite 

If you are using PNPM:

pnpm create vite

After running the previous command, Vite asks for the Project name. Here you will write the desired name of your project.

Sometimes it also asks for the Package name. It happens when you entered an Uppercase letter or give whitespace between the project name.

To tackle this, just enter your project name in the lowercase format and use this “-” symbol instead of whitespace as shown in the placeholder of the package name. OR you just hit the enter key.

Then it suggests you some frameworks, and you have to select a framework. Here we select react and hit enter key/button.

Again it asked by which technology you want to go with react. If you want to go with JavaScript you can select it. If you want to go with TypeScript you can select it.

Here we select JavaScript for our react application. Now we completed our Vite scaffolding. If you see the result as shown in the image, that means you did it correctly. To ensure, you can also see your project created in your current folder.

Run the following commands in your terminal to install React in the Vite project.

cd 'project name'

Here instead of ‘project name’ you have to write your project name such as ‘modern portfolio’. After coming into the project which you created recently, Run the following command to install react to our project.

npm install

It took a while to install react and set up it with vite. If you see the output as shown in the image, you successfully created a react app.

All we need to run this app. To run this application run this command into your terminal.

npm run dev

That’s it, We created the react app. If your app runs successfully, you will see a link in the terminal. Just copy the link and paste it into your browser and you are ready to go.

But we are not done yet,

let's install tailwindcss to our react application

Installing Tailwind CSS to react application

To install it follow the instruction below.

Install using NPM:

npm install -D tailwindcss postcss autoprefixer

Initialize Tailwind CSS files:

npx tailwindcss init -p

After initializing, you will notice that the “tailwind.config.cjs”, and “vite.config.js” files are created in your current folder.

Configure templates path

Add the path of all template files in the “tailwind.config.cjs” file. As you can see, I add the template files path into the array.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}','./index.html'],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add directives to your CSS

In the src folder remove all previous CSS properties and add the directives shown below to your “index.css” file. Make sure you added the path of the “ index.css “ file to the “ main.jsx “ file.

@tailwind base;
@tailwind components;
@tailwind utilities;

All set,  Just run the application by running this command to your current terminal.

npm run dev

To notice changes in output, Enter some Tailwind CSS classes to react application.

Conclusion

Finally, we learned, How to create react app using vite js and tailwind CSS. These are awesome technologies for coding front-end projects. Because it gives speed and fast development experience. If you use vite and tailwind, I am sure you will become a fan of these technologies. 

I’m sure you learned something new from this article. For more stuff like this keep visiting. Please give us feedback to us. Your feedback can improve our content.

If you have queries, JUST TELL US! We do our best.

Thank you!