DEV Community

Cover image for Setup Vite+ ReactJs with Tailwind CSS
Arindam Majumder
Arindam Majumder

Posted on • Originally published at arindam1729.hashnode.dev

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!!

Lets Do It Brad Mondo Sticker - Lets Do It Brad Mondo Lets Do This Stickers

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


Enter fullscreen mode Exit fullscreen mode

๐Ÿ’ก
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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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}",


Enter fullscreen mode Exit fullscreen mode

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;


Enter fullscreen mode Exit fullscreen mode

๐Ÿ’ก
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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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 :)

Top comments (8)

Collapse
 
dumebii profile image
Dumebi Okolo

Thanks for sharing!

Collapse
 
arindam_1729 profile image
Arindam Majumder

Glad you liked it!

Collapse
 
nyanyiwast profile image
Sedrick Tha Dev

Life saver!

Collapse
 
arindam_1729 profile image
Arindam Majumder

Thanks

Collapse
 
sammaji profile image
Samyabrata Maji

Concise and to the point, loved it ๐Ÿ”ฅ

Collapse
 
arindam_1729 profile image
Arindam Majumder

Thanks a lot,Sam!

Collapse
 
migoui profile image
Michael

Thanks a lot, Iโ€™ll try it tonight

Collapse
 
arindam_1729 profile image
Arindam Majumder

Glad you found it helpful