Setup Vite+ ReactJs with Tailwind CSS

Introduction:

We, Developers, always try to Optimize things! That's where this Combo (Vite+React+Tailwind) is gaining popularity among developers because of its fast development experience and performance.

In this article, we'll learn how to set up a Vite+React project with Tailwind.

Excited! Right?

Me too!!!

So without delaying further, let's Start!!

Steps:

Step-1:

First, open the Terminal and choose the directory where you want to create the project folder. In this case, We'll select the desktop directory.

For that run the cd Desktop in the Terminal.

Step-2:

Now, Create the Project folder on the Desktop by running the following command on the Terminal:

npm create vite@latest project-name -- --template react

Here We'll take the project name as Demo project.

So our command will be:

npm create vite@latest demo-project -- --template react

This command will create our Project folder.

Step-3:

After Creating our project folder, Let's navigate it.

For that run

cd demo-project

After running this command, you'll get this:

Step-4:

Now, We'll download TailwindCss and other required dependencies.

Run the following command:

npm install -D tailwindcss postcss autoprefixer

This command installs Tailwind CSS framework, post-Css, and a post-Css framework autoprefixer.

To confirm that these dependencies have successfully been installed in your project check package.json , It should look like this:

Step-5:

Now, We'll generate tailwind Configuration files.

Run the following command:

npx tailwindcss init -p

This command generates tailwind.config.js andpostcss.config.js configuration files.

Step-6:

Next, We'll add the paths to all of your template files in your tailwind.config.js file. Template files include HTML templates, JavaScript components, and other source files that contain Tailwind class names.

With this, the Tailwind classes will be applied throughout the project.

To do that, we'll add the following code to the content section of tailwind.config.js file.

"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",

Now the file will look like this:

Step-7:

Now that we have set up Tailwind in the project, We will add the Tailwind directive to our project.

To know more about Tailwind directives, check out This .

We'll add the tailwind directives in index.css

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

Step-8:

We are Almost Done!!

Now We will start our Vite server by running the following code:

npm run dev

It will open one link to Localhost.

Now, After going to the link, you will find something like this:

We got this because we haven't Deleted the default CSS styles yet.

Final Step:

In this step, we will validate that Vite and Tailwind CSS work fine together. Let's Go to our App.jsx file and write this code:

import { useState } from 'react'
const App = () => {
    return (
        <div className="App">
            <h1 className="text-3xl text-center font-bold underline">
                Hello world!
            </h1>
        </div>
        )
}
export default App

And we got this output:

Now!!

We are Ready to go!

Now Start building your Dream Project!!

Conclusion:

If you found this blog post helpful, please consider sharing it with others who might benefit. You can also follow me for more content on Javascript, React, and other web Development topics.

For Paid collaboration mail me at : arindammajumder2020@gmail.com

Connect with me on Twitter, LinkedIn, Youtube and GitHub.

Thank you for Reading :)