Packed with a project
From their official definition, Tailwind CSS helps to Rapidly build modern websites without ever leaving your HTML.
Tailwind CSS is just like using the keywords(class names) and we get full power to customize it.
For eg: If I wanna add margin-top of x px,margin-bottom of y px, and padding-bottom of z px in normal CSS you would do like
.classname{ margin-top:10px; margin-bottom:12px;padding-bottom:25px }`
But when tailwind CSS comes to the picture, this is a piece of cake
<p class="mt-3 mb-4 pb-8">Hello There beautiful people</p>`
Now you decide which one is easier. Once you understand the flow of how tailwind CSS works, You are good to go.
Tailwind CSS provides a ton of utility classes like margin, padding, position, and way more.
Now, I know to learn Tailwind CSS the easiest way is to do a project.
So I have decided to code my Twitter profile and the outcome is mindblowing I did some changes to their design. Initially, it looked like this…
Now let's make our hands dirty. I will code in the playground provided by the Tailwind team.
Now let me show the awesome output.
Can you people guess how much time I took for this? Actually, it is just 24 mins (I kept a timer). If I just tried raw CSS, it would eventually take more than an hour.
I will share the most useful class(class names) that you would use and the rest of it you can look at Tailwindcss.com .
Format classname-Y where Y represents the value
- Margin :
m-Y(For the values of Y check here) - Padding:
p-Y(For the values of Y check here) - Height & width :
h-Y,w-Y - Justify Content:
justify-Y(Y can be center, between, evenly, start, etc) - Align Items:
items-Y(Y can be center, between, evenly, start, etc).
That's It. When you start doing Tailwind CSS and If It really helped you and If you are motivated by me to start learning, You can appreciate me by buying me a coffee or by following me on Twitter.
Conclusion.
We have looked into tailwind CSS and done a small project. I would suggest you to use Tailwind CSS in your next project.