Some More about Tailwind

What's New!

In previous blog I discussed about basics of Tailwind CSS and its advantages over any other framework in the current scenario, but it's not always like that it's a blessing while working with it, It's also have few disadvantages which I came to know after building projects and reading hours and hours of documentation of it. But more importantly I enjoyed this process and built my confiedence for using it in the projects.

Let's Discuss some negatives of Tailwind

Tailwind makes your code difficult to read, Tailwind makes markup difficult to read for several reasons that I’d like to explore here.
Styling and HTML are mixed since we don’t have to write CSS rules, Tailwind works differently from most CSS frameworks. This is advantageous for non-CSS users, but it also means that Tailwind merges style directives with our HTML files.
There aren’t as many stylistic components in Tailwind as there are in Bootstrap. Sadly, this implies that adding elements like headers, buttons, and navigation bars manually to web apps is necessary.
We just have to define certain utilities classes again and again to expect the output. Let's understand with example:

Body

<body>
      <a>
          Click Here
       </a>
</body>

Normally if we want border on hover on this element we write CSS as

a:hover{
     border: 2px solid #000000;
}

But in Tailwind

 <body>
      <a class="hover:border-solid hover:border-2 hover:border-black"></a>
 </body>

By this example, we can see that if we want to write certain utlities classes we have to write them again & again

About Projects in Tailwind.CSS

I made 4 projects in Tailwind which include (paytm clone, Shopify clone, a rode clone and a manage landing page)

Link for Paytm Clone[Home Page]:
Paytm Clone: https://payupi-app.netlify.app/
YouTube Demo: youtu.be/9wQOnEWbUv0

This project was built using Semantic HTML and Tailwind from scratch. The official Paytm homepage has an issue with responsive design so I made a clone of the Paytm home page using Tailwind and fixed it. It took me close to 16 hours to make Paytm Home page clone. Tailwind is a utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in the markup. This project helped me a lot in understanding the basic yet effective Tailwind concepts. We just have to add our desired Css property in form of classes and boom we got all the styling covered. The main learning after building this project is to make the complex responsive design simpler and easier and faster with Tailwindcss screen breakpoints.

all-devices-black (1).png