Add tailwind css

[rifat-ml]

Tailwind CSS is a utility-first CSS framework that allows us to set CSS properties to elements by passing a specific class. We can also use tailwind utility classes to our scss file and it's utility-first but not utility-only CSS framework. By using tailwindcss in our project we can bring off some great benefits mentioned below:

• We don't need to switch .scss file just to add some CSS properties. It solves the hassle of file switching and increases development speed. By using that we can also reduce the number of .scss files in our project
• Some cases it's very frustrating to come up with different class names for each element. It solves that issue as well
• It helps us to make our .scss file short and concise
• As we can also use tailwind classes in .scss file we can easily create reusable classes
• If we want we can also make our design system by using tailwind config. It's highly configurable

Initially, there is some learning curve using tailwind utility classes but having tailwind has nice documentation, and the Tailwind CSS IntelliSense extension won't make it that much complexity to adopt.

My PR link is here where I integrated tailwind CSS into our existing project and addressed some use cases that I mentioned.