Tailwind Css

Tailwind Css is an open source css framework just like boostrap. The thing that i love about this css framework is that you can create website with the helps of utility classes provided to us by tailwind. Now you may think boostrap do the same job so why i need to switch from boostrap to tailwind css.The reason behind is this is straight forward.

Boostrap websites look identical

The websites that you create with the help of boostrap always looks identical and you easily identify it even without the need of watching the code. It breaks the uniqueness of your website. I am not saying boostrap is bad,according to me boostrap is good if your main focus is on back end and you don't care much about design part.

The beauty of tailwind css is your website never looks same and people are unable to figure out that your website is using tailwind css without watching the code. Your design always looks unique and the reason for it is beautifully described by me in the coming article.

You know tailwind css if you know css

Now you may be surprised how is it possible. The reason for this is quite simple. The name of classes used by tailwind css are just properties name of css that we commonly applied to css classes.This is also the reason which makes the website made by tailwind css looks identical.

Let me give you an example to elaborate my point This code simply place all the hyperlinks to the center with a margin of 4px in them.Look how many lines you have to type in order to apply this simple functionality.

Code of css

      .applyFlex {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
      }
      a {
        margin: 4px;
      }

Code of html inside body tag

    <div class="applyFlex">
      <a href="">Home</a>
      <a href="">About</a>
      <a href="">Blog</a>
      <a href="">ContactUs</a>
    </div>

The code of tailwind css looks something like this in order to apply the above functionality.

Code of html inside body tag

    <div class="flex justify-center items-center flex-wrap">
      <a class="m-[4px]" href="">Home</a>
      <a class="m-[4px]" href="">About</a>
      <a class="m-[4px]" href="">Blog</a>
      <a class="m-[4px]" href="">ContactUs</a>
    </div>

From the above example you can clearly see that the code has been drastically reduced and look at the naming that we used in classes. They are so much similar to the actual properties that we used in our .appliedFlex class in css code.

No need to manage css files

The disadvantage of managing css files are you need to switch between different files while developing a website. This sometimes create a headace.But in tailwind css you no need to worry about maintaining different stylesheets for different html files. Taillwind css classes take care of your css.