How To Setup A Frontend Project On Any Framework With VITE And Tailwind CSS
Tags: vite, tailwindcss, tutorial, react
Published: 2022-03-12 04:06:52


## Introduction 
It is no news that most modern frontend of applications are built on a JavaScript framework. Little wonder why we have numerous JavaScript framework or library at our disposal. Setting up a basic project becomes an issue sometimes as developers try to follow different instructions or directions by different creators.

How about you follow the same basic steps in setting up your frontend application with just about any framework or library of your choice?

Now this is where VITE comes in!

In this tutorial, I will guide you step by step on how you can setup your frontend application with VITE and TailwindCSS.

## Terminologies 
**1. VITE**
This is a build tool that aims to provide a faster and leaner development experience for modern web projects. [Read More](https://vitejs.dev/guide/).

**2. TailwindCSS**
Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file. [Read More](https://tailwindcss.com/docs/installation).

## Prerequisite
In order to flow easily with this tutorial, I suggest that you already understand the basics of setting at least one JavaScript framework or library. 

Understanding the basics of CSS may come in handy. 

If you are ready, then let’s get to work!

![let’s get to work](https://media.giphy.com/media/l2Je0BC2ZoiXbYaAM/giphy.gif)

## Setup A Frontend Project
We will begin by scaffolding a JavaScript framework or library, then we will add the CSS library.

**STEP 1: Scaffolding a JavaScript framework or library**

* Open your terminal and navigate to where you will like your project to live. I will be using [VSCode](https://code.visualstudio.com/) for the purpose of this tutorial.

* Run the following command to install the ``latest`` VITE and start the project setup.

```javascript

npm create vite@latest

```
*You can replace the ``latest`` with any other version of VITE you may prefer*

* You should get the following prompt
![prompt to create VITE](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h3o3t5wx029hc4iwqrf0.png)

* Type `y` and hit the `Enter` key to proceed and you should get the following prompt to Name the project

![prompt to Name the project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xnaa7syp11czbn1lfowt.png)

* Type `vite-tailwind-tut` and press the `Enter` key to proceed. You should now have different options of JavaScript framework and libraries to pick from like so:

![different options of JavaScript framework and libraries to pick from](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gtq35rkrzi7wbtpsx7ux.png) 

*Do you see the beauty of VITE? Same setup procedure for just any framework or library*

* Now select anyone of your choice. Use the ARROW UP or ARROW DOWN key to move to the option of your choice. Click Enter when you are sure. 

*For the purpose of this tutorial, I will be selecting REACT to demonstrate like so:*

![selecting REACT](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1r5ed5qt59zji5sk8qq1.png)

* Next select a variant and press Enter. *I will be using just REACT and nothing more for this tutorial*
![select a variant](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3yc6c0d9yxih8yfptsw7.png)

*Isn’t this awesome? You can also choose if you want to use Typescript or not*

That step completes the scaffolding.
![scaffolding completed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cdqk30cshx8lcagsqdvn.png)

* Now move into the project folder with the following command

```javascript

cd vite-tailwind-tut

```

* Install the basic dependencies with the following command:

```javascript

npm i

```

![Install the basic dependencies](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iezk6zvsaxhctmkonk4v.png)

* You now have run the following command to start the local server

```javascript

npm run dev

```

![start the local server](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6gz7xr95jdbt3lzbhwpm.png)

* Navigate to http://localhost:3000/ to view your project on your browser

![view your project on your browser](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gerg4buyh2awj9l650cz.png)

> How Awesome!!! You deserve a round of applause for this success. 

You can find the code for the VITE setup [here](https://github.com/EBEREGIT/vite-tailwind-tut/tree/vite)

But we are not don yet. We still have some more exciting thing to do. Let's continue 

![Let's continue](https://media.giphy.com/media/DQgecTltONFTrG0NcT/giphy.gif)

**STEP 2: Add TailwindCSS**
* First we have to install Tailwind in our project. Use the following command:

```javascript

npm install -D tailwindcss postcss autoprefixer

```
* Next, create the tailwind config files with the following command:

```javascript

npx tailwindcss init -p

```
*The ``-p`` flag is very important for everything to work properly. You will notice that there are two files created. That is the `tailwind.config.js` and `postcss.config.js`. These files are used to configure the project as one wishes.*

![tailwind.config.js and postcss.config.js files](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rzwiwkeyi7e1fmun6yxr.png)

* Now, add the following configuration to the `tailwind.config.js` file

```javascript

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

```
*The configuration above directs tailwind to affect all files with js, jsx, ts and tsx extension. Hopefully, that makes sense.*

* Finally, replace the styles in the ``index.css`` file with the following tailwind directives

```javascript

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

```
* To ensure all the changes we made are effective, please save all files affected and restart the server with:

```javascript

npm run dev

```

### Testing 
To see if our configurations have taken effect, replace the code in the `App.jsx` file with the following code:

```javascript

export default function App() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}

```


*The class names you see are all from tailwind. Those classes are saying: "We want this text 3 times bigger, bolded and underlined". If you understand CSS already, then you will appreciate how simple tailwind makes this look.*

Now when you check out the you setup in the browser, you should have the following screen to confirm that all configurations were done properly.

![screen to confirm that all configurations were done properly](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k3po1ggyveetm37mubh4.png)

YAHY... We have a project setup ready for whatever idea we have in mind 🔥 

You can find the code for the Tailwind setup [here](https://github.com/EBEREGIT/vite-tailwind-tut/tree/tailwind)

YOU ARE A GO GETTER! 🔥 

### Conclusion 
The objective of this article was to show you how you can setup a frontend project with any JavaScript framework or library of your choice and add Tailwind that helps us stick to our `jsx` instead of jumping between our `jsx` and `CSS` file repeatedly.

I hope you share my enthusiasm for these technologies. I feel like they are here to better the developer’s life.

All Codes are [here](https://github.com/EBEREGIT/vite-tailwind-tut)

We might be expanding this project in the future. Until then, I encourage you to checkout the documentations to see even more for yourself.