Day -5 of React with Me
On day 5 before progressing any further into react I found this awesome CSS alternative which is Tailwind CSS. Traditional CSS took me hours to make a single page. Writing the classes and pseudo classes were time consuming so for that i had to surf internet and consult my friends. That's when I found about Tailwind CSS.
Tailwind CSS is a utility-first CSS framework that allows you to quickly build custom designs without having to leave your HTML. Which means you can directly inject styling in your html document instead of going to another file and targeting the object by a class or id. Tailwind provides low-level utility classes that you can use directly in your HTML to style your elements.
In my first webpage with tailwind, I utilized Tailwind CSS to create a modern and responsive design. I started by setting up my project and installing Tailwind CSS. Next, I linked the Tailwind CSS stylesheet in the <head> section of my HTML file to access its utility classes.
I used Tailwind's utility classes to style various elements of my webpage. For example, I used bg-blue-600 to set the background color of the header and footer to a shade of blue. You can simply write in classes the styling you want. It has some different syntaxes as compared to the traditional CSS. For ex - To change a font color in CSS we write color:blue; but with tailwind we write 'text-blue-100' (100 is the shade of the color which is return before)
Overall, Tailwind CSS helped me quickly style my webpage and achieve a clean and professional look without writing a lot of custom CSS.
Project - github.com/piyusss11/tailwind-tut (made it to get a hang in Tailwind not a full fledged webpage.)