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 due to 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

💡
Change project-name with your project name.

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.

💡
Note: Here --template react specifies that we are creating a React App with Vite.

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:

💡
Note: Change the demo-project to the name of your project.

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;

💡
There will be some default styles added to the folders. Do delete them and add your styles. Otherwise, I might create confusion.

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 and other web development topics.

To sponsor my work, please visit: Arindam's Sponsor Page and explore the various sponsorship options.

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

Thank you for Reading :)