Intro
Tailwindcss is a utility-first CSS framework which can be assumed as an API for your design system.
Utility classes help you work within the constraints of a system instead of littering your stylesheets with arbitrary values. They make it easy to be consistent with color choices, spacing, typography, shadows, and everything else that makes up a well-engineered design system.
In this article I'm going to share some experiences I've achieved during work with this incredible CSS framework lately.
Learning
Although it is a must-do to read thoroughly each and every framework's documentation, it is rare to find a nice one.
Tailwindcss documentation is one of the best out there. Easy to navigate, well-balanced descriptions and beautiful.
Definitely you should check it out and learn everything you need to know. (+)
An unbiased review
Moreover learning, you might need to know how Tailwind CSS introduce itself to the community. Which one is better? Bootstrap or Tailwind? Is it right time to switch?🤔
Kyle has a short and informative video about it. (+)
Cheatsheet
In fact, we shouldn't memorize things that can be available in a blink of an eye. 😎
Cheatsheets can play huge role in our daily life and we all love it.
You can check out an amazing cheatsheet for Tailwind CSS here. (+)
Playground
Many developers are "Learn by doing" people. Tailwind Play is an interactive environment that you can right jump into practicing and learning Tailwind. (+)
Additionally, it's worth to play this game, too. Apply Tailwind knowledge and Flex to navigate the knight through the dungeon. 😉
My Todo project
Last but not least, review a sample project give you great insight. Check out my simple Todo App built with React, Typescript and Tailwind CSS.
Conclusion
From my point of view, learning Tailwind is one the things every web developer should go with it. I believe it is like a revolution in styling world.
By using Tailwind build rapidly and much easier styling. Also you're not going to write vanilla CSS anymore.
If you have any other recommendations, let everyone know in the comments.
Top comments (2)
Thanks for sharing.
There's a typo in your project where you set the onChange value which is onChnage.
You're welcome.
Thanks for your attention. I'll check it.