How To Setup A Frontend Project On Any Framework With VITE And Tailwind CSS

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.

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.

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!

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 for the purpose of this tutorial.

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

npm create vite@latest

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

• You should get the following prompt
  

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

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

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:

• Next select a variant and press Enter. I will be using just REACT and nothing more for this tutorial

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

That step completes the scaffolding.

• Now move into the project folder with the following command

cd vite-tailwind-tut

• Install the basic dependencies with the following command:

npm i

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

npm run dev

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

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

You can find the code for the VITE setup here

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

STEP 2: Add TailwindCSS

• First we have to install Tailwind in our project. Use the following command:

npm install -D tailwindcss postcss autoprefixer

• Next, create the tailwind config files with the following command:

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.

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

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

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

npm run dev

Testing

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

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.

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

You can find the code for the Tailwind setup here

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

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

Comments

[Paul C. Ishaili]

Wow! Really being awaiting something like this! Thanks @ebereplenty