In the quest to make things easy for frontend developers working with CSS, there has been a lot of improvements in building reliable frameworks to make work easy, as building great user interfaces becomes more complex as the day goes by.

So this is where using tailwind comes in play, unlike other frameworks like bootstrap that don't allow the creation of components to a level or degree where frontend developers are forced to use only a few patterns made available, Tailwind CSS will enable you to be flexible, and creative, with tailwind CSS it's easier to build a complex user interface for web apps because it allows you to style element from scratch using it styling syntax.

In this article, we detail how to set up tailwind CSS easily.

Prerequisite

• Basic understanding of CSS.

• NodeJS.

• VS Code.

DOWNLOAD AND INSTALL NODEJS

Head to your web browser and copy and paste this URL below

https://nodejs.org/en/download/.

Once that is done you see different download options for various devices on the website as shown below.

Choose the operating system you're using then wait for it to start to download automatically.

Once it's done, click on the file downloaded and install it.

INSTALLING TAILWIND CSS

Head straight to your code editor preferably vs code and open a folder from your pc, you can create one on your own if you haven't, after that we open our terminal and start the installation process.

Click on the terminal outlined in the image below then you will see your terminal appear below.

Open your terminal on your vs code then copy and paste this command line.

npm init - y

then press ENTER, after that a package.json file will be created,

here is how it looks.

After that copy and paste the next command line for installation.

npm i -D tailwindcss

Press ENTER and a node modules folder will be created with all the dependencies in it.

After that file is installed, copy and paste this command line

npx tailwindcss init

And press ENTER, a tailwind.config.js file will be created once that is done.

CONFIGURE TEMPLATE PATHS

You can go to your tailwind documentation to copy this code or copy and paste the one below.

Make sure you add the path to your tailwind.config.js file.

Copy this code and paste it into your content on your tailwind.config.js file.

content: ["./*.html"],

ADD TAILWIND DIRECTIVES TO YOUR CSS

We are getting close to the end of this article, we will create a folder in our tailwind project and name it input.css and add the CSS directives.

Copy and paste the below

@tailwind base;

@tailwind components;

@tailwind utilities;

START THE TAILWIND CLI BUILD PROCESS

There are two ways to start the tailwind CLI build process, The first way is the one you have on your regular tailwind documentation which you just have to copy and paste the CLI command line on your terminal for it to be done.

While the Second Way is Kind of a very Simpler and easier way where you add the command line to your package.json file. This method is much better as we can always build our CSS and watch it constantly whenever there are changes without always running a command line.

So We are going to use the Second Way of Starting The Tailwind CLI build Process head to your package.json folder you will see code like this.

Copy and paste the codes below at the highlighted area for it to start the build.

*"build"*: "tailwindcss -i ./input.css -o ./css/main.css",

*"watch"*: "tailwindcss -i ./input.css -o ./css/main.css --watch"

Once that is done you have successfully installed tailwind CSS and can start a new project.

But to confirm that we have to test it by copying and pasting some classes to see if it works properly.

So scroll down in the documentation you will see a highlighted path on the code copy them and paste it into your index.html file.

Now run it on your web browser to confirm if it works, to do that right click and then click liver server.

OUTPUT

CONCLUSION

As we discussed earlier using Tailwind CSS has a lot of advantages when compared to other CSS bootstrap frameworks in my opinion.

It gives room for frontend developers to be flexible and creative and also it allows you to use a set of utility classes that let you work with what you need. And in this article, we went into detail on how to install tailwind CSS and all that is required.