A **portfolio website **is more than a simple resume. It is a thing that proves that you can do what you talk about in your resume. Making a good-looking Portfolio website is good but too many things will make a mess and would likely take much time to load.

Today, we are going to make a static portfolio website using many frameworks such as tippy.js, popper.js but mostly we are going to use tailwind.css.

Folder Structure :

login/
├── index.html
├── me.jpg
└── favicon.png

What is Tailwind CSS?

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

Tailwind is A utility-first CSS framework for rapidly building custom designs. It was made by Adam Wathan and Steve Schoger.

Why should I choose Tailwind over Bootstrap?

There are many reasons why you should consider Tailwind over Bootstrap

1. It is more lightweight — The good thing about Tailwind is that it is _very_lightweight. Tailwind compressed is 45.2kB while Bootstrap compressed is 147kB.

2. The documentation is easier to read than bootstrap — This may change from people’s views but I think that Tailwind has better documentation than Bootstrap. The reasons are that you can quickly search by pressing / , they give examples with normal CSS in the right.

Easier To Understand

3. It is easier to write and read — In Bootstrap, If you wanted to have a custom style, you had to create classes that come close to Bootstrap’s classes but just needed to be just a little bit adjusted too often. But if you use Tailwind, all you have to do is add it to the colors object in the Tailwind configuration file. That’s it!

#responsive-web-design #portofolio #tailwind-css #tutorial #html